コンポーネントとオートレイアウトを使いこなす！Figma中級者講座
Figma中級者へのステップアップ
Figmaを使い始めた頃は、図形を配置してテキストを入れるだけでもワクワクします。
しかし、デザインの規模が大きくなると「修正が面倒」「整列が崩れる」「更新に時間がかかる」といった壁にぶつかります。
その壁を乗り越えるためのカギが、コンポーネントとオートレイアウトです。
これらを理解すれば、Figmaでの作業スピードが2倍、チーム全体の整合性も劇的に向上します。
コンポーネントとは？：再利用できる「デザインの部品」
▶ コンポーネントの基本
コンポーネントとは、再利用できるデザインパーツのことです。
同じボタンやカードを何度も作る代わりに、1つの元デザイン（マスター）を作り、それをコピーして使う仕組みです。
例
- ボタン
- ナビゲーションバー
- カードレイアウト
- フッター
これらをコンポーネント化しておくことで、変更が一括反映されます。
たとえば「ボタンの角丸を8px→12pxに変更」しても、全ページのボタンが自動で更新されます。
コンポーネントの作り方（実践編）
ステップ1：要素をまとめる
ボタンのようなパーツを選択して、
右クリック → Create component（または Cmd＋Option＋K）を実行。
これで紫色の枠がついた“コンポーネント”になります。
ステップ2：インスタンスとして配置
作成したコンポーネントをコピーすると、
元デザインとリンクした“インスタンス”が作られます。
見た目は同じですが、編集権限は制限され、
元（マスター）を変更すると全てのインスタンスが自動更新されます。
ステップ3：Variant（バリアント）で状態をまとめる
ボタンのように状態が複数ある場合は、「Variant（バリアント）」機能で統一しましょう。
例
- 通常（Default）
- ホバー（Hover）
- 無効（Disabled）
右パネルの Component Set にまとめておくと、
プロトタイプで「Hover状態への切り替え」も簡単に設定できます。
オートレイアウトとは？：柔軟に動く「レイアウトの骨格」
▶ オートレイアウトの基本
オートレイアウトとは、要素の位置や余白を自動調整する仕組みです。
ボタンやカードなど、内容が変わってもデザインが崩れない構造を作ることができます。
例
- ボタンの中の文字が長くなっても自動で幅が広がる
- テキスト数が増えてもカードの高さが調整される
- レスポンシブなリスト配置ができる
ステップ1：オートレイアウトを適用する
選択したフレームに対して
Shift＋A を押すと「Auto Layout」が追加されます。
右パネルで設定できる主な項目は以下の通り：
| 設定項目 | 説明 |
|---|---|
| Direction | 横並び or 縦並び |
| Spacing | 要素間の距離 |
| Padding | 内側の余白（上下左右） |
| Alignment | 整列位置 |
| Resizing | コンテンツに応じたサイズ変化 |
ステップ2：テキストに合わせて自動伸縮
ボタン内のテキストが長くなっても、
「Resizing」を Hug contents に設定しておけば自動で幅が伸びます。
Hug contents = コンテンツに合わせてサイズを調整
Fixed width = 固定幅
Fill container = 親要素に合わせて伸縮
これらを組み合わせることで、柔軟で壊れにくいUIが作れます。
コンポーネント × オートレイアウトの黄金コンビ
▶ 例：ボタンを作る場合
- フレーム内にテキストを入れる
- Shift＋Aでオートレイアウト化
- 背景色・角丸・パディングを設定
- 右クリック → Create Component
これで「中の文字を変えても崩れないボタン」が完成します。
▶ 例：カードを作る場合
- 画像＋タイトル＋説明文を縦に配置
- Shift＋Aでオートレイアウトを適用（縦方向）
- Gapを24pxなどに統一
- 背景を付けてComponent化
さらに、複数のカードを並べたい場合は
親要素に「Auto Layout（横方向）」を設定すれば、整列が自動化されます。
実務で役立つ使い方：デザインシステムの基礎
コンポーネントとオートレイアウトを組み合わせると、
デザインシステムをFigma内で構築できます。
メリット
- ボタン・フォーム・カードなどの統一ルールを管理
- ページ間でデザインの一貫性を保てる
- 修正が一括反映されるので保守コストが激減
具体例
| コンポーネント名 | 説明 |
|---|---|
| Button / Primary | メインボタン |
| Button / Secondary | サブボタン |
| Input / TextField | 入力フォーム |
| Card / Product | 商品カード |
| Navigation / Header | グローバルナビ |
これらを Assetsパネル からドラッグ＆ドロップで呼び出すことで、
チーム全体のUI整合性が維持できます。
中級者にありがちなミスと回避法
| ミス | 原因 | 対策 |
|---|---|---|
| コンポーネントが増えすぎる | ネーミングルールが曖昧 | 「Button / Primary」など階層名で整理 |
| Auto Layoutが崩れる | 親子レイヤー構造が複雑 | 1フレーム＝1役割を意識 |
| サイズ調整が面倒 | Resizing設定の不統一 | Hug / Fill / Fixedを明確に分ける |
Figmaでは構造が整理されているほど、修正が速く、他人も理解しやすくなります。
“整える力”が中級者の証です。
練習方法：小さなパーツから構築する
練習課題例
- 「ボタン」「フォーム」「カード」をそれぞれコンポーネント化
- Variantを使って状態（Hover, Active）を追加
- Auto Layoutでレスポンシブ対応を試す
おすすめ練習テーマ
- ボタン図鑑を作る（Primary / Secondary / Ghostなど）
- フォームレイアウトを再現する（入力欄・ラベル・ボタン）
- カードUIを設計する（画像＋テキストの組み合わせ）
少しずつ「構造を考える癖」をつけると、
デザインの再現性とスピードがどんどん上がります。
まとめ：中級者は“再利用できるデザイン”を作る
初心者が要素を「配置する人」だとしたら、
中級者はそれを「仕組み化する人」です。
- コンポーネントで「統一性」を作り
- オートレイアウトで「柔軟性」を保ち
- VariantやStyleで「再利用性」を高める
これこそが、Figma中級者に求められるスキルです。
“きれいに見せる”ではなく、“整って動くデザイン”を作る。
それがFigmaで学ぶ次のステージです。
#Figma #Figma中級者 #UIデザイン #Webデザイン #UXデザイン #オートレイアウト #コンポーネント #Figma使い方 #Figma学習 #デザイン勉強 #デザインシステム
Figmaでレスポンシブデザインを作る！デバイス別レイアウト設計
11月 9, 2025Figma × Tailwind CSS 連携で学ぶ：デザインからコーディングまでの流れ
11月 7, 2025デザインシステムの作り方：Figmaで管理するブランド統一
11月 6, 2025