Figma にリピートグリッドはある? — 再現する 4 つの方法と使い分け
「XD ではリピートグリッドで一瞬だったカードの一覧が、Figma だと作り方がわからない」「リピートグリッドに相当する機能を Figma で探したが見つからない」「間隔をドラッグで一括調整していたあの操作は、Figma では何に当たるのか」— Adobe XD から Figma に移った人が最初につまずくポイントのひとつが、このリピートグリッドです。
先に結論から言うと、2026 年 8 月時点で、Figma に「リピートグリッド」という名前の機能はありません。ただし、リピートグリッドがやっていた仕事— 同じ要素を等間隔に並べ、間隔をまとめて調整し、中身だけ個別に差し替える — は、Figma の標準機能の組み合わせで再現できます。
本記事では、代替になる 4 つの方法 → 使い分けの基準 → XD でよく使った操作(間隔の一括調整 / 一部だけ差し替え)の Figma での対応 の順に整理しました。Pixel Fine Converter の開発で XD → Figma 変換を扱ってきた立場から、XD 側の操作感を知っている前提で「Figma ではどう考えればいいか」をまとめます。
この記事で得られること
- Figma にリピートグリッド相当の機能があるかどうかの、現時点での正確な答え
- 代替になる 4 つの方法(折り返し / グリッドフロー / コンポーネント + インスタンス / プラグイン)の概要
- 「XD のリピートグリッドのどの側面を代替したいか」で選ぶ、4 つの方法の使い分け
- XD でおなじみだった「間隔のドラッグ一括調整」「セルごとの内容差し替え」の Figma でのやり方
- XD から移行したファイルで、リピートグリッドだった部分をどう整えるか
関連記事も合わせてどうぞ
Auto Layout そのものの使い方(追加・解除、Hug / Fill、折り返しの詳細)は Figma オートレイアウト(Auto Layout)の使い方 を、XD のスタック / リピートグリッドが変換でどう持ち込まれるか は Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換する を参照してください。本記事は「Figma 側でリピートグリッド相当のものをどう作るか」に特化しています。
📝 はじめに — 「リピートグリッドがない」で手が止まる場面
XD のリピートグリッドは、ひとつの機能で複数の仕事をこなしていました。Figma で困る場面は、そのどの仕事を探しているかで分かれます。
場面 A: 同じ要素を等間隔にたくさん並べたい
カードやリスト項目を縦横に繰り返し配置したいケース。Figma では Auto Layout(折り返し / グリッドフロー) が受け皿になります(方法 1・2)。
場面 B: 並べたあとで、間隔や見た目をまとめて変えたい
XD でグリッドの隙間をドラッグして一括調整していたケース。Figma では Auto Layout の Gap(間隔) を 1 箇所変えるだけで全体に効きます(後述の 間隔をあとから一括で変える)。
場面 C: 並べた要素の中身だけ、1 つずつ別の内容にしたい
「レイアウトは共通、テキストと画像はセルごとに違う」という、リピートグリッドの中核だった部分。Figma では コンポーネント + インスタンスのオーバーライド が対応します(方法 3)。
以下ではまず「Figma に同名機能はない」の確認から入り、方法 1 → 4 の順に見ていきます。急いでいる人は 比較表 から読んでも成立するよう書いています。
🧭 Figma に「リピートグリッド」という機能はない — まず結論
2026 年 8 月時点で、Figma の公式ヘルプに「Repeat Grid(リピートグリッド)」に相当する機能の記載はありません。 要素をドラッグ 1 回で自動複製する、XD のあの機能そのものは Figma に存在しない、というのが現状の正確な答えです。
これは Figma の設計思想の違いでもあります。XD のリピートグリッドは「複製と整列をひとつの専用機能にまとめる」アプローチでしたが、Figma は、「並べる仕組み(Auto Layout)」と「同じものを増やす仕組み(コンポーネント)」を分けて持つアプローチを取っています。そのため、リピートグリッドの仕事は Figma では 1 機能ではなく、複数の機能の組み合わせに置き換わります。
「分かれている」ことは不便とは限らない
最初は「XD なら 1 操作だったのに」と感じますが、分かれているぶん 並べ方だけ変える / 中身だけ変える が独立して制御できます。たとえば「並びは崩さずカードのデザインだけ全部差し替える」は、コンポーネント側を編集するだけで済みます。XD で経験のある「グリッドを解除したら編集し直しになった」という類のやり直しは起きにくくなります。
なお、Figma の機能は更新が速く、名称や配置が変わることも珍しくありません(本記事も公式ヘルプの現行記載を基準に書いています)。「リピートグリッド」という名前で見つからなくても、以下の 4 つの方法で同じ結果にたどり着けます。
🔁 方法 1 — Auto Layout の折り返し(Wrap)で並べる
向いている場面: 1 方向の繰り返し + 幅に応じた折り返し
Auto Layout を適用したフレームで折り返し(Wrap)を有効にすると、子要素が横に並び、フレーム幅に収まらなくなったら次の行に落ちるようになります。カード一覧やタグの羅列など、「横に並べて、あふれたら折り返す」タイプの繰り返しパターンはこれで再現できます。
手順の骨子は次のとおりです。
- 並べたい要素を選択して Auto Layout を追加(
Shift + A) - フローを横方向にし、Wrap を有効にする
Gapで要素間の間隔を指定する
要素を増やしたいときは、中の要素をコピー & ペーストするだけです。Auto Layout が整列と間隔を管理しているので、貼り付けた要素は自動で隊列に加わります。XD のように「ハンドルをドラッグして増やす」操作ではありませんが、「増やしたら勝手に揃う」という結果は同じです。
折り返しは横方向のフローでのみ有効などの細かい条件があります。設定の詳細やつまずきどころは Figma オートレイアウトの使い方 の折り返しの節に譲ります。
🔲 方法 2 — グリッドフローで 2 次元に並べる
向いている場面: 行 × 列の位置を揃えた 2 次元グリッド
2025 年に Auto Layout へ加わったグリッドフローを使うと、フレームの中に行と列(tracks)を持つ格子を定義して、子要素をセルに配置できます。折り返し(方法 1)は「詰めて並べて、あふれたら折る」動きなので行ごとの列位置は揃いませんが、グリッドフローは縦横の軸がきっちり揃うのが違いです。
XD のリピートグリッドが作っていた「N 行 × M 列のカードグリッド」に最も見た目が近いのはこの方法です。行間・列間の間隔は Gap between rows / Gap between columns で独立に指定でき、特定の要素だけ複数セルにまたがる配置(span)もできます。
こちらも要素の増やし方はコピー & ペーストです。グリッドフロー自体の設定手順は Figma オートレイアウトの使い方 のグリッドフローの節で詳しく扱っています。
🧩 方法 3 — コンポーネント + インスタンスで量産する
向いている場面: 「レイアウトは共通、中身はセルごとに違う」— リピートグリッドの本命代替
実は、XD のリピートグリッドの挙動に構造として一番近いのはこの方法です。XD のリピートグリッドは「見た目の変更は全セルに反映、テキストや画像はセルごとに独立」という動きでした。Figma のコンポーネントはまさに同じ関係を持っています。
- メインコンポーネントの編集 → すべてのインスタンスに反映(= XD で 1 セルのスタイルを変えると全セルに効く挙動に対応)
- インスタンス側のオーバーライド → そのインスタンスだけ変わる(= XD でセルごとにテキスト・画像を差し替える挙動に対応)
手順の骨子は次のとおりです。
- 繰り返したい要素(カード 1 枚)をコンポーネント化する
- インスタンスを必要な数だけ複製する
- 複製したインスタンス群を方法 1 か 2 の Auto Layout で並べる
- 各インスタンスのテキスト・画像を個別に差し替える
つまり「コンポーネントが中身、Auto Layout が並び」という分担です。方法 1・2 と組み合わせて初めてリピートグリッドの全体像に対応する点だけ、頭に置いておいてください。
コンポーネントの作り方・バリアントとの関係など、コンポーネント側の詳細は Figma のバリアントとコンポーネントプロパティの使い方 にまとめています。
🔌 方法 4 — プラグインで一括複製する
向いている場面: 「ドラッグで増やす」操作感そのものを再現したい
Figma Community には、XD のリピートグリッドに似た操作感で要素を一括複製するプラグインが複数公開されています。「リピートグリッド」系の名前で検索すると見つかります。標準機能で組むより一手で済む場面はあるものの、プラグインは提供状況や挙動が変わることがあるため、長く使うファイルの基盤にするなら標準機能(方法 1〜3)を優先するのがおすすめです。
XD からの移行全般で使えるプラグインの整理は Adobe XD から Figma へ移行する人のための Figma プラグイン 10 選 を参照してください。
⚖️ 4 つの方法の使い分け(比較表)
「XD のリピートグリッドのどの仕事を代替したいか」で選ぶのが早道です。
| 代替したい仕事 | 使う方法 | ポイント |
|---|---|---|
| 横に並べて、あふれたら折り返したい | 方法 1: 折り返し | 列位置は揃わない「詰め込み型」。タグ・チップの羅列に向く |
| 行 × 列の位置が揃ったグリッドにしたい | 方法 2: グリッドフロー | XD のリピートグリッドに見た目が最も近い。span も使える |
| 中身をセルごとに差し替えたい / 見た目を一括管理したい | 方法 3: コンポーネント | 挙動が最もリピートグリッドに近い。並びは方法 1・2 と併用 |
| 「ドラッグで増やす」操作感を再現したい | 方法 4: プラグイン | 手早いが、長期運用の基盤には標準機能を優先 |
実務では 方法 3(中身)× 方法 1 or 2(並び)の組み合わせが本命です。「カード = コンポーネント、一覧 = グリッドフロー」の形にしておくと、XD でリピートグリッドに任せていた仕事のほぼ全てが Figma 側でカバーできます。
XD と Figma で「1 機能 : 2 機能」の対応になる
XD のリピートグリッド 1 つに対して、Figma は「並べる = Auto Layout」「増やして管理する = コンポーネント」の 2 機能で対応する — この対応関係さえ頭に入れば、リピートグリッドの再現で迷うことはほぼなくなります。
↔️ 間隔をあとから一括で変える
XD のリピートグリッドでは、要素と要素の間(ピンク色で表示される領域)にカーソルを合わせ、双方向矢印に変わったらドラッグすることで、全セルの間隔をまとめて調整できました。「あの操作は Figma だと何になるのか」は移行直後によく出る疑問です。
答えは Auto Layout の Gap(間隔) です。
- 折り返し(方法 1):
Gapの数値を変えると、全要素の間隔が一括で変わる - グリッドフロー(方法 2):
Gap between rows(行間)とGap between columns(列間)を独立に指定できる
XD がドラッグ操作だったのに対し、Figma は数値指定が基本です。8 / 16 / 24 のような間隔システムで統一したいデザインでは、数値で入れるほうがむしろ確実です。フレーム内の余白(外周)は Gap ではなく Padding の担当なので、「間隔は変わったのに端が詰まったまま」というときは Padding 側を確認してください。
✏️ 一部だけ内容を差し替える — できること / できないこと
リピートグリッドのもうひとつの目玉が「一部変更」— レイアウトを共有したまま、セルごとにテキストや画像だけ差し替えられる挙動でした。XD では複数の画像を選択してグリッドにドラッグすると、各セルに別々の画像が流し込まれます。
Figma でこれに対応するのが、方法 3 で触れたインスタンスのオーバーライドです。何がセルごとに変えられて、何が変えられないかは明確に決まっています。
オーバーライドできる(= セルごとに変えられる)
- テキストの内容と、フォント / 太さ / サイズなどの文字設定
- 塗り・線(色 / 種類 / 不透明度)— 画像はここに含まれます(画像は塗りとして扱われるため、セルごとに別画像へ差し替え可能)
- エフェクト(シャドウ / ブラーの追加・変更・削除)
- ネストされたインスタンスの入れ替え(例: カード内のアイコンだけ別のものに)
オーバーライドできない(= 全セル共通のまま)
- レイヤーの順序・重ね順
- 要素の位置や、Auto Layout 内での配置
- Constraints(制約)
つまり「中身は変えられるが、構造は変えられない」というのが Figma の割り切りです。1 セルだけレイアウト構造を変えたい場合は、そのインスタンスを切り離す(デタッチする)ことになりますが、切り離すとメインコンポーネントとの連動も失われます。デタッチの判断基準は Figma でコンポーネントを解除する方法 に詳しくまとめています。
オーバーライドが引き継がれないときはレイヤー名を確認
インスタンスを別のバリアントに切り替えたとき、Figma はレイヤー名が一致している要素のオーバーライドを保持します。差し替えたはずのテキストが切り替えで元に戻る場合は、コンポーネント側のレイヤー名が揃っているかを確認してください。
🔄 XD から移行したファイルのリピートグリッドはどうなるか
ここまでは「Figma でゼロから作る」話でしたが、手元の XD ファイルにすでにリピートグリッドがある場合は、まず Figma への取り込み(変換)という工程が入ります。
Pixel Fine Converter は、XD のリピートグリッドを Figma の構造に変換して持ち込みます。変換後のファイルでは、本記事で見てきた「Figma 側の考え方」がそのまま当てはまります — つまり、移行後にレイアウトを育てていくなら、並びは Auto Layout、中身はコンポーネントという Figma の分担に寄せていくのが基本方針です。
変換でリピートグリッドがどのような構造になるか、Auto Layout 化の精度や制約がどうなっているかは、変換の仕組みに特化した Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換する で詳しく解説しています。
Figma Communityから1クリックで追加できます
❓ よくある質問
Q: Figma にリピートグリッドはありますか?
2026 年 8 月時点で、Figma に「リピートグリッド」という名前の機能はありません。同じ仕事は Auto Layout(折り返し / グリッドフロー)とコンポーネント + インスタンスの組み合わせで再現できます。本記事の 比較表 で用途別の使い分けを整理しています。
Q: XD のリピートグリッドに一番近い Figma の機能はどれですか?
見た目の近さならグリッドフロー(行 × 列の格子)、挙動の近さならコンポーネント + インスタンス(見た目は全セル連動・中身はセルごと独立)です。実務ではこの 2 つを組み合わせて「カード = コンポーネント、一覧 = グリッドフロー」の形にするのが本命です。
Q: 要素の間隔をまとめて変えるには?
Auto Layout の Gap(間隔) を変更します。XD のように隙間をドラッグするのではなく数値で指定する方式で、グリッドフローでは行間と列間を独立に指定できます。詳しくは 間隔をあとから一括で変える を参照してください。
Q: 並べた要素の 1 つだけ画像を差し替えられますか?
はい。要素をコンポーネントにしてインスタンスを並べていれば、画像は塗り(Fill)としてインスタンスごとにオーバーライドできます。テキスト・エフェクト・ネストされたインスタンスの入れ替えも同様です。一方、位置や重ね順はオーバーライドできないため、構造ごと変えたい場合はデタッチが必要になります。
Q: リピートグリッド系のプラグインは使うべきですか?
「ドラッグで増やす」操作感を手早く再現したい場面では役立ちます。ただしプラグインは提供状況が変わることがあるため、長く運用するファイルの基盤は標準機能(Auto Layout + コンポーネント)で組むことをおすすめします。
Q: XD ファイルの中のリピートグリッドは、Figma に変換するとどうなりますか?
Pixel Fine Converter では、リピートグリッドの構造を Figma 側のレイアウトに変換して持ち込みます。変換の仕組みと精度、Auto Layout 化の挙動は Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換する で詳しく解説しています。
🎯 まとめ
Figma に「リピートグリッド」という機能はありませんが、それは同じ仕事ができないという意味ではありません。
記事のポイント
- 2026 年 8 月時点、Figma に「リピートグリッド」相当の単一機能はない — 複製 + 整列は複数機能の組み合わせに置き換わる
- 並べる仕事は Auto Layout — 1 方向 + 折り返しなら Wrap、行 × 列を揃えるならグリッドフロー
- 増やして管理する仕事はコンポーネント + インスタンス — 「見た目は全セル連動・中身はセルごと独立」という挙動は XD のリピートグリッドとほぼ同じ
- 間隔の一括調整は
Gap— XD のドラッグ調整に対して Figma は数値指定。行間 / 列間の独立指定もできる - セルごとの差し替えはオーバーライド — テキスト・画像(塗り)・エフェクトは変えられるが、位置と重ね順は変えられない
- 実務の本命は「カード = コンポーネント、一覧 = グリッドフロー」の組み合わせ
XD の 1 機能が Figma では 2 つの機能に分かれている — この対応関係さえつかめば、リピートグリッドで培った作業の進め方は Figma でもそのまま活かせます。
手元の XD ファイルにリピートグリッドで組んだデザインが残っているなら、まず Pixel Fine Converter で Figma に変換し、そのうえで本記事の方法でレイアウトを育てていってください。
Figma Communityから1クリックで追加できます
関連ページ
- Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換する — 変換時にリピートグリッドがどう Auto Layout 化されるか
- Figma オートレイアウト(Auto Layout)の使い方 — 折り返し・グリッドフローを含む Auto Layout の全体像
- Figma のバリアントとコンポーネントプロパティの使い方 — 「中身」側を担うコンポーネントの作成と運用
- Figma でコンポーネントを解除する方法 — 構造ごと変えたいときの判断基準
- Adobe XD から Figma へ移行する人のための Figma プラグイン 10 選 — 移行全般で使えるプラグインの整理
- Adobe XD から Figma への移行 実践ガイド — 移行プロセス全体の手順