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

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

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

Figma → コードの現状

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

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

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

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

つまり：

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

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

デザイナーに正しい設計をリクエストできる
自分でコンポーネントを作成・修正できる
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の作成

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

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の適用方法

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

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

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

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

設定方法

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

重要：タップ領域の考慮

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

Hugの場合（問題あり）：

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

Fillの場合（正しい）：

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

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

基本概念4：Variablesの適用

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

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

色の適用

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

Paddingの適用

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

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

テキストカラーについて

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

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

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

Step 1: Frameの作成

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

Step 2: 色と角丸の設定

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

Step 3: テキストの追加

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

Step 4: Auto Layoutの適用

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

Step 5: コンポーネント化

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

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

実践2：Variantの作成

Variantとは

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

Variantの追加方法

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

プロパティの設定

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

Buttonの3状態を作る

Buttonコンポーネントを選択
右クリック → Add variant（2回実行して合計3つに）
プロパティ名をStateに変更
各バリアントの値を設定：
- 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の作成

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

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

Label:

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

Input Text:

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

Error Message:

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

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

Cmd + Option + Kでコンポーネント化
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を追加する。

Error Messageテキストレイヤーを選択
右パネルのレイヤー表示アイコン（👁）の横にある⬡をクリック
「Create Boolean property」を選択
名前を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の作成

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

Step 2: Thumbの追加

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

Step 3: TrackにAuto Layout適用

Trackを選択
Shift + A
設定：
- Padding: 4
- Alignment: Left（左寄せ）

Step 4: 外側Frameで包む

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

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

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

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

Alignmentを変更するには：

各バリアントのTrackを選択
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コンポーネント設計」で詳しく解説する。キーワードは「ランタイムで変化するか否か」。

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

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

別のページ（例：Foundations）に移動
Shift + Iでアセットパネルを開く
作成したコンポーネントをドラッグ＆ドロップ
インスタンスを選択し、右パネルでプロパティを変更
- 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	表示/非表示の制御

参考資料