figma-mcp

Figma MCP

概要

このスキルは、Figma の MCP（Model Context Protocol）サーバーを利用して、Figma ファイルから構造化されたデザインデータに直接アクセスし、正確なデザインからコードへの変換を可能にします。スクリーンショットベースの方法とは異なり、Figma MCP は、正確な間隔、色、タイポグラフィ、コンポーネント階層、デザインシステムのトークンなど、すべてのデザイン要素に関するセマンティック情報を提供するため、より正確なコードを生成できます。

このスキルを使用するタイミング

次の場合に、このスキルを使用します。

• ユーザーが Figma の URL（ファイルリンクまたはフレーム選択リンク）を提供したとき
• Figma のデザインをコードに変換・実装するよう依頼されたとき
• 「Figma からこれを作って」や「このデザインを実装して」と頼まれたとき
• デザインのトークン、変数、またはデザインシステムの値を抽出する必要があるとき
• 既存のコードを Figma のデザインに合わせて更新したいとき
• デザインからコードへの一貫性を維持することに言及されたとき

ワークフロー

ステップ 1：Figma のデザインリファレンスを受け取る

ユーザーが Figma の URL を提供するか、デザインの実装を依頼した場合：

1. Figma リンクの種類を特定します：

   • ファイル URL：https://www.figma.com/file/[FILE_KEY]/...
   • フレーム選択リンク：https://www.figma.com/file/[FILE_KEY]/...?node-id=[NODE_ID]
   • デザイン URL：https://www.figma.com/design/[FILE_KEY]/...

2. アクセスを確認します：

   • Figma MCP サーバーが設定され、アクセス可能であることを確認します
   • 設定されていない場合は、設定手順について references/setup-guide.md を参照します

ステップ 2：MCP ツールを使用してデザインデータを取得する

利用可能な Figma MCP ツールを使用して、構造化されたデザインデータを取得します。

利用可能な主な MCP ツール：

• get_figma_data - ファイルまたは特定のフレームのデザインデータ全体を取得します
• get_figma_variables - デザインのトークン（色、間隔、タイポグラフィ）を抽出します
• get_figma_components - コンポーネントの定義とインスタンスを取得します
• get_figma_styles - テキスト、色、エフェクトのスタイルにアクセスします

ベストプラクティス： まず get_figma_data を使用して、ユーザーが指定した特定のフレームまたはノードのデータを取得します。これにより、完全な構造、レイアウトデータ、スタイル情報が得られます。

ワークフローの例：

User: "Implement this Figma design: [Figma URL with node-id]"

1. Extract file_key and node_id from URL
2. Call get_figma_data with file_key and node_id parameters
3. Receive structured JSON with:
   - Element hierarchy (frames, groups, components)
   - Layout properties (position, size, constraints, auto-layout)
   - Styling (fills, strokes, effects, typography)
   - Component instances and variants
   - Design tokens and variables

ステップ 3：デザイン構造を分析する

コードを生成する前に、取得したデザインデータを分析します。

1. コンポーネント階層を特定します：

   • 主なコンテナーやセクションは何ですか？
   • 再利用可能なコンポーネントはどの要素ですか？
   • レイアウトはどのように配置されますか（flex、grid、absolute）？

2. デザインシステムの値を抽出します：

   • 色（塗り、線、背景）
   • タイポグラフィ（フォントファミリー、サイズ、ウェイト、行の高さ）
   • 間隔（パディング、マージン、間隔）
   • 枠線、シャドウ、エフェクト

3. レイアウト方法を決定します：

   • 自動レイアウトのフレーム → Flexbox または CSS Grid
   • 絶対配置 → CSS の絶対配置／相対配置
   • 制約 → レスポンシブな動作

ステップ 4：コードを生成する

デザインデータに基づいて、本番環境に対応したコードを生成します。

コード生成の原則：

1. セマンティック HTML を使用します：

   • フレーム → <div>、<section>、<header> など
   • テキスト → <h1>-<h6>、<p>、<span>
   • ボタン → <button>
   • 画像 → <img>

2. デザインシステムの値を維持します：

   • Figma の変数から色の変数を抽出します
   • 間隔、色、タイポグラフィ用の CSS カスタムプロパティを作成します
   • デザインの正確な値を使用します（近似値にしないでください）

3. レイアウトの動作を一致させます：

   • パディング／間隔を含む自動レイアウト → gap／padding を使用した Flexbox
   • 自動レイアウトの方向 → flex-direction
   • 制約 → レスポンシブ CSS（flex-grow、min/max-width）

4. コンポーネントベースのアーキテクチャ：

   • Figma のコンポーネント → React／Vue のコンポーネントまたは CSS クラス
   • コンポーネントのインスタンス → props を使用したコンポーネント
   • バリアント → props または条件付きクラス

5. レスポンシブ対応を考慮します：

   • 適切な場合は相対単位（rem、em、%）を使用します
   • デスクトップ／モバイルのバリアントに応じたブレークポイントを検討します
   • Figma の制約による動作を維持します

出力構造の例：

// For React
import React from 'react';
import './styles.css';

export const ComponentName = () => {
  return (
    <div className="container">
      {/* Preserved hierarchy and styling */}
    </div>
  );
};

