[エンジニア向け]Figmaコンポーネント作成の基礎

はじめに：なぜエンジニアがFigmaを学ぶのか

「Figmaはデザイナーのツールでしょ？」

そう思っているエンジニアは多い。しかし、AI駆動開発の時代において、その認識は変わりつつある。

Figma → コードの現状

Figma MCPやCode Connectなど、Figmaからコードを生成するツールが急速に発展している。しかし、現実には：

• Webアプリ向け：比較的うまくいく（Figma自体がWeb標準を参考に設計されているため）
• モバイルアプリ向け：まだ課題が多い（生成されるコードは「見た目だけ再現した低品質なもの」になりがち）

エンジニアがFigmaを学ぶ理由

AIツールの精度を上げるには、変換ツール側ではなく、Figma側の設計を正しくする必要がある。

つまり：

• ❌ 悪いFigma設計 → AIツール → 低品質なコード → 手動で書き直し
• ✅ 良いFigma設計 → AIツール → 高品質なコード → そのまま使える

エンジニアがFigmaを理解することで：

1. デザイナーに正しい設計をリクエストできる
2. 自分でコンポーネントを作成・修正できる
3. AI駆動開発の精度を根本から改善できる

本記事では、SwiftUI / Jetpack Compose エンジニア向けに、Figmaの基礎からコンポーネント作成までを解説する。

---

キーボードショートカット早見表

開発者はショートカットで効率が上がる。最低限これだけ覚えておこう。

操作	Mac	Windows
フレーム作成	F	F
テキスト作成	T	T
楕円作成	O	O
長方形作成	R	R
Auto Layout適用	Shift + A	Shift + A
コンポーネント化	Cmd + Option + K	Ctrl + Alt + K
アセットパネル	Shift + I	Shift + I
選択をフレームで囲む	Cmd + Option + G	Ctrl + Alt + G
複製	Cmd + D	Ctrl + D
グループ化	Cmd + G	Ctrl + G

---

基本概念1：Frame

FrameはViewコンテナ

FigmaのFrameは、SwiftUI/Composeのコンテナに相当する。

Figma	SwiftUI	Compose
Frame	View	Box / Surface
Rectangle	※コンテナではない	※コンテナではない
Group	※レイアウト機能なし	※レイアウト機能なし

重要：コンポーネントは必ずFrameで作成する。 RectangleやGroupではなく、Frameを使うこと。RectangleはただのシェイプでAuto Layoutを適用できない。

Frameの作成

1. Fキーを押す
2. キャンバス上でドラッグ、またはクリック
3. 右パネルでサイズ・色・角丸などを設定

F押下状態	ドラッグ済

---

基本概念2：Auto Layout

Auto Layout = Stack + Padding

Auto Layoutを適用すると、FrameがSwiftUIのStack、ComposeのColumn/Rowのように振る舞う。

Figma設定項目	説明	SwiftUI	Compose
Direction	縦↓ / 横→	VStack / HStack	Column / Row
Gap	子要素間のスペース	spacing:	Arrangement.spacedBy()
Padding	コンテナ内側の余白	.padding()	Modifier.padding()
Alignment	子要素の整列方法	alignment:	Alignment
Resizing	後述	後述	後述

Auto Layoutの適用方法

1. Frameを選択
2. Shift + Aを押す
3. 右パネルの「Auto layout」セクションで設定を調整

---

基本概念3：Resizing（Hug / Fill / Fixed）

Auto Layout内の子要素のサイズ挙動は3種類ある。

Figma	意味	SwiftUI相当
Hug	コンテンツに合わせて縮む	デフォルト動作
Fill	親コンテナいっぱいに広がる	.frame(maxWidth: .infinity)
Fixed	固定サイズ	.frame(width: 100)

設定方法

1. Auto Layout内の子要素を選択
2. 右パネル → Layout → Resizing
3. 幅・高さそれぞれで Hug / Fill / Fixed を選択

重要：タップ領域の考慮

TextFieldの入力部分を考えてみよう。

Hugの場合（問題あり）：

┌─────────────────────────────┐
│ Label                       │
│ [Input]                     │  ← テキスト幅だけがタップ領域
│                             │
└─────────────────────────────┘

Fillの場合（正しい）：

┌─────────────────────────────┐
│ Label                       │
│ [Input.....................]│  ← 全幅がタップ領域
│                             │
└─────────────────────────────┘

