——「デザイナーが作ったFigmaのデザインと、エンジニアが実装したコードが、いつの間にかズレている」。これはプロダクト開発の現場で繰り返し起きる構造的な問題です。デザインレビューで修正が入るたびに実装にも反映が必要になり、その同期作業が開発速度を落とし、品質にも影響を与えます。AI活用完全ガイドで、AI活用の全体像を把握できます。
この構造的な課題に対して、Figma MCPサーバーが根本的な解決策を提供しています。Figma社が公式に開発したこのMCPサーバーは、AIエージェントがFigmaのデザインデータに直接アクセスし、レイアウト構造・スタイル情報・デザイントークン・コンポーネント対応関係を取得できるようにするものです。
CRM特化型コンサルタントとして多くの企業のシステム開発を見てきた立場からも、デザインとコードの乖離は「仕方ないもの」ではなく「技術的に解決可能な構造問題」だと確信しています。本記事では、Figma MCPサーバーの具体的な活用方法を、Code Connectの設定からワークフロー構築まで実践レベルで解説します。詳しくは「MCPサーバーの構築ガイド」で解説しています。
Figma MCPサーバーは、Figma社が公式に提供するTier 1のMCPサーバーです。執筆時点で以下の主要ツールが利用可能です。
| ツール名 | 機能 | 主な用途 |
|---|---|---|
get_design_context |
デザインのレイアウト構造・スタイル・コンポーネント階層・制約条件を取得 | コード生成の基盤情報取得 |
get_screenshot |
デザインのスクリーンショットを取得 | ビジュアル参照・レビュー |
get_metadata |
ファイル名・ページ構成・最終更新日時等のメタデータを取得 | ファイル管理・変更追跡 |
get_variable_defs |
Figma Variables（カラー・スペーシング・タイポグラフィ）を取得 | デザイントークン同期 |
get_code_connect_map |
FigmaコンポーネントとコードコンポーネントのCode Connect対応関係を取得 | コンポーネントマッピング参照 |
get_code_connect_suggestions |
未マッピングのコンポーネントに対するCode Connect提案を取得 | マッピング漏れの検出 |
add_code_connect_map |
新しいCode Connectマッピングを追加 | マッピング登録 |
send_code_connect_mappings |
マッピング情報をFigmaに送信 | 一括同期 |
get_figjam |
FigJamボード（ホワイトボード）の内容を取得 | UXリサーチ・設計ドキュメント参照 |
Figma MCPサーバーはリモートMCPサーバーとして動作し、MCP仕様のStreamable HTTP transportに対応しています。Claude Desktop、Cursor、VS Code等の主要なMCPクライアントから利用可能です。
Code Connectは、Figmaのコンポーネントと実装コード上のコンポーネントを明示的にマッピングする仕組みです。ここが結構ミソなのですが、Code Connectがないと、AIはデザインの「見た目」からコードを推測するしかありません。Code Connectがあれば、AIは「このFigmaコンポーネントはコード上のに対応する」という正確な情報を得られます。
Code Connectのマッピングは、以下の3要素で構成されます。
| 要素 | 説明 | 例 |
|---|---|---|
| Figmaコンポーネント | Figma上のコンポーネントID | Button/Primary |
| コードコンポーネント | 実装コードのコンポーネントパス | @/components/ui/Button |
| プロパティマッピング | FigmaのプロパティとReact propsの対応 | State=Hover → variant="primary" |
Step 1: Figma側のコンポーネント整理
Code Connectの効果を最大化するには、Figma側のコンポーネントが適切に構造化されている必要があります。
Button/Primary/Largeのようなスラッシュ区切りの命名規則）Step 2: MCPサーバーでマッピングを登録
AIエージェント（Claude等）を通じて、add_code_connect_mapツールでマッピングを登録します。
FigmaのButtonコンポーネント → @/components/ui/Button
- Variant=Primary → variant="primary"
- Variant=Secondary → variant="secondary"
- Size=Large → size="lg"
- Size=Small → size="sm"Step 3: マッピングの検証と拡張
get_code_connect_suggestionsツールを使うと、未マッピングのコンポーネントを検出できます。優先度の高いコンポーネントから順にマッピングを拡張していきます。詳しくは「MCPのエンタープライズ導入ガイド」で解説しています。
| パターン | 対象チーム | マッピング範囲 | 更新頻度 |
|---|---|---|---|
| ミニマム | 小規模（2〜3人） | 主要10〜15コンポーネント | デザイン更新時 |
| スタンダード | 中規模（5〜10人） | 30〜50コンポーネント | 週次 |
| フル | 大規模（10人以上） | デザインシステム全体 | CI/CDパイプラインで自動化 |
Figma Variablesは、カラー・スペーシング・タイポグラフィ・ブレークポイントなどのデザイン値を変数として管理する機能です。Figma MCPサーバーのget_variable_defsツールで、これらの値をプログラム的に取得できます。
[Figma Variables] → [get_variable_defs] → [変換処理] → [CSSカスタムプロパティ / Tailwind設定]CSSカスタムプロパティへの変換例:
:root {
/* Figma Variablesから自動生成 */
--color-primary: #2563EB;
--color-secondary: #FF5C35;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--font-size-body: 16px;
--font-size-heading: 24px;
}Tailwind CSS設定への変換例:
// tailwind.config.js（Figma Variablesから自動生成）
module.exports = {
theme: {
extend: {
colors: {
primary: '#2563EB',
secondary: '#FF5C35',
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
},
},
},
}デザイントークンの同期をCI/CDパイプラインに組み込むことで、Figma側の変更がコードベースに自動反映される仕組みを構築できます。
| ステップ | ツール | 処理内容 |
|---|---|---|
| 1. 変更検知 | Figma Webhook / 定期ポーリング | Figma Variables の更新を検知 |
| 2. トークン取得 | Figma MCP get_variable_defs |
最新のデザイントークンを取得 |
| 3. 変換 | カスタムスクリプト | CSS/Tailwind/JSON形式に変換 |
| 4. コミット | GitHub Actions | 変換結果をコードベースにコミット |
| 5. デプロイ | Vercel / Netlify | 自動ビルド・デプロイ |
AIによるコード変換の精度は、Figmaファイルの設計品質に大きく依存します。以下の原則を守ることで変換精度を大幅に向上させられます。詳しくは「HubSpot MCP Serverの活用ガイド」で解説しています。
原則1: Auto Layoutの徹底
フリーレイアウト（絶対配置）ではなく、Auto Layoutを使ってFlexboxベースの構造を明示的に定義します。AIはAuto Layoutの情報からCSSのFlexbox/Grid構造を正確に推定できます。
原則2: コンポーネント化の粒度
再利用されるUI要素はFigmaコンポーネントとして切り出し、プロパティ（Variant、Boolean、Text等）を適切に設定します。
原則3: 命名規則の統一
レイヤー名・コンポーネント名・フレーム名に一貫した命名規則を適用します。AIはレイヤー名からHTML要素のclass名やアクセシビリティ情報を推定します。
原則4: 制約条件の設定
レスポンシブデザインの意図を伝えるため、Constraints（制約条件）とMin/Max Width/Heightを適切に設定します。
| 準備項目 | 内容 | 優先度 |
|---|---|---|
| コンポーネントライブラリの整備 | 再利用可能なUIコンポーネントの構築 | 最高 |
| 命名規則の統一 | コンポーネント名・props名のルール策定 | 高 |
| デザイントークンの変数化 | ハードコードされた値の変数化 | 高 |
| ストーリーブック等の文書化 | コンポーネントの使用例と仕様書 | 中 |
デザイナーがFigmaで新規ランディングページを作成した後、AIエージェントが以下のフローでコードを生成します。
get_design_contextでページ全体のレイアウト構造を取得get_code_connect_mapで既存コンポーネントとのマッピングを確認get_variable_defsでデザイントークンを参照し、ハードコードを回避デザイナーがFigma上でボタンのカラーを変更した場合、AIが以下のフローで反映します。
get_variable_defsで変更されたデザイントークンを検出Figma MCPサーバーはHubSpot CMSの開発にも活用できます。HubSpot MCPサーバーと組み合わせることで、FigmaのデザインからHubSpotモジュールのHTML/CSSを生成し、CRMデータと連動したUIを自動構築できます。
Figma MCPサーバーは強力なツールですが、以下の制限を理解した上で導入する必要があります。
「Figma MCPは"デザイナーの仕事をAIが奪う"ツールではありません。デザイナーとエンジニアの間にある情報伝達のロスを構造的に解消するツールです。導入の成否を分けるのは、AIの性能よりもFigmaファイル自体の設計品質です」——今枝（StartLink代表）
| Phase | 期間 | 内容 | 成果物 |
|---|---|---|---|
| Phase 1: 基盤整備 | 1〜2週間 | MCPサーバー接続、主要10〜15コンポーネントのCode Connect設定 | マッピング定義、動作確認レポート |
| Phase 2: ワークフロー構築 | 3〜4週間 | 30〜50コンポーネントへの拡大、トークン同期パイプライン構築 | CI/CDパイプライン、運用マニュアル |
| Phase 3: 最適化・拡張 | 継続 | 全コンポーネントへの展開、変換精度の継続改善 | 月次改善レポート |
また、AIツールの選定基準について体系的に整理したAI活用ツール選定フレームワークもあわせてご覧ください。
Figma MCPサーバーは、デザインとコードの乖離という構造的な課題に対して、根本的な解決策を提供します。Code Connectによるコンポーネントマッピング、Figma Variablesによるデザイントークンの自動同期、そしてAIによるコード生成——これらを組み合わせることで、デザインの変更がコードに即座に反映される開発ワークフローを構築できます。このテーマの全記事はMCP連携ガイドでご覧いただけます。
ただし、ツールの導入だけで問題が解決するわけではありません。Figmaファイルの設計品質、Code Connectの継続的なメンテナンス、生成コードのレビュー体制——これらの運用設計がセットで必要です。
「デザインと実装の同期をどう仕組み化すべきか」「MCPを活用した開発ワークフローを構築したい」——そうしたご要望があれば、株式会社StartLinkがCRM・システム開発の両方の知見を活かしてご支援します。まずはお気軽にお問い合わせください。
筆者: 今枝 拓海（株式会社StartLink 代表取締役）——CRM特化型コンサルタントとして、HubSpotを中心としたCRM導入・活用支援に加え、Figma MCPサーバーを活用したデザイン→コード変換の自動化設計を手がけています。