ガイド：Figma 実務テクニック
Figmaのオートレイアウト／コンポーネントまわりの小技をまとめたトピックガイド。個別ドキュメントへのリンク付き。
1. オートレイアウトを「構成」に使う
- LPはセクションごとにフレーム化し、親を縦方向オートレイアウトに → ドラッグで並べ替え、非表示で詰める。
LPはセクションごとにフレーム化し、親をオートレイアウトにして並べ替えを一瞬で行う
2. オートレイアウトで「重なり」を作る
- 横並びオートレイアウトの Gap に負の値（例 -8）を手入力 → アバタースタック。絶対配置不要。新しいオートレイアウトでは Auto gap は負にならない点に注意。
Figmaのオートレイアウトで負のギャップを使い、重なったアバタースタックを作る
3. テキストはText Stylesに載せる
- 見出し・本文をText Styles登録 → 後からのフォント変更が一括反映。
Figmaでは見出し・本文をText Stylesに登録し、フォント変更を一括反映する
4. コンポーネントは最初にプロパティ設計
- 色違い・サイズ違いは個別コンポーネントにせず、バリアント（Color / Size / State）でまとめる。文言・アイコン有無はコンポーネントプロパティで。
Figmaのボタン等は個別コンポーネントで量産せず、バリアントでプロパティ化する
5. 余白は目視せず数値で確認
- Option（Mac）/ Alt（Windows）を押しながらホバー → 要素間距離が数字で出る。実装前の答え合わせに使う。
Figmaでは Option / Alt ホバーで要素間の余白を数字で確認する
共通の考え方
- 「手で位置を直さない」構造にしておくと、変更に強く、実装（Flexbox / props）とも対応が取りやすい。
- Fixed より Hug / Fill を基本にする。
AIとFigmaの連携
- 実装したコードをFigmaに戻して赤入れする／Figma Makeでデザインデータにする AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する
- Figmaのテンプレートに、AIが作ったコピーをプラグインで大量に差し込んで広告バナーを作る 広告クリエイティブは、コピーを文字数ごとの専用エージェントに分け、Figmaのテンプレートへ自動で差し込む
- Figmaのエージェントで、読み込み中・空・エラーなどの抜けている状態を洗い出す FigmaのAIエージェントで、既存画面から「読み込み中・空・エラー」などの抜けている状態を洗い出す
- Claude Designプロトに名札＋対応表を付け、Figma MCPでDSコンポーネントへ差し込む Claude Designのプロトは「名札＋対応表」でデザインシステムどおりのFigmaにする