Figmaでは見た目が同じでも、実装時のタップ領域が異なる。インタラクティブな要素は常にFillを検討すべき。

---

基本概念4：Variablesの適用

Figma Variablesを使って色やスペーシングを設定する方法。

Variablesの設計方法については、前回の記事「AI駆動開発にやさしいFigmaの研究：Variables作成の編」を参照。本記事ではVariablesが既に設定済みである前提で進める。

色の適用

1. Frameまたはテキストを選択
2. 右パネルの「Fill」セクションで色をクリック
3. ⬡（六角形）アイコンをクリック
4. 変数を選択（例：color/primary）

Paddingの適用

1. Auto Layout適用済みのFrameを選択
2. 右パネルの「Padding」の数値をクリック
3. ⬡アイコンをクリック
4. 変数を選択（例：spacing/md）

Figmaの注意点： 変数がバインドされている場合、数値が角丸の枠で表示される。ただし、UIの表示は項目によって異なり、統一されていない部分がある。

テキストカラーについて

Figmaに「テキストカラー」という専用の設定はない。テキストの色はFillで設定する。

1. テキストレイヤーを選択
2. 右パネルの「Fill」セクション
3. ⬡アイコン → 変数を選択（例：color/on-primary）

---

実践1：Buttonコンポーネントの作成

Step 1: Frameの作成

1. FキーでFrameを作成
2. レイヤー名を「Button」に変更

Step 2: 色と角丸の設定

1. Fill → ⬡ → color/primaryを選択
2. Corner radius → 8を入力

Step 3: テキストの追加

1. Tキーでテキストを作成し、Frame内に配置
2. 「Button」と入力
3. テキストを選択し、Fill → ⬡ → color/on-primary

Step 4: Auto Layoutの適用

1. Frameを選択
2. Shift + AでAuto Layout適用
3. 設定：
   • Horizontal padding: 16（またはspacing/lg）
   • Vertical padding: 8（またはspacing/sm）
   • Alignment: Center（中央揃え）

Step 5: コンポーネント化

1. Frameを選択
2. Cmd + Option + K（Mac）または Ctrl + Alt + K（Windows）

紫色の◇アイコンが表示されれば成功。これでButtonコンポーネントの基本形が完成。

---

実践2：Variantの作成

Variantとは

Variantは、1つのコンポーネントのバリエーションを定義する機能。ボタンの「Default / Pressed / Disabled」状態などを表現できる。

Variantの追加方法

1. コンポーネントを選択
2. 右クリック → Add variant
3. Component Set（紫の破線枠）が作成される
4. 2つ目のバリアントが追加される

プロパティの設定

1. Component Set（紫の破線枠）を選択
2. 右パネルの「Properties」セクション
3. 「Property 1」をクリックして名前を変更（例：State）
4. 各バリアントを選択し、プロパティ値を設定（例：Default、Pressed）

Buttonの3状態を作る

1. Buttonコンポーネントを選択
2. 右クリック → Add variant（2回実行して合計3つに）
3. プロパティ名をStateに変更
4. 各バリアントの値を設定：
   • 1つ目：Default
   • 2つ目：Pressed
   • 3つ目：Disabled

各Variantのスタイル設定

State	Fill	Text Color
Default	color/primary	color/on-primary
Pressed	color/primary-light	color/on-primary
Disabled	color/surface-dark	color/on-surface-secondary

各バリアントを選択し、FillとテキストのFillを変更する。

---

実践3：TextFieldコンポーネントの作成

構造

TextField (Frame + Auto Layout 縦方向)
├── Label (Text)
├── Input Text (Text)
└── Error Message (Text)

Step 1: Frameの作成

1. FキーでFrame作成
2. 名前を「TextField」に変更
3. Shift + AでAuto Layout適用
4. 設定：
   • Direction: Vertical（縦方向）
   • Gap: 4
   • Padding: 8
   • Width: 280（Fixed）
   • Fill: color/surface
   • Corner radius: 8
   • Stroke: color/surface-dark、1px

Step 2: テキストレイヤーの追加

Label:

1. Tキーでテキスト作成
2. 「Label」と入力
3. Font size: 12
4. Fill: color/on-surface-secondary

Input Text:

1. Tキーでテキスト作成
2. 「Input Text」と入力
3. Font size: 16
4. Fill: color/on-background
5. Resizing: Fill（重要！タップ領域のため）

Error Message:

1. Tキーでテキスト作成
2. 「Error Message」と入力
3. Font size: 12
4. Fill: color/error

