Figmaにはリピートグリッドという機能は存在しません。しかしオートレイアウト機能を使用することで同様の効果を得られます。オートレイアウトは指定したフレーム内の要素を、単一方向に規則的に並べるためのルールを設定できる機能です。この機能を活用することで、Adobe XDのリピートグリッドに近い表現が可能です。

オートレイアウトを適用するには整列させたい要素をすべて選択し、右クリックメニューから「オートレイアウトの追加」を選択します。そのあとプロパティパネルの「オートレイアウト」セクションで並べる方向や要素間の間隔、アラインメントなどを細かく設定できます。これによりフレーム内に要素を追加すると、自動的にルールに従ったレイアウトを生成することが可能です。

オートレイアウトのメリットは単にリピートするだけでなく、要素の間隔や配置を柔軟に調整できることです。たとえばカードビューのような複数の要素を含むコンポーネントを作成し、それらを縦横に規則的に配置することも容易です。さらにフレームのサイズ変更に応じて要素の配置が自動調整されるため、レスポンシブデザインの作成にも役立ちます。

コンポーネントとオートレイアウトの組み合わせ手法

Figmaでリピートグリッドのような機能を実現する際、コンポーネントとオートレイアウトを組み合わせることで効率的な作業が可能です。コンポーネントは再利用可能な要素を作成する機能で、親子関係を持つインスタンスを生成できます。このコンポーネントをオートレイアウトと組み合わせることで、複雑なレイアウトも簡単に管理できます。

具体的な手順としては、まずリピートさせたい要素をコンポーネント化します。次にそのコンポーネントのインスタンスを必要な数だけ作成し、それらをまとめて選択してオートレイアウトを適用します。この方法により個々の要素の編集はコンポーネントで一括管理しつつ、全体のレイアウトはオートレイアウトで制御するという効率的なワークフローが実現できるのです。

また、2023年6月に追加されたオートレイアウトの新機能「折り返し（Wrap）」を使用することで、フレームの幅に合わせて内包されるコンテンツを自動的に行で折り返すことが可能になりました。その結果、リピートグリッドのように柔軟な要素の配置がより簡単に実現可能。コンポーネントとオートレイアウト、折り返し機能を上手く組み合わせることで複雑なレイアウトも効率的に作成できるのです。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。