Figma MCP × Claude Codeで、実装はどこまで自動化できるか

はじめに

こんにちは。
普段SwiftUIでアプリ開発をしており、最近ではコードの修正やレビューの際にClaude Codeを活用する機会が増えてきました。

そこで思いついたのが、Figmaで作成した画面デザインをClaude Codeに読み込ませれば、開発の工数削減につながるのではないかということです。本記事では、Figmaのデザインがどこまで正確に再現されるのか、そしてSwiftUIのようなMVCモデルでも問題なく機能するのかという点を検証した結果をまとめてみました。

1. 検証環境と前提

今回は Framelink（Figma-Context-MCP） を使いました。

Framelink を選んだ理由は次のとおりです。

• 出力先の自由度が高いこと
  Framelink は、特定フレームワーク向けの固定コードを返すというより、Figma の構造情報を JSON として渡す形式です。
  そのため、プロンプト次第で SwiftUI のような iOS 向け実装にも寄せやすいと考えました。

• 繰り返し検証しやすいこと
  Figma 公式のリモート MCP はプランによって回数に制限があります。
  一方で Framelink は Figma REST API ベースなので、複数画面を何度も試したい今回の用途と相性が良いと感じました。

項目	内容
MCP	Framelink（figma-developer-mcp）
AIクライアント	Claude Code 2.1.215
出力スタック	Swift / SwiftUI
対象OS	iOS 17 以降
設計方針	MVC

2. 検証に使ったデザイン

デザインは Gemini の canvas で作成したものを Figma に読み込み、そこから使用しました。

ここで重要な点として、Figma 上でレイヤーがきちんと分解されていることです。
1枚の画像として貼られているだけだと、MCP 経由で渡せる情報はかなり少なくなります。

Figmaのレイヤー構造
今回のデザインは、以下のような階層構造になっています。

作成した画面一覧
イベント管理アプリの4つの画面を検証対象として作成しました。
ログイン画面、ホーム画面、一覧画面、詳細画面の構成になっています。

3. セットアップ手順

3-1. Figma Personal Access Tokenを発行する

Figmaの設定画面から Personal Access Token を生成します。手順は以下の通りです。

Figma Dashboard → Settings → Security → Personal access tokens → Generate new token

スコープは、今回の用途では File content（file:read） のみで十分です。
トークンは発行直後の1回だけ表示されるため、必ず控えておきましょう。

3-2. FramelinkをClaude Codeに登録する

以下のコマンドでFramelinkをMCP として登録します。

claude mcp add -s user figma-context -e FIGMA_API_KEY=<あなたのトークン> -- npx -y figma-developer-mcp --stdio

<あなたのトークン>の部分に、先ほど控えたPersonal Access Tokenを貼り付けて実行してください。

3-3. 登録を確認する

登録が正常に完了したか確認します。

claude mcp list

これを実行すると、figma-context: ... ✓ Connectedのように表示されれば登録完了です。
念のため、Claude Code側でも/mcpコマンドで認識されていることを確認しておくといいと思います。

3-4. 対象フレームのリンクを取得する

Figmaで対象フレームを選択し、右クリックメニューから「選択範囲へのリンクをコピー」を選択します。

重要なポイントとして、コピーされたURLの末尾にnode-idが含まれていることを確認してください。
この情報があることで、ファイル全体ではなく特定フレームだけを対象に処理できます。

4. ログイン画面

4-1. Claude Codeに渡したプロンプト

最初の検証では、以下のプロンプトをClaude Codeに入力しました。

このFigmaデザインをSwiftUIで実装してください。 [フレームリンク]

条件:
iOS 17以降
SwiftUIのみ、外部ライブラリなし
MVCで構成（View / Model / Controller を分ける）

出力されたファイルは以下のようになりました

EventSpaceApp
├ Controllers/ LoginController.swift
├ Extensions/ Color+Hex.swift
├ Models/ LoginCredentials.swift
├ Views/ LoginView.swift
└ EventSpaceApp.swift

しっかりとView だけでなく、Model / Controller / Extension まで分割された状態で生成されました。

4-2. Viewの再現度

ログイン画面レベルであればほぼ完璧に再現できていると思いました。
以下がFigmaで設計した画面とClaude Codeで生成したSwiftUIコンポーネントの比較です。

Figmaのデザイン	Claude Codeで生成したSwiftUI

実際にコードへ反映されていた要素と数値を具体的に比較すると、以下のようになります。

ログイン画面の主要要素

• 入力フォーム（メール等）
  • Figma: padding: 14px 16px;, background: #F3F4F6;, border-radius: 12px;
  • SwiftUI: .padding(.horizontal, 16), .padding(.vertical, 14), .background(Color(hex: "#F3F4F6")), .clipShape(RoundedRectangle(cornerRadius: 12))