Step 3: コンポーネント化とVariant

1. Cmd + Option + Kでコンポーネント化
2. Variantを追加して5状態を作成：

State	Stroke	Stroke Width	Input Text Color
Default	color/surface-dark	1px	color/on-surface-secondary
Focused	color/primary	2px	color/on-background
Filled	color/surface-dark	1px	color/on-background
Error	color/error	1px	color/on-background
Disabled	color/surface-dark	1px	color/on-surface-secondary、Opacity 50%

Step 4: Boolean Propertyの追加

エラーメッセージの表示/非表示を制御するBoolean Propertyを追加する。

1. Error Messageテキストレイヤーを選択
2. 右パネルのレイヤー表示アイコン（👁）の横にある⬡をクリック
3. 「Create Boolean property」を選択
4. 名前をshowErrorに設定

これにより、どのStateでもエラーメッセージの表示/非表示を制御できる。

---

実践4：Switchコンポーネントの作成

構造

Switch (Frame 52×44, 透明) ← タップ領域
└── Track (Frame 52×32, 色付き) ← 見た目
    └── Thumb (Oval 24×24)

なぜ2層構造？ Switchの見た目は32px高だが、モバイルの最小タップ領域は44pt/48dp。透明な外側Frameでタップ領域を確保し、内側Trackで見た目を表現する。

Step 1: Trackの作成

1. FキーでFrame作成
2. 名前を「Track」に変更
3. サイズ: 52 × 32
4. Fill: color/surface-dark
5. Corner radius: 16（完全な丸）

Step 2: Thumbの追加

1. Oキーで楕円作成
2. サイズ: 24 × 24
3. Fill: color/background
4. Track内に配置

Step 3: TrackにAuto Layout適用

1. Trackを選択
2. Shift + A
3. 設定：
   • Padding: 4
   • Alignment: Left（左寄せ）

Step 4: 外側Frameで包む

1. Trackを選択
2. Cmd + Option + Gで新しいFrameで囲む
3. 外側Frameの設定：
   • 名前: 「Switch」
   • サイズ: 52 × 44
   • Fill: なし（削除）
   • Auto Layout適用、Alignment: Center

Step 5: コンポーネント化とVariant

1. Switchを選択してCmd + Option + K
2. Variantを追加して2状態を作成：

State	Track Fill	Thumb Alignment
Off	color/surface-dark	Left
On	color/primary	Right

Alignmentを変更するには：

1. 各バリアントのTrackを選択
2. Auto LayoutのAlignment設定で左/右を切り替え

---

完成したコンポーネント構成

Components/
├── ◇ PrimaryButton
│     ├── State: Default
│     ├── State: Pressed
│     └── State: Disabled
│
├── ◇ SecondaryButton
│     ├── State: Default
│     ├── State: Pressed
│     └── State: Disabled
│
├── ◇ TextField
│     ├── State: Default    ─┐
│     ├── State: Focused     │
│     ├── State: Filled      ├── + showError (Boolean)
│     ├── State: Error       │
│     └── State: Disabled   ─┘
│
└── ◇ Switch
      ├── State: Off
      └── State: On

なぜPrimaryButtonとSecondaryButtonを分けるのか？

この判断基準については、次回の記事「AI駆動開発のためのFigmaコンポーネント設計」で詳しく解説する。キーワードは「ランタイムで変化するか否か」。

---

コンポーネントの動作確認

作成したコンポーネントが正しく動作するか確認しよう。

1. 別のページ（例：Foundations）に移動
2. Shift + Iでアセットパネルを開く
3. 作成したコンポーネントをドラッグ＆ドロップ
4. インスタンスを選択し、右パネルでプロパティを変更
   • State を切り替えてみる
   • showError を切り替えてみる

各状態が正しく切り替わればOK。

State = Default , showError = false	State = Error, showError = true

---

まとめ

概念	ポイント
Frame	コンポーネントは必ずFrameで作成
Auto Layout	Stack + Padding、子要素の配置を制御
Resizing	Hug/Fill/Fixed、タップ領域を意識
Variables	⬡アイコンから適用、ハードコード避ける
Component	Cmd + Option + Kで作成
Variant	状態の違いを表現、右クリック→Add variant
Boolean Property	表示/非表示の制御

---

参考資料

• Figma Auto Layout公式ドキュメント
• Figma Variants公式ドキュメント
• AI駆動開発にやさしいFigmaの研究：Variables作成の編