Skip to main content
手動で設定したくない場合は、このページのリンクをDevinセッションに貼り付けて、すべての設定を行うよう依頼してください。
1

Figma MCP を接続する

Devin がデザインを読み取れるようにするには、まず利用したいファイルにアクセスできるアカウントで Figma MCP を接続してください。
  1. Devin で Customize > MCPs を開き、Browse marketplace を選択して Figma を見つけます。
  2. インストールの案内に従い、その後 Customize > MCPs で接続設定を開きます。
  3. 個人アカウントで利用する場合は Personal アクセスを、1 つの接続を組織で共有する場合は Organization アクセスを選択します。
  4. Connect を選択し、Figma の OAuth flow でアクセスを承認します。
Organization アクセスの場合は、チームのデザインファイルにアクセスできる専用の Figma アカウントを利用してください。Personal アクセスでは、各メンバーが自分のアカウントを接続します。
接続後は、接続したアカウントがアクセスできるリンク済みの Figma ファイルを Devin が読み取り、コンポーネント階層、カラー、余白、タイポグラフィ、レイアウト制約などをデザインから直接抽出できるようになります。
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 を作成する — コード変更とあわせて視覚的な証拠を添えて、実装を提出します
4

Devin Review で PR をレビューする

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