ステップ 5：検証と改善

初期コードを生成した後：

1. 正確性を確認します：

   • 余白の値はデザインと正確に一致していますか？
   • 色は正確ですか（16進数値を確認してください）？
   • レイアウトの動作は一致していますか（レスポンシブ、折り返し）？

2. 改善点を確認します：

   • CSS 変数にできる値はありますか？
   • コンポーネント化すべき繰り返しパターンはありますか？
   • コードはアクセシビリティに配慮されていますか（セマンティック HTML、ARIA 属性）？

3. 改善案を提示します：

   • 該当する場合は、デザインシステムへの統合を提案します
   • 検出したデザインの不整合について説明します
   • 最適化を提案します（共有スタイル、コンポーネントの切り出し）

ベストプラクティス

デザインからコードへの変換精度

• 値を決して近似しないでください：Figma データのピクセル値、色、寸法を正確に使用します
• 階層構造を維持します：Figma のフレーム／グループのネスト構造を保ちます
• オートレイアウトの動作を再現します：Figma のオートレイアウトは Flexbox のプロパティに直接対応します
• デザイントークンを使用します：Figma Variables から色や余白の変数を抽出して再利用します

コード品質

• セマンティック HTML：div だけでなく、適切な HTML 要素を使用します
• コンポーネントの切り出し：Figma コンポーネントから再利用可能なコンポーネントを特定します
• CSS の整理：レイアウト、タイポグラフィ、ビジュアルスタイルを分けます
• アクセシビリティ：適切な ARIA ラベルとセマンティック構造を追加します

デザインシステムとの統合

• 変数を確認します：デザイントークンには Figma Variables を使用します
• コンポーネントの一貫性：Figma のコンポーネント名をコードのコンポーネント名に一致させます
• Code Connect：利用可能な場合は、コンポーネントの Code Connect マッピングを参照します
• 命名規則：クラス／コンポーネントには既存のプロジェクト規約に従います

パフォーマンス

• 画像を最適化します：適切な画像形式と圧縮を提案します
• CSS の効率化：冗長なスタイルを避け、CSS 変数を使用します
• バンドルサイズ：生成コードを軽量かつモジュール化します

詳しいガイダンスについては、以下を参照してください：

• references/setup-guide.md - Figma MCP サーバーのセットアップ
• references/best-practices.md - ベストプラクティスと例の詳細

よくあるパターン

パターン 1：Figma からランディングページを作成

User provides: Figma link to landing page design
Process:
1. Fetch complete page structure with get_figma_data
2. Identify sections (hero, features, CTA, footer)
3. Generate semantic HTML with section elements
4. Extract colors/typography to CSS variables
5. Implement responsive behavior from constraints

パターン 2：コンポーネントの実装

User provides: Figma link to button component with variants
Process:
1. Fetch component definition with get_figma_components
2. Identify variants (primary, secondary, sizes)
3. Create React component with props for variants
4. Extract shared styles to base component
5. Implement variant-specific styles as props/classes

パターン 3：デザインシステムの抽出

User requests: Extract design tokens from Figma file
Process:
1. Fetch variables with get_figma_variables
2. Fetch text/color styles with get_figma_styles
3. Generate CSS custom properties or theme object
4. Document token naming and usage
5. Export as stylesheet or config file

トラブルシューティング

MCP サーバーを利用できない場合：

• MCP 設定で Figma MCP サーバーが構成されているか確認します
• セットアップ手順については references/setup-guide.md を参照します
• ユーザーが適切な Figma プランを利用しているか確認します（公式サーバーには Dev Mode へのアクセスが必要です）

デザインデータが不完全な場合：

• Figma ファイルにアクセスできることを確認します（権限）
• URL の node-id が正しいことを確認します
• 子ノードから取得できるデータが限られている場合は、親フレームの取得を試します

コードが見た目でデザインと一致しない場合：

• 余白とサイズの値を再確認します
• 色の値が Figma の正確な16進数コードであることを確認します
• フォントが正しく読み込まれているか確認します
• オートレイアウトの方向と配置のプロパティを確認します

リソース

このスキルには、Figma MCP ワークフローを支援するリファレンスドキュメントが含まれています：

references/setup-guide.md

Claude Code およびその他の MCP クライアントで Figma MCP サーバー（公式およびコミュニティ版）を構成するための、セットアップ手順をすべて記載しています。ユーザーが連携をセットアップする必要がある場合に参照してください。

references/best-practices.md

コンポーネントアーキテクチャ、レスポンシブデザイン戦略、デザインシステムとの統合など、デザインからコードへの変換に関するベストプラクティス、詳細な例、高度なパターンを記載しています。

最近の更新

コミュニティサーバーの名称変更（2026年4月）： GLips による人気のコミュニティ MCP サーバーが、「figma-developer-mcp」から Framelink MCP for Figma（v0.11.0、14.5k+ stars）に名称変更されました。ステートレス HTTP トランスポート、VS Code のレイヤー生成、プロンプトインジェクション防御に対応しました。後方互換性のため、npm パッケージ名は引き続き figma-developer-mcp です。最新の設定については references/setup-guide.md を参照してください。