Adobe XD リピートグリッドの低レイヤ最適化とデータ駆動型プロトタイピングの極意
デザインシステムをスケールさせ、数千のノードを持つ複雑なUIツリーをミリ秒単位で構築する——。
フロントエンドエンジニアやUIアーキテクトにとって、モックアップの量産は単なる「手作業」ではなく、自動化されるべきパイプラインの一部でなければならない。
Adobe XDの「リピートグリッド（Repeat Grid）」は、単なるレイアウトのコピペツールではない。これは、レイアウト・エンジンとDOM（Scene Graph）の動的複製を抽象化した、極めて強力なクライアントサイド・ジェネレータである。
本稿では、リピートグリッドの内部アーキテクチャとメモリ効率の限界を見据え、SNSのタイムラインやECサイトの商品一覧といった構造化データを「一瞬で、美しく、正確に」流し込むためのエンジニアリング手法を解説する。
—
1. 内部アーキテクチャの理解：なぜリピートグリッドは高速なのか
リピートグリッドの本質は、「マスターコンポーネントと仮想インスタンスの同期機構」にある。
一般的なベクターエディタでN個のカード要素を並べる場合、UIは $N$ 個の独立したグループツリーを生成し、メモリ消費量と再描画（レイアウト計算）コストを線形に増加させる。しかし、XDのリピートグリッドは、単一のマスター領域（Master Cell）を保持し、それをGPUアクセラレーションを前提としたパディング・マージン演算によって仮想的に配列（Array）展開している。
メモリフットプリントとパフォーマンスの最適化
- DOMノード数の抑制: グループをバラバラに複製するのではなく、内部的には単一の描画命令のストライドとして処理されるため、メモリ消費量が劇的に削減される。
- パディングとガターの数学的制御: グリッド間の余白（Gutter）は、CSSの `gap` プロパティと同様に、レイアウト計算のオーバーヘッドを最小化するアルゴリズムで処理されている。
この特性を理解していれば、「とりあえず複製して後から直す」という非効率なアプローチではなく、「マスターセルの構造を極限まで軽量化し、データバインディングに最適化する」という設計思想に至るはずだ。
—
2. 構造化データの流し込み：テキストと画像の爆速アトミック・インジェクション
数千件規模のEコマースカタログや無限スクロールのタイムラインをプロトタイピングする際、プレースホルダー用の「Lorem Ipsum」や適当なアバター画像を一つずつ手動でドラッグ＆ドロップしているようでは、エンジニアとしてのアルゴリズム的思考が欠如していると言わざるを得ない。
リピートグリッドには、TSV（Tab-Separated Values）またはプレーンなテキストファイル、および画像フォルダを一括でマッピングするシリアライズ機構が備わっている。
A. テキストの一括流し込み（TSVハック）
テキスト要素を含むリピートグリッドに対し、改行区切りのテキストファイルをドラッグ＆ドロップすると、グリッドのインデックス順に値が自動アサインされる。
さらに、タイトルと価格、SKUなどの複数プロパティを持つデータを流し込む場合、TSV形式（タブ区切り）のテキストファイルを用意するのが最速の解となる。
準備するデータ (`products.txt`):
超軽量チタンマグカップ ¥3,400 在庫あり
メカニカルキーボード 60% ¥18,500 残り3点
ノイズキャンセリングヘッドホン ¥29,800 予約受付中
1. XD側で「商品名」「価格」「ステータス」に対応するテキストレイヤーをリピートグリッド内に配置。
2. 上記の `products.txt` を選択し、一番上のテキストレイヤーにドラッグ＆ドロップ。
3. 一撃で全行のデータがマトリクス状に同期される。
B. 画像アセットの一括バインド
商品画像やユーザーアバターも同様だ。ローカルのフォルダ内に連番または任意の画像（`img_01.png`, `img_02.png`…）を用意し、それらを複数選択した状態で、リピートグリッド内の画像マスク（シェイプ）に一括ドラッグ＆ドロップする。
XDのエンジンは、ファイル名のソート順に従い、グリッドのセルに対して画像を巡回（ラウンドロビン）させながらアサインしていく。これにより、視覚的なリアリティを持つモックアップが数秒で完成する。
—
3. 現場で使える極限の効率化テクニック：ネストされたグリッドの構築
単なる1次元のリスト（縦方向のタイムラインなど）だけでなく、2次元のグリッド（ECサイトのグリッド表示など）や、カード内部に「いいね数」や「タグ」といった可変長のサブ要素を持つ複雑なUIを構築する場合、リピートグリッドのネスト（入れ子）が必須となる。
ネスト構造の設計手順
1. インナー・グリッドの作成: 例えば、商品カード内に並ぶ「カラバリのドット（色選択）」や「タグのリスト」を独立した小さなリピートグリッドとして作成する。
2. アウター・グリッドへの統合: そのインナー・グリッドを、商品全体を並べるアウター・リピートグリッドの中に内包させる。
3. パディングの死守: ネスト構造では、親セルと子セルのレイアウト制約（Constraints）が競合しやすい。必ずオートレイアウト的な概念を意識し、マージン値は一貫した倍数（8pxグリッドシステムなど）で固定すること。
—
4. 自動化スクリプト・プラグイン開発への架け橋（Node.js / ExtendScriptの思想）
もし、数万件に及ぶ動的データや、外部API（microCMSやStripeなどのモックデータ）と直接同期するプロトタイピング環境を構築したい場合、XDの標準機能だけでは手動のドラッグ＆ドロップがボトルネックになる。
ここで、XDのプラグインAPI（JavaScript / UXP: Unified Extensible Platform）を活用した、データインジェクションの自動化スクリプトの概念図を提示する。
/
- @file uxp_data_injector.js
- @desc Adobe XD UXP環境において、外部JSONからリピートグリッドへ動的にデータをバインドする概念コード
/
const { selection } = require(“scenegraph”);
const fs = require(“localfs”);
async function injectDataToRepeatGrid() {
const node = selection.items[0];
// 選択されたノードがリピートグリッドか検証
if (!node || node.constructor.name !== “RepeatGrid”) {
console.error(“リピートグリッドを選択してください。”);
return;
}
// 外部JSONまたはAPIからデータを取得（モック）
const dataSource = [
{ title: “Node.js v20 LTS”, price: “Free” },
{ title: “Rust System Programming”, price: “¥4,200” },
{ title: “GraphQL Enterprise”, price: “¥12,800” }
];
// リピートグリッドの子要素を走査し、データを流し込む
// ※ 実際のUXP API仕様に準じたプロパティ操作を行う
node.triggeredChildren.forEach((child, index) => {
if (index < dataSource.length) {
const data = dataSource[index];
// 子孫レイヤーからテキストフィールドを特定して書き換え
// child.find(...) 等を用いたDOMトラバーサル
}
});
console.log("データインジェクションが完了しました。");
}
このようなスクリプトを自製、あるいはプラグインとして組み込むことで、デザインツールとバックエンドのモックサーバーをシームレスに接続し、「データが変わればデザインもリアルタイムで変化する」という真のDevOps駆動型デザインを実現できる。
—
5. 結び：エンジニアリングの視点でデザインツールをハックせよ
UI/UXデザインは、もはや「お絵描き」の領域ではない。デザインシステム、コンポーネント指向、そしてデータ駆動型のプロトタイピングは、すべてコードを書くことと同等の論理的思考力を要求される。
Adobe XDのリピートグリッドは、その思想を最も素直に具現化した強力なエンジンの一つだ。その内部挙動を理解し、TSVや画像の一括流し込み、さらにはデータ構造の最適化を極めることで、プロトタイピングの速度は桁違いに跳ね上がる。
手を動かす前に構造を設計し、無駄な手作業を徹底的に排除せよ。それが、真のハイパフォーマンス・エンジニアの仕事である。