• ログインボタン
  • Figma: padding: 14px 0px;, background: #3B82F6;, border-radius: 12px;
  • SwiftUI: .padding(.vertical, 14), .background(Color(hex: "#3B82F6")), .clipShape(RoundedRectangle(cornerRadius: 12))
• パスワードお忘れ
  • Figma: padding: 32px 0px 0px;
  • SwiftUI: .padding(.top, 32)
• タイトル
  • Figma: padding: 0px 0px 48px;
  • SwiftUI: .padding(.bottom, 48), .padding(.top, 32)

検証の結果、入力フォームとログインボタンに関しては完全一致しており、上下左右の余白、背景色、角丸などの数値が完璧に再現されていました。

一方で、タイトル部分については完全に一致とはなりませんでした。 下方向の48pxはFigma通りでしたが、コード側にはAIが全体のレイアウトバランスを考慮して気を利かせたのか、元データにはない .padding(.top, 32) が自動で補完されていました。

生成コード全体をまとめると、次のような要素が適切に読み取られていました。

• カラー： ボタン色や背景色などの色情報（HEX値の完全一致）
• コーナー半径： 入力欄やボタンの角丸
• スペーシング： 要素間のspacing
• パディング： 入力欄やボタンの内側のpadding
• テキスト装飾： 見出しや本文のフォントサイズ・太さ

ログイン画面くらい簡単なViewであれば視覚的なレイアウト情報についてはかなり正確だと思います

4-3. View以外の部分はどこまで生成されたか

今回は View の再現度 がメインなので特にView以外の指示はしていませんでしたが、
View 以外にも雛形レベルのコードは生成されました。

LoginCredentials のような入力値を持つ Model や、LoginController のような状態管理用のクラスが用意されており、単に見た目の View だけを出力する形ではありませんでした。

また、中身を確認すると、

• メールアドレスとパスワードの入力値
• 簡易的なバリデーション
• ローディング状態
• エラーメッセージ表示を想定したプロパティ

といった、ログイン画面として自然な構造 がある程度補完されていました。

ログイン画面レベルでは、Figma から SwiftUI の土台を素早く作る用途としては使えると感じました。

5. ホーム画面

5-1. Claude Codeに渡したプロンプト

ログイン画面と同じプロンプトを渡しました

このFigmaデザインをSwiftUIで実装してください。 [フレームリンク]

条件:
iOS 17以降
SwiftUIのみ、外部ライブラリなし
MVCで構成（View / Model / Controller を分ける）

出力結果としては以下のようになりました

Figmaのデザイン	Claude Codeで生成したSwiftUI

5-2. Figmaの設計値とSwiftUIコードの全要素比較

ホーム画面について、実際にコードへ反映されていた要素と数値を具体的に比較すると、以下のようになります。

ヘッダー・検索エリア

• 画面全体 (背景)
  • Figma: background: #F2F2F7;
  • SwiftUI: Color(hex: "#F2F2F7"), .ignoresSafeArea()
• 日付テキスト (7月20日 月曜日)
  • Figma: font-weight: 500;, font-size: 14px;, color: #6B7280;
  • SwiftUI: .font(.system(size: 14, weight: .medium)), .foregroundColor(Color(hex: "#6B7280"))
• 通知ボタン
  • Figma: width: 32px; height: 32px;, background: #E5E7EB;, border-radius: 9999px;
  • SwiftUI: .frame(width: 32, height: 32), .background(Color(hex: "#E5E7EB")), .clipShape(Circle())
• 画面タイトル (ホーム)
  • Figma: font-weight: 700;, font-size: 30px;, color: #111827;
  • SwiftUI: .font(.system(size: 30, weight: .bold)), .foregroundColor(Color(hex: "#111827"))
• 検索バー
  • Figma: padding: 12px 16px;, background: #E5E7EB;, border-radius: 8px;
  • SwiftUI: .padding(.horizontal, 16), .padding(.vertical, 12), .background(...), .clipShape(RoundedRectangle(cornerRadius: 8))

イベントカードエリア

• セクション見出し (直近の参加予定)
  • Figma: font-weight: 700;, font-size: 18px;, color: #111827;
  • SwiftUI: .font(.system(size: 18, weight: .bold)), .foregroundColor(...)
• イベントカード (背景・外枠)
  • Figma: padding: 20px;, background: #FFFFFF;, border-radius: 16px;, box-shadow: 0px 1px 2px...
  • SwiftUI: .padding(20), .background(Color.white), .clipShape(RoundedRectangle(cornerRadius: 16)), .shadow(...)
• カード内テキスト (日付 / タイトル / 場所)
  • Figma: font-size や font-weight, color が各要素に設定
  • SwiftUI: .font(.system(size: X, weight: .Y)), .foregroundColor(...) として忠実に再現
