mcpField
F
Figma-Context-MCP-Skill

Figma-Context-MCP-Skill

github.com/howardtangovoデザイン・UI864 回インストール35 週間前に更新
リポジトリ

Figma-Context-MCP-Skill について

既存プロジェクトでFigmaデザインを実装するコーディングエージェント向けのスキルです。Figma-Context-MCPのデザインデータを基に、接続確認、アセット取得、既存規約への適合、見た目の検証まで進めます。

主な機能

  1. 01MCP接続の確認
  2. 02Figmaノードのコンテキスト取得
  3. 03参照アセットのダウンロード
  4. 04スタイルをプロジェクトトークンに対応
  5. 05ビジュアルの一致度を検証

活用シーン

  1. 01Figmaノードからページを実装
  2. 02実装用デザインアセットの取得
  3. 03Figmaスタイルを既存コンポーネントに適用

MCP 対応

設定済みで接続可能なFigma-Context-MCPサーバーが必要です。`get_figma_data`でデザインコンテキストを取得し、`download_figma_images`で参照アセットを取得します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/howardtangovo/figma-context-mcp-skill --skill figma-context-mcp-skill

インストール後、Claude Code で/figma-context-mcp-skillを入力して読み込まれたか確認します。

同梱ファイルREADME.mdagents/openai.yaml

詳細

デザインの実装（Context MCP）

概要

このスキルを使うと、データソースとして Figma-Context-MCP（figma-developer-mcp）を利用し、Figma のデザインを高い忠実度で実装できます。 MCP の出力をデザインの基準として扱い、プロジェクトの規約（コンポーネント、トークン、スタイリング、アーキテクチャ）に合わせて変換します。

前提条件

  • Figma-Context-MCP サーバーが現在のクライアントで設定され、接続可能であること
  • ユーザーから Figma の URL、または明示的な fileKey と nodeId が提供されていること
  • Figma の個人用アクセストークン（FIGMA_API_KEY）を利用できること
一般的な MCP サーバー設定（stdio）
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

必須のワークフロー

以下の手順を順番に実行します。

手順 1：MCP 接続の確認（必須）

実装を始める前に、get_figma_data を直接呼び出して MCP 接続を確認します。

利用可能な場合は、対象ノードを指定します。

get_figma_data(fileKey="<fileKey>", nodeId="<nodeId>")

成功条件：

  • ツールがノードデータ（メタデータ／レイアウト／スタイル）を返すこと（一部または途中で切り捨てられていても構いません）
  • MCP の通信／認証エラーが発生しないこと

失敗時の対応：

  • 呼び出しに失敗した場合は、実装を中止して正確なエラーを報告します
  • 「設定で有効になっている」場合でも、「現在のセッションでは接続されていない」ことがあると明示します
  • ユーザーに MCP のセッション／設定／トークンを修正してもらい、接続確認を再試行します
手順 2：Figma リンクの解析

URL から以下を抽出します。

  • fileKey：/design/ または /file/ の後に続く部分
  • nodeId：node-id クエリパラメーターの値

必要に応じて、nodeId を MCP が受け付ける形式に変換します。

  • URL では 1-2 の形式がよく使われます
  • ツールは 1:2 を受け付けます。また - もサポートしており、どちらも通常は有効です
手順 3：get_figma_data でノードコンテキストを取得

以下を呼び出します。

get_figma_data(fileKey="<fileKey>", nodeId="<nodeId>")

出力は以下に使用します。

  • レイアウト構造とオートレイアウトのルール
  • タイポグラフィとカラーのスタイル
  • コンポーネント階層とバリアント
  • アセット抽出用の画像／ベクターノード参照

ペイロードが大きすぎる場合：

  • 現在の結果から対象の子ノード ID を取得し、get_figma_data で子ノードを個別に取得します
  • ユーザーが探索範囲の制限を明示的に求めた場合にのみ depth を使用します
手順 4：download_figma_images でアセットをダウンロード

get_figma_data が画像／ベクター参照を返した場合は、以下を呼び出します。

download_figma_images(fileKey="<fileKey>", nodes=[...], localPath="<absolute-path>")

ルール：

  • Figma の出力に含まれるアセットのみを使用します
  • サードパーティのアイコンパックで置き換えないでください
  • localPath には絶対パスを使用します
  • 追跡可能性を保つため、エクスポートされたファイル名とサフィックスを維持します
手順 5：プロジェクトの規約に合わせて変換
  • Figma のスタイルを既存のデザイントークンに対応付けます
  • 生成された構造や生の構造を、プロジェクトのコンポーネントに置き換えます
  • フレームワークの慣用的な書き方（状態、ルーティング、データフロー、スタイリングシステム）を維持します
  • トークン／コンポーネントがある場合は、ハードコードされた定数を避けます
手順 6：1:1 の視覚的な忠実度を実現

Figma のノードデータと比率に照らして、以下を検証します。

  • 間隔とサイズ
  • タイポグラフィ（ファミリー、サイズ、ウェイト、行の高さ）
  • 色、境界線、角丸、シャドウ
  • インタラクション状態
  • レスポンシブ動作

完全な一致がシステム上の制約と相反する場合は、システムのプリミティブを維持し、必要最小限の対象を絞ったオーバーライドを適用します。

手順 7：最終検証チェックリスト
  • レイアウトと配置が Figma と一致している
  • テキストとタイポグラフィが Figma と一致している
  • 色とエフェクトが Figma と一致している
  • 画像／ベクターアセットが揃っており、置き換えられていない
  • インタラクションとレスポンシブ対応が実装されている
  • アクセシビリティの基本水準が維持されている

実装ルール

  • 新しいコンポーネントを作成する前に、既存のプロジェクトコンポーネントを再利用します
  • コンポーネントは合成可能で、型付けされた状態に保ちます
  • リテラル値よりもトークン化された値を優先します
  • 意図的な差異は、コードコメントで簡潔に説明します

簡単な例

ユーザーからの依頼：

Implement this page: https://figma.com/design/AbC12345XYZ/MyPage?node-id=10-22

実行の概要：

  1. fileKey=AbC12345XYZ、nodeId=10-22 を抽出します
  2. MCP 接続を確認します：get_figma_data(fileKey="AbC12345XYZ", nodeId="10-22")
  3. 接続確認に成功した場合は、必要に応じて追加の get_figma_data 呼び出しを行い、ノードコンテキストを取得／展開します
  4. レスポンスから画像／ベクターノードを収集します
  5. download_figma_images(...) を呼び出し、プロジェクトのアセットディレクトリに保存します
  6. 既存のコンポーネントシステムとトークンを使って実装します
  7. デザインの忠実度とインタラクションの動作を検証します

コメント

Markdown 対応