Skip to main content

Figma からピクセルパーフェクトなコードへ

Figma MCP を接続し、Devin にデザイントークンの抽出、コンポーネントの構築、そしてモックアップと結果を視覚的に検証させます。
AuthorCognition
Category機能開発
FeaturesMCP
1

Figma MCP を接続する

Devin がデザインを読み取れるようにするには、まず Figma MCP を通じて Figma ファイルへのアクセス権を付与する必要があります。接続が完了すると、MCP は組織内の全員が利用できるようになり、どのチームメンバーも Devin のセッション内で Figma ファイルをリンクできます。
  1. Figma で profile icon > Settings > Security をクリックします
  2. Personal access tokens の下で Generate new token をクリックします
  3. File content と Dev resources に対して少なくとも read 権限を付与します
  4. トークンをコピーします
  5. Devin で Settings > MCP Marketplace に移動し、Figma を見つけて Enable をクリックします
  6. 指示に従ってトークンを貼り付けます
Devin 専用の Figma アカウント（例: devin@yourcompany.com）を作成し、デザインファイルへの閲覧権限を付与することを検討してください。これにより MCP を個人アカウントに紐づけずに済み、チームが拡大してもアクセス管理を容易に行えます。
接続後は、Devin がリンクされた任意の Figma ファイルを読み取り、コンポーネント階層、カラー、余白、タイポグラフィ、レイアウト制約などをデザインから直接抽出できるようになります。
2

デザインリンクを共有し、Devin にプロンプトを送信する

実装してほしい内容と一緒に、Figma ファイルの URL をプロンプトに貼り付けてください。どのフレームを実装するか、コードベースのどの部分を使うかを具体的に指定してください。良い Figma プロンプトのポイント:
  • プロジェクト全体ではなく、特定の Figma ファイルへのリンクを共有する
  • ファイル内の正確なフレーム名またはページ名を指定する — 大きなファイルには何十ものページがあることがあります
  • 既存のコンポーネントライブラリと CSS フレームワークを参照する
  • デザイントークンの配置場所を伝える（例: tailwind.config.ts, src/tokens/）
  • 新しいコンポーネントのターゲットファイルパスを指定する
もしセッションをまたいで同じコンテキスト（例: 「すべての新しいページは src/app/ に置く」や「Radix UI プリミティブを使う」など）を繰り返し伝えていると感じたら、その旨を Devin にフィードバックしてください。Devin は自動的に、それを Knowledge として保存することを提案するようになり、次回から同じことを繰り返し説明しなくて済むようになります。
3

Devin は抽出、構築、検証を行います

Devin は MCP 経由で Figma ファイルを読み取り、デザインのプロパティをあなたのコードベースにマッピングし、コンポーネントを実装してから、ブラウザを開いて結果を目視で確認します。
  1. Figma ファイルを読む — 指定されたフレームから、コンポーネントツリー、デザイントークン（#6366F1 のような色、24px のような余白）、タイポグラフィ（Inter, 18px/28px, 500 weight）、およびオートレイアウトのプロパティを取得します
  2. トークンをあなたのシステムにマッピングする — Figma の色を、最も近い Tailwind のトークン（例: #6366F1 → indigo-500）に対応付け、ピクセル値をハードコードする代わりに、あなたのスペーシングスケールを使用します
  3. コンポーネントを構築する — 既存のパターンに従った React コンポーネントを作成し、デザインが一致する箇所では <Card> や <Button> のような共有コンポーネントを再利用します
  4. ブラウザで確認する — 開発サーバーを起動し、localhost:3000/pricing に移動して、複数のビューポートで Figma デザインと結果を目視で比較します
  5. スクリーンショットと画面録画を取得する — Devin はデスクトップ、タブレット、モバイルの各ブレークポイントでページ全体のスクリーンショットを撮影し、ページをスクロールしながらホバー状態とのインタラクションも含めたスクリーンレコーディングを行います。これらはセッション内で直接共有されるため、ブランチをチェックアウトして自分で実行することなく、結果を視覚的に検証できます。
  6. あらゆる場所で証拠を共有する — Devin はスクリーンショットと録画を PR に添付するため、レビュー担当者はコードをチェックアウトせずに視覚的な結果を確認できます。Slack を連携している場合は、Devin がチャンネルに投稿し、デザインチームは Slack から離れることなくレビューできます。
  7. PR を作成する — コード変更とあわせて視覚的な証拠を添えて、実装を提出します
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

Devin Review で PR をレビューする

Devin が PR を作成したら、実装をレビューするために Devin Review を使ってください。Devin Review は、ビジュアルの不一致、レスポンシブ対応のブレークポイントの不足、デザインシステムに従っていないコンポーネントなどを検出できます。調整が必要な点があれば（余白が不自然、ホバー状態がない、色が合っていない など）、PR 上に直接コメントを残せば Devin が対応します。新しいセッションを開いたり、別途プロンプトを書く必要はありません。