• イベント作成ボタン
  • Figma: padding: 24px;, font-weight: 600;, font-size: 16px;
  • SwiftUI: .padding(.vertical, 24), .font(.system(size: 16, weight: .semibold))

タブバー

• タブバー全体
  • Figma: height: 64px;, gap: 152.16px;, border-top: 1px solid #E5E7EB;
  • SwiftUI: .frame(height: 64), HStack(spacing: 150), 上部のボーダーを Rectangle().frame(height: 1) で表現
• タブ項目 (アクティブ/非アクティブ)
  • Figma: font-weight: 500;, font-size: 12px;, 色: #3B82F6 / #9CA3AF
  • SwiftUI: .font(.system(size: 12, weight: .medium)), 三項演算子で色を切り替え

多くの要素でFigmaの設計値と完全に一致していて、一部の要素ではiOSアプリとしてより自然な形へAIが最適化してくれていることが分かりました。

完全に一致していた部分
テキストのスタイル（フォントサイズ、太さ、色）や、検索バー・ボタンなどのPadding、背景色などの基本的なスタイリングは、ほぼすべてFigmaの数値通りに出力されていました。
特に、10.5px や 11.8px といった小数点を含むフォントサイズを正確に拾い上げている点や、font-weight: 500 を .medium に、600 を .semibold に正しくマッピングできている点は優秀だと思います。

少し違っていた部分
単純な数値のコピーではなく、SwiftUIの実装として気が利いている部分もいくつか確認できました。

• セーフエリアの考慮: 画面全体の背景色に対して、Figmaにはない .ignoresSafeArea() が自動的に付与されていました。
• アイコンの自動補完と角丸の最適化: Figma上では「通知」というテキストデータと 9999px の角丸で構成されていたボタンが、AIの文脈理解によって Image(systemName: "bell")（SF Symbols）と .clipShape(Circle()) に置き換えられていました。
• 端数の丸め込み: タブバーの要素間の余白（gap）がFigma上では 152.16px と中途半端な数値になっていましたが、コード上では 150 というキリの良い数字に丸め込まれていました。
• 影（Drop Shadow）の翻訳: Figmaの box-shadow そのままではなく、SwiftUIの .shadow モディファイア（radius, x, y, opacity）の構造に正しく分解・翻訳されています。
• 状態変化のロジック化: タブバーのアイコン色について、単なる見た目の出力に留まらず、非アクティブ時とアクティブ時の色分けを三項演算子（controller.selectedTab == tab ? ...）で自動的にロジック化していました

AIが勝手に補完をしている部分があるので、その部分は人間が目視で確認していくしかないと思いますが、大体の機能の見た目は実装できていました

6. その他の画面（一覧・詳細）について

イベント一覧画面・イベント詳細画面についても同様の検証を行いました。
ログイン画面・ホーム画面と同じ傾向で、色・余白・角丸・フォントなどの
スタイル情報はほぼ忠実に再現されており、一覧画面では ScrollView +
ForEach へのマッピング、詳細画面では画像ヘッダーの配置なども
違和感なく実装されていました。

一方で、どのセルをタップしたときにどの詳細画面へ遷移するか、
といった画面遷移のロジックについては、ログイン・ホーム画面と同様に
自前で実装する必要がありました。

7. まとめ

デザインの再現度について
色・余白・角丸・フォントサイズといった視覚的なスタイル情報は、ログイン画面・ホーム画面・一覧/詳細画面のいずれにおいても、ほぼFigmaの数値通りにSwiftUIコードへ反映されていました。
一方で、iOSアプリとして成立させるために必要な部分（セーフエリアの考慮、テキストのSF Symbolsへの自動変換、padding値の自動補完など）は、Claude Codeが文脈から「良さそうな実装」を自身の判断で補ってくれることも分かりました

これは土台の作成として助かる場合もありますが、Figmaと完全一致させたい場合にはやはり人間による目視での確認が必要になると思います。

今回検証して感じたこと
Figma MCP × Claude Codeの組み合わせは、Viewの実装をかなりの精度で肩代わりしてくれるだけでなく、View以外の部分も指定すれば土台まで用意してくれるため、Figmaのデザインをコードに落とし込む際の初手としては実用的だと感じました。

ただ、「これを使えば劇的に開発が早くなる」かというと、正直そこまでではないかもしれないです。
意図通りのコードを出力させるには、そもそもFigma側でデザインをきっちり作り込んでおく必要があるからです。

それでも、「すでにFigma上に完成したデザインデータがある」という状況であれば、そこからUIをゼロから手打ちするよりは確実に少し早く実装を進められます。
最終的な調整やアプリ固有の実装は必須ですが、最初の面倒なUI構築を簡単に終わらせてくれるので、うまく活用していけそうです。