📖

Figma MCPのget_design_contextの仕様

に公開
Figma
React
Tailwind CSS
Model Context Protocol
tech

関連記事

get_metadataの仕様についてはこちらの記事にまとめています。
https://zenn.dev/yuichiroharai/articles/60884cd1f1100d

デザインコンテキストとは？

  • MCPツールのget_design_contextによって取得できる
  • JSX形式のコード
    • React+Tailwind CSS
  • デザインを実装するために必要なスタイル情報がすべて含まれる

データの取得

LLMを経由せずに直接ファイルに保存するCLIツールを作りました。
これを使えばどんなデータが返ってきているか確実に確認できます。
https://zenn.dev/yuichiroharai/articles/839bb8d1307280

MCPツールの引数

重要な引数

  • nodeId: string
    • FigmaデザインのノードID
      • デスクトップアプリ上でレイヤーを選択して取得したURLにも含まれています
    • 省略時はデスクトップアプリ上で現在選択されているノード
  • forceCode: boolean
    • JSXコードを強制的に返すかどうか
    • デフォルトはfalse
    • falseだと、情報量が多すぎる場合にget_metadataと同じ「メタデータ」を返す
  • dirForAssetWrites: string
    • デスクトップアプリのMCP設定で画像のソースをダウンロードにしている時に必須
      • 指定がないとJSXコードを取得できないので注意
      • 画像のソースがローカルサーバーの場合は必要ない
    • 画像ファイルのパスを絶対パスで指定する

ログ収集用

  • clientLanguages: string
    • 使用言語
  • clientFrameworks: string
    • 使用フレームワーク

使用言語やフレームワークを変えたからといって、出力される結果が変わることはないようです。
ユーザーの利用状況を把握して開発の優先順位を決める目的と思われます。

用途不明

  • artifactType: string
    • 出力される成果物の種類
      • WEB_PAGE_OR_APP_SCREEN
      • COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN
      • REUSABLE_COMPONENT
      • DESIGN_SYSTEM
  • taskType: string
    • 実行したいタスクの種類
      • CREATE_ARTIFACT
      • CHANGE_ARTIFACT
      • DELETE_ARTIFACT

こちらも、出力される結果が変わることはないようです。
将来的には結果に影響が出るかもしれないです。

MCPツールの戻り値

取得に使ったデザイン

シンプルなグロナビを例にします。

JSXコード

import { imgArrow } from "./svg-80g63";

export default function Navigation() {
  return (
    <div className="bg-white box-border content-stretch flex gap-[30px] items-center p-[50px] relative size-full" data-name="Navigation" data-node-id="13:76">
      <div className="content-stretch flex font-['Noto_Sans_JP:Medium',sans-serif] font-medium gap-[30px] items-start leading-[23px] relative shrink-0 text-[16px] text-[color:var(--custom-black,#212529)] text-nowrap whitespace-pre" data-name="Text" data-node-id="13:28">
        <p className="relative shrink-0" data-node-id="13:55">トップ</p>
        <p className="relative shrink-0" data-node-id="13:56">製品情報</p>
        <p className="relative shrink-0" data-node-id="13:57">私たちについて</p>
        <p className="relative shrink-0" data-node-id="13:58">お知らせ</p>
      </div>
      <div className="bg-gradient-to-b box-border content-stretch flex from-[var(--primary-light,#4f9cf9)] gap-[10px] items-center justify-center px-[25px] py-[15px] relative rounded-[10px] shrink-0 to-[var(--primary,#043873)]" data-name="Button" data-node-id="13:60">
        <p className="font-['Noto_Sans_JP:Medium',sans-serif] font-medium leading-[normal] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[-0.32px] whitespace-pre" data-node-id="13:61">
          お問い合わせ
        </p>
        <div className="relative shrink-0 size-[10px]" data-name="Arrow" data-node-id="13:62">
          <div className="absolute inset-[-5%]">
            <img alt="" className="block max-w-none size-full" src={imgArrow} />
          </div>
        </div>
      </div>
    </div>
  );
}

デザインを再現するのに必要なTailwind CSSのスタイルが含まれています。

冗長なスタイル指定が多く含まれてはいますが、デザインデータの再現性はかなり高いと思います。

変数

変数が使われている箇所は、text-[color:var(--custom-black,#212529)]のように変数だけでなく実際の値も含まれているため、変数宣言がなくてもスタイルが当たるようにはなっています。

コンポーネント

調査中

追加のAI向けメッセージ

JSXコードの本体に続いて、AI向けのメッセージも返ってきます。
AIはこのメッセージに書かれた指示に従って行動します。

メッセージ全文
SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.

Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
These styles are contained in the design: primary-gradation: .
Image assets are stored on a localhost server. Clients can use these images directly in code as a way to view the image assets the same way they would other remote servers. Images and SVGs will be stored as constants, e.g. const image = 'http://localhost:3845/assets/10c13ac1a228a365cb98a0064b1d5afbc84887b2.png' These constants will be used in the code as the source for the image, e.g. <img src={image} /> This is true for both images and SVGs, so you can use the same approach for both types of assets.
IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.

長いメッセージですが、特に重要なのは以下だと思います。

  • React+Tailwindのコードを返すけど、プロジェクト構成に沿った実装をすること
    • ユーザーの指示がない限り、Tailwindをインストールしないこと
  • get_screenshotでスクリーンショットを取得すること
  • 使っている変数を列挙

メタデータを返した場合

メタデータを返した場合はメッセージが変わります。

メッセージ全文
IMPORTANT: The design was too large to fit into context with get_design_context. Instead you have received a sparse metadata response, you MUST call get_design_context on the IDs of the sublayers to get the full code. Split up the calls to ensure the sublayers do not also exceed the context limit.
  • デザインが大きすぎたのでメタデータを返したこと
  • メタデータに含まれるサブレイヤーのIDを使用し、分割してget_design_contextを呼び出すこと

などが含まれています。

dirForAssetWritesを指定していない場合のエラー

画像のソースをダウンロードに設定している場合にdirForAssetWritesが指定されていないとエラーが返ります。

メッセージ全文
Path for asset writes as tool argument is required for write-to-disk option

Discussion