> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma デザインをピクセルパーフェクトなコードに

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Figma からピクセルパーフェクトなコードへ" description="Figma MCP を接続し、Devin にデザイントークンの抽出、コンポーネントの構築、そしてモックアップと結果を視覚的に検証させます。" prompt="次の Figma ファイルから料金ページを実装してください: https://figma.com/file/abc123/Pricing-Page。'Marketing' ページの 'Pricing Section' フレームに注目してください。そこには見出し＋サブ見出しのブロック、機能一覧付きの 3 つの料金プランカード (Free, Pro, Enterprise)、カードの下には比較表があり、モバイルレイアウトではカードが縦方向に積み重なり、テーブルがスクロール可能になります。色と余白には tailwind.config.ts 内の当社の Tailwind config を使用してください。src/components/ui/ にある既存の Card と Button コンポーネントを再利用してください。ページは src/app/pricing/page.tsx に新しいルートとして作成してください。実装後、dev サーバーを起動し、デスクトップ (1440px)、タブレット (768px)、モバイル (375px) の各ビューポートでページ全体のスクリーンショットを撮ってください。ページをスクロールし、ホバー状態でのインタラクションも含めて画面録画を行ってください。セッション内でそのスクリーンショットと録画を私に共有してください。レビュアーがビジュアル結果を確認できるよう、それらを PR に添付してください。実装が Figma デザインと一致するまで PR を作成しないでください。" category="機能開発" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>手動で設定しますか？このページのリンクをDevinセッションに貼り付け、すべての設定を行うよう依頼してください。</Tip>

  <Steps>
    <Step title="Figma MCP を接続する">
      Devin がデザインを読み取れるようにするには、まず [Figma MCP](/ja/work-with-devin/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 > Connections > MCP servers** に移動し、**Figma** を見つけて **Enable** をクリックします
      6. 指示に従ってトークンを貼り付けます

      <Tip>
        Devin 専用の Figma アカウント (例: `devin@yourcompany.com`) を作成し、デザインファイルへの閲覧権限を付与することを検討してください。これにより MCP を個人アカウントに紐づけずに済み、チームが拡大してもアクセス管理を容易に行えます。
      </Tip>

      接続後は、Devin がリンクされた任意の Figma ファイルを読み取り、コンポーネント階層、カラー、余白、タイポグラフィ、レイアウト制約などをデザインから直接抽出できるようになります。
    </Step>

    <Step title="デザインリンクを共有し、Devin にプロンプトを送信する">
      実装してほしい内容と一緒に、Figma ファイルの URL をプロンプトに貼り付けてください。どのフレームを実装するか、コードベースのどの部分を使うかを具体的に指定してください。

      <PromptBlock>
        ```txt Implement pricing page from Figma theme={null}
        Implement the pricing page from this Figma file:
        https://figma.com/file/abc123/Pricing-Page

        Focus on the "Pricing Section" frame on the "Marketing" page. It has:
        - A heading + subheading block
        - 3 pricing tier cards (Free, Pro, Enterprise) with feature lists
        - A comparison table below the cards
        - Mobile layout: cards stack vertically, table becomes scrollable

        Use our Tailwind config in tailwind.config.ts for colors and spacing.
        Reuse the existing Card and Button components from src/components/ui/.
        The page should be a new route at src/app/pricing/page.tsx.

        After implementing, spin up the dev server and verify the result:
        - Take full-page screenshots at desktop (1440px), tablet (768px),
          and mobile (375px) viewports
        - Record a screen recording scrolling through the page and
          interacting with hover states
        - Share the screenshots and recording with me in the session
        - Attach them to the PR so reviewers can see the visual result
        - Do not open the PR until the implementation matches the Figma design
        ```
      </PromptBlock>

      **良い Figma プロンプトのポイント:**

      * プロジェクト全体ではなく、特定の Figma ファイルへのリンクを共有する
      * ファイル内の正確なフレーム名またはページ名を指定する — 大きなファイルには何十ものページがあることがあります
      * 既存のコンポーネントライブラリと CSS フレームワークを参照する
      * デザイントークンの配置場所を伝える (例: `tailwind.config.ts`, `src/tokens/`)
      * 新しいコンポーネントのターゲットファイルパスを指定する

      もしセッションをまたいで同じコンテキスト (例: 「すべての新しいページは `src/app/` に置く」や「Radix UI プリミティブを使う」など) を繰り返し伝えていると感じたら、その旨を Devin にフィードバックしてください。Devin は自動的に、それを [Knowledge](/ja/product-guides/knowledge) として保存することを提案するようになり、次回から同じことを繰り返し説明しなくて済むようになります。
    </Step>

    <Step title="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
      ```
    </Step>

    <Step title="Devin Review で PR をレビューする">
      Devin が PR を作成したら、実装をレビューするために [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) を使ってください。Devin Review は、ビジュアルの不一致、レスポンシブ対応のブレークポイントの不足、デザインシステムに従っていないコンポーネントなどを検出できます。

      調整が必要な点があれば (余白が不自然、ホバー状態がない、色が合っていない など) 、PR 上に直接コメントを残せば Devin が対応します。新しいセッションを開いたり、別途プロンプトを書く必要はありません。
    </Step>
  </Steps>
</div>