---
title: Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド
description: Figma MCPとは、FigmaのデザインデータをAIが取得し、実装コードへつなぐ仕組みです。Code Connectによるコンポーネント対応付け、デザイントークン同期、導入準備、レビュー分担、向かないケースまで、デザインとコードの乖離を防ぐ運用手順として解説します。
image: https://start-link.jp/hubfs/blog/screenshots/generated/gen_mcp-figma-design-to-code.png
---

[![StartLink](https://start-link.jp/hs-fs/hubfs/logo/%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png?width=130&height=39&name=%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png "StartLink")](https://start-link.jp)

- [会社情報About](https://start-link.jp/about)
- [サービスService](https://start-link.jp/service)
- [プロダクトProducts](https://start-link.jp/sync)
- [YoutubeYoutube](https://start-link.jp/about/sns)
- [ブログBlog](https://start-link.jp/hubspot-ai)
- [業界別ガイドIndustry guides](https://start-link.jp/case)
- [採用情報Recruit](https://start-link.jp/recruit)

[資料DL](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

[会社情報](https://start-link.jp/about) [サービス](https://start-link.jp/service) [プロダクト](https://start-link.jp/sync) [Youtube](https://start-link.jp/about/sns) [ブログ](https://start-link.jp/hubspot-ai) [業界別ガイド](https://start-link.jp/case) [採用情報](https://start-link.jp/recruit)

[資料ダウンロード](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

- [トップ](https://start-link.jp)
- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [Youtube](https://start-link.jp/about/sns)
- [ブログ](https://start-link.jp/hubspot-ai)
- [Contact](https://start-link.jp/contact)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

[ホーム](https://start-link.jp) › [ブログ](https://start-link.jp/hubspot-ai) ›[AI活用](https://start-link.jp/hubspot-ai/ai) ›[MCP連携](https://start-link.jp/hubspot-ai/ai/mcp-integration) ›Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド

# Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド

- 2026年3月14日
- 最終更新: 2026年10月20日

![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_mcp-figma-design-to-code.png)

この記事の結論

Figma MCPを使うと、デザインの構造や変数、コンポーネントとの対応関係をAIが読み取り、実装の初期案へつなげられます。デザインとコードの乖離は、個人の注意力ではなく運用の仕組みで抑えることが重要です。

ブログ目次

もっと見る ▼

**Figma MCPを使うと、デザインの構造や変数、コンポーネントとの対応関係をAIが読み取り、実装の初期案へつなげられます。デザインとコードの乖離は、個人の注意力ではなく運用の仕組みで抑えることが重要です。**

「Figmaを修正したのに実装へ反映されていない」「レビューのたびにデザイナーとエンジニアが差分を確認している」「デザインシステムを作ったものの、コードには古いスタイルが残っている」——このような状況では、変更内容を人が見つけ、伝え、転記する作業そのものがボトルネックになります。

Figma MCPサーバーとは、Figma社が公式に開発したMCPサーバーで、AIエージェントがFigmaのデザインデータへアクセスするための仕組みです。レイアウト構造、スタイル情報、デザイントークン、コンポーネントの対応関係をAIへ渡し、デザインからコードへの橋渡しを支援します。

重要なのは、画面を見たAIにコードを書かせることだけではありません。Figma側の設計、Code Connectのマッピング、コード側のコンポーネント、生成後のレビューまでを一つの流れとして設計することで、担当者が変わっても引き継げる運用に近づきます。[AI活用完全ガイド](https://start-link.jp/hubspot-ai/ai)で、AI活用の全体像も把握いただけます。

## この記事でわかること

デザインからコードへの変換プロセスを効率化したい開発チーム・デザインチーム、そしてAIを使った開発ワークフローの設計を検討している方に向けた記事です。機能の紹介だけでなく、準備、運用、レビューまでを一続きで解説します。

- **Figma MCPサーバーの役割** — AIがFigmaから何を取得し、デザインからコードへの変換でどこを支援するのかを整理します。
- **Code Connectの設定と運用** — Figmaコンポーネントと実装コードを対応付け、マッピングを継続的に管理する流れを解説します。
- **デザイントークンの同期方法** — Figma Variablesを取得し、CSSやTailwindの設定へ反映する考え方がわかります。
- **精度を高めるための準備** — Figma側とコード側で揃えておきたい設計ルールとレビュー観点を整理します。
- **導入時の制限と進め方** — AIに任せにくい領域と、対象を絞って段階的に展開する方法を説明します。

## Figma MCPサーバーが担う役割と全体像

Figma MCPサーバーは、AIエージェントとFigmaのデザインデータを接続する役割を担います。デザインの見た目だけでなく、その背後にある構造や変数を取得できる点が、スクリーンショットだけを参照する方法との違いです。まずは、開発フローのどこに置く仕組みなのかを押さえておきましょう。

次の図は、FigmaデザインからMCPサーバーを介してコードを生成する流れを示します。

![Figmaデザインからコード生成までの流れ図](https://start-link.jp/hubfs/blog/screenshots/generated/mcp-figma-design-to-code_figure_r1004_01.png)

### MCPによって受け渡せる情報

MCPはModel Context Protocolの略称で、AIクライアントが外部のデータやツールを利用するための接続方式です。Figma MCPサーバーはリモートサーバーとして動作し、MCPクライアントからFigmaの情報を取得できるようにします。

[MCP仕様](https://spec.modelcontextprotocol.io/specification/2025-03-26/)のStreamable HTTP transportに対応しており、デザインデータをAIへ渡す接続部分を標準化できます。Claude Codeから利用する場合の設定と実装の流れは、[Claude Code × Figma連携](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-figma-design)でも解説しています。

ただし、接続できることと、実装に適したコードを生成できることは別の課題です。Figmaのレイヤーやコンポーネントが整理されていなければ、AIが受け取る情報も曖昧になります。MCPは情報伝達を支える仕組みであり、元の設計品質を置き換えるものではありません。

### 主要ツールと用途

Figma MCPサーバーでは、デザイン構造の取得、スクリーンショットの取得、変数の参照、Code Connectの管理などを行えます。用途ごとに整理すると、次のようになります。

| 用途 | ツール | 取得・実行する内容 |
| --- | --- | --- |
| デザイン構造の把握 | `get_design_context` | レイアウト、スタイル、階層、制約条件を取得 |
| 見た目の確認 | `get_screenshot` | デザインのスクリーンショットを取得 |
| ファイル情報の確認 | `get_metadata` | ファイル名、ページ構成、更新情報を取得 |
| トークンの参照 | `get_variable_defs` | カラー、余白、文字設定などのVariablesを取得 |
| 対応関係の確認 | `get_code_connect_map` | Figmaとコードのマッピングを取得 |
| マッピング候補の確認 | `get_code_connect_suggestions` | 未対応コンポーネントの候補を取得 |
| 対応関係の登録 | `add_code_connect_map` | Code Connectのマッピングを追加 |
| 対応関係の同期 | `send_code_connect_mappings` | マッピング情報をFigmaへ送信 |
| 設計資料の参照 | `get_figjam` | FigJamボードの内容を取得 |

すべてのツールを最初から使う必要はありません。新規画面のコード生成であれば、デザイン構造、既存コンポーネントとの対応、変数の参照から始めると、何が不足しているかを確認しやすくなります。

### 開発フローの中での位置づけ

Figma MCPは、デザイン作成とコード実装の間に置く接続層です。デザイナーが作成した画面をAIが読み取り、既存のコードコンポーネントやデザイントークンを参照しながら実装案を作ります。その後、エンジニアがコードをレビューし、挙動、アクセシビリティ、性能を確認します。

| 従来の受け渡し | Figma MCPを組み込んだ受け渡し |
| --- | --- |
| 画面を見て構造を読み取る | デザインコンテキストから階層や制約を取得する |
| 対応する部品を人が探す | Code Connectから既存部品との対応を確認する |
| 色や余白を手作業で転記する | Variablesからトークンを取得する |
| 修正差分をチャットで伝える | デザインとマッピングを基準に差分を確認する |
| 担当者の記憶に依存する | 対応関係とレビュー手順を共有する |

ここでのポイントは、AIを追加することではなく、情報の受け渡し方法を統一することです。人が毎回同じ確認を繰り返す状態から、データとルールを参照して判断できる状態へ切り替えます。

## Code Connectでデザインと実装を対応付ける

Code Connectは、Figma上のコンポーネントとコード上のコンポーネントを明示的に紐づける仕組みです。対応関係がなければ、AIは見た目やレイヤー名から実装を推測します。既存の部品を再利用したい場合は、このマッピング設計が要点になります。

### マッピングを構成する情報

Code Connectのマッピングでは、Figmaコンポーネント、コードコンポーネント、プロパティの対応を定義します。例えば、Figma上のボタンが実装側のどのコンポーネントに相当し、VariantやSizeがどのpropsへ変換されるかを示します。

| 構成要素 | 定義する内容 | 例 |
| --- | --- | --- |
| Figmaコンポーネント | Figma上で識別する部品 | `Button/Primary` |
| コードコンポーネント | 実装で利用する部品の場所 | `@/components/ui/Button` |
| プロパティマッピング | デザイン側の値とpropsの対応 | `Variant=Primary`と`variant="primary"`の対応 |

この定義があると、AIは似たボタンを新しく作るのではなく、既存コンポーネントの利用を検討できます。デザインシステムとコードの接点を明文化するため、レビュー時にも既存部品を使うべきか判断しやすくなります。

### 設定の流れ

最初にFigma側のコンポーネントを確認します。名前、Variant、Boolean Property、Auto Layoutなどが整理されているかを見直し、同じ役割の部品が重複していないかを確かめます。

次に、`add_code_connect_map`を使い、Figmaコンポーネントとコードコンポーネントを対応付けます。ボタンであれば、PrimaryやSecondaryといったVariant、LargeやSmallといったSizeを、実装側のpropsへ紐づけます。

最後に、`get_code_connect_suggestions`で未マッピングの候補を確認します。候補をそのまま採用するのではなく、既存コンポーネントの責務や命名規則と合っているかを人が判断し、必要なものから登録します。

| 手順 | 作業 | 確認する観点 |
| --- | --- | --- |
| Figma側の整理 | コンポーネントとプロパティを見直す | 名前と役割が重複していないか |
| マッピング登録 | Figmaとコードの部品を紐づける | Variantとpropsの意味が一致するか |
| 候補の確認 | 未マッピング候補を洗い出す | 新規作成か既存部品の再利用か |
| 生成結果の検証 | 実際の画面でコードを確認する | 表示、挙動、再利用方法が適切か |

### 個人の記憶に依存しない運用

マッピングは、コード生成の精度を高めるだけの設定ではありません。「このFigmaコンポーネントはどのコードを使うのか」というチーム内のルールを、参照できる形で残す役割があります。

対応関係が担当者の記憶やチャット履歴だけに残っていると、新しく参画したメンバーは、その都度詳しい人へ確認することになります。Code Connectの定義と更新手順を共有すれば、担当者が変わっても同じ基準で実装を進めやすくなります。

ただし、マッピングは一度登録して終わりではありません。次の変更があれば対応関係も見直す必要があります。

- **Figma側の名称変更**
- **コードの移動**
- **propsの変更**

**変更時に誰が確認するのかまで決めておく**と、古いマッピングが残る問題を抑えられます。

## デザイントークンをコードへ同期する

Figma Variablesは、カラー、余白、タイポグラフィなどのデザイン値を変数として管理する機能です。Figma MCPの`get_variable_defs`を利用すると、それらの値をプログラムから取得できます。手作業で転記する運用から、変更を検知して反映する運用へ移すための土台になります。

### Variablesから実装形式へ変換する

基本の流れは、Figma Variablesを取得し、コードで利用する形式へ変換することです。取得結果をそのまま使うのではなく、CSSカスタムプロパティ、Tailwind設定、JSONなど、既存のコードベースに合う形式へ整えます。

| Figma側の情報 | コード側の反映先 | 変換時の確認 |
| --- | --- | --- |
| カラー | CSS変数やテーマ設定 | 用途名と色名が一致しているか |
| スペーシング | 余白のトークン | 単位と命名規則が統一されているか |
| タイポグラフィ | 文字サイズや行間の設定 | 見出しと本文の役割が明確か |
| ブレークポイント | レスポンシブ設定 | コード側の既存ルールと競合しないか |

例えば、FigmaのPrimary Colorをコード側の`--color-primary`へ変換し、スペーシングを`--spacing-sm`や`--spacing-md`へ対応付けます。具体的な値を各コンポーネントへ直接書くのではなく、共通の変数を参照させることで、変更箇所を集約できます。

### 変更検知から反映までの流れ

同期の仕組みは、変更検知、トークン取得、形式変換、コードレビュー、デプロイという流れで設計します。Figma Webhookや定期ポーリングで変更を検知し、`get_variable_defs`で最新の定義を取得した後、カスタムスクリプトでコード用の形式へ変換します。

| 工程 | 利用する仕組み | 処理内容 |
| --- | --- | --- |
| 変更検知 | Figma Webhookまたは定期ポーリング | Variablesの更新を検知する |
| トークン取得 | `get_variable_defs` | 最新のデザイン値を取得する |
| 形式変換 | カスタムスクリプト | CSS、Tailwind、JSONへ変換する |
| 差分確認 | コードレビュー | 意図した変更かを人が判断する |
| 反映 | CI/CDパイプライン | ビルドとデプロイへつなげる |

自動化する場合でも、取得した変更をそのまま本番へ反映する設計には注意が必要です。色や余白の変更は複数画面へ波及するため、差分の確認と表示テストを間に置く方が現実的です。

### トークン管理の責任を決める

デザイントークンの同期では、Figmaとコードのどちらを基準にするかを決めます。両方で同じ値を自由に変更できる状態では、更新の競合が起こりやすくなります。

デザイナーがFigma Variablesを更新し、エンジニアが変換結果と影響範囲をレビューするなど、役割を分けておくと判断経路が明確になります。AIや自動処理は取得、変換、差分の提示を担当し、変更の採用とリリースは人が判断する形です。

ただし、既存コードに色や余白が直接書かれている場合、トークン同期だけを追加しても管理は一本化されません。先にハードコードされた値を洗い出し、どこまで共通変数へ置き換えるかを決める必要があります。

## 変換精度を高めるために両側を整える

AIによるコード変換の精度は、Figmaファイルとコードベースの設計品質に左右されます。MCPを接続しただけでは、曖昧なレイヤー構造や重複したコンポーネントは整理されません。Figma側とコード側を同じ設計思想で揃えることがポイントになってきます。

### Figma側で整える項目

Figmaでは、Auto Layoutを使って要素の並び方や余白を構造として表現します。固定座標で配置された画面よりも、方向、間隔、折り返し、サイズ制約が定義された画面の方が、AIは実装意図を読み取りやすくなります。

再利用するUIはコンポーネントとして切り出し、Variant、Boolean、Textなどのプロパティを整理します。レイヤー名やフレーム名も、見た目だけでなく役割が伝わる名称に揃えます。

| 確認項目 | 整っている状態 | 整っていない場合の影響 |
| --- | --- | --- |
| Auto Layout | 配置方向と余白が構造化されている | 固定座標に寄ったコードになりやすい |
| コンポーネント | 再利用単位が明確になっている | 類似部品が重複しやすい |
| プロパティ | 状態やサイズの違いが定義されている | 条件分岐やpropsを推測しやすい |
| 命名規則 | レイヤーの役割が名称からわかる | 要素の意味を誤解しやすい |
| 制約条件 | サイズ変化への意図が示されている | レスポンシブ挙動を再現しにくい |

### コード側で整える項目

コード側では、再利用可能なコンポーネントとデザイントークンを用意します。AIが既存部品を使える状態にするには、コンポーネント名、props名、利用例が揃っていることが重要です。

| 準備項目 | 内容 | Code Connectとの関係 |
| --- | --- | --- |
| コンポーネントライブラリ | 再利用するUI部品をまとめる | マッピング先が明確になる |
| 命名規則 | 部品名とprops名のルールを揃える | 対応関係を判断しやすくなる |
| トークンの変数化 | 色や余白の直接指定を共通化する | Variablesの反映先になる |
| 使用例の文書化 | 部品の用途と組み合わせ方を示す | AIと人が同じ使い方を参照できる |

既存コードの責務が曖昧なままマッピングを増やすと、似たコンポーネントのどれを選ぶべきか判断しにくくなります。最初に利用頻度の高い部品を整理し、重複を減らしてから対応付けを始める方が運用しやすくなります。

### 人が確認する評価基準

生成コードは、見た目が近いだけでは完成と判断できません。コンポーネントの再利用、レスポンシブ挙動、アクセシビリティ、画像の扱い、既存ルールとの整合性を人が確認します。

| 評価観点 | 確認内容 |
| --- | --- |
| デザイン再現 | レイアウト、余白、文字、色が意図に合うか |
| 再利用性 | 既存コンポーネントを適切に利用しているか |
| レスポンシブ | 画面幅が変わっても構造が崩れないか |
| アクセシビリティ | 要素の意味や操作方法が適切か |
| パフォーマンス | 画像や不要な処理に改善余地がないか |
| 保守性 | 命名と責務がコードベースの規約に合うか |

AIには構造の取得、候補の提示、初期コードの作成を任せ、人間は設計判断と最終レビューを担います。この分担を明確にすると、AIの出力をそのまま採用する状態を避けながら、反復作業を減らせます。

## デザインから公開後の運用まで一気通貫で捉える

Figma MCPは、単独のコード変換ツールとして見るよりも、デザイン作成、実装、レビュー、公開後の更新をつなぐ仕組みとして考える方が活用範囲を整理しやすくなります。個別の機能を導入する前に、どの工程の手作業を置き換えたいのかを明確にしましょう。

### 新規ページを実装する流れ

新規ページでは、最初に`get_design_context`で画面全体のレイアウトと階層を取得します。次に`get_code_connect_map`でマッピング済みの部品を確認し、既存のコードコンポーネントを優先して利用します。

未マッピングの要素は、デザインコンテキストを基に初期コードを作成します。その際も、`get_variable_defs`でデザイントークンを参照し、色や余白を個別に書き込まないようにします。

生成後は、次の役割で確認します。

- **エンジニア** ── コードをレビューする
- **デザイナー** ── 表示結果を確認する

修正内容が共通部品に関係する場合は、**ページだけを直すのではなく、Figmaコンポーネント、コードコンポーネント、Code Connectの対応をまとめて見直します**。

### デザイン変更をコードへ反映する流れ

既存ページの変更では、何が変わり、どこへ影響するかを先に確認します。ボタンのカラー変更であれば、`get_variable_defs`からトークンの差分を取得し、その変数を利用するコンポーネントを確認します。

Code Connectのマッピングがあれば、変更対象のFigmaコンポーネントとコードコンポーネントの対応をたどれます。担当者が画面を総当たりで探すのではなく、定義された関係から影響範囲を絞り込む考え方です。

ただし、デザイントークンの変更は、対象画面以外にも波及する可能性があります。**変更箇所だけを確認するのではなく、共通部品を利用する画面もレビュー対象に含めます**。

### HubSpotのWeb開発へつなげる流れ

Figma MCPサーバーは、HubSpotのWeb開発フローにも組み込めます。[HubSpot MCPサーバー](https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-hubspot-crm-automation)と組み合わせ、FigmaのデザインからHubSpotモジュールのHTMLやCSSを作成する流れです。

この場合も、デザインからコードへの変換だけを切り出さず、CRMデータをどこへ表示するかまで設計します。

なお、Claude Codeを活用した[経営データの可視化](https://start-link.jp/service/claude-code/business-intelligence)や[コンテンツマーケティングの支援](https://start-link.jp/service/claude-code/content-marketing)についても、別記事で具体的な取り組みをご紹介しています。

## 導入前に理解したい制限と向かないケース

Figma MCPには、取得しにくい情報や、人による判断が残る領域があります。利点だけでなく、制限を前提に設計することが導入後のミスマッチを防ぎます。ここでは技術面と運用面に分けて整理します。

### 技術面の制限

Figmaのプロトタイプで設定した画面遷移アニメーションやマイクロインタラクションは、MCPで取得するデータだけでは実装内容を十分に表現できません。動作のタイミングや状態変化は、デザイナーとエンジニアが意図を確認し、別途実装します。

Auto Layoutを利用していないフリーレイアウトも、変換精度が下がりやすい領域です。要素の関係が構造ではなく座標で表現されているため、レスポンシブなコードへ置き換える際に人の調整が必要になります。

Dev ModeやVariablesの完全な機能を利用するには、FigmaのProfessional以上のプランが前提です。導入前に、現在のプランと利用したい機能の範囲を確認します。

### 運用面の制限

Code Connectのマッピングには初期設定と継続的な更新が必要です。対象を広げるほど、Figma側の名称変更やコード側のprops変更へ追随する作業も増えます。

生成コードについても、人によるレビューが前提です。特にアクセシビリティやパフォーマンスは、見た目の再現だけでは評価できません。AIの出力を初期ドラフトとして扱い、コードレビューと表示確認を工程に含めます。

| AIに任せやすい作業 | 人が判断する作業 |
| --- | --- |
| デザイン構造の取得 | コンポーネントの責務設計 |
| 既存マッピングの参照 | 候補を採用するかの判断 |
| トークンの取得と変換 | 変更の影響範囲とリリース判断 |
| 初期コードの作成 | アクセシビリティと性能の評価 |
| 差分候補の提示 | 最終的なデザインと実装の承認 |

### 導入が向かない状態

Figma内のコンポーネントが整理されておらず、同じ役割の部品が複数存在する状態では、先にデザインシステムを整える必要があります。マッピング先となるコードコンポーネントが存在しない場合も、Code Connectの効果は限られます。

短期間だけ使う画面や、アニメーションを中心に設計された体験では、初期設定の負担が上回ることがあります。また、生成コードを確認できるエンジニアがいない状態で、自動生成だけを前提にする運用も適していません。

Figma MCPは、デザイナーやエンジニアの判断を置き換える仕組みではありません。情報伝達や初期実装を支援し、人が設計と品質を判断できる体制と組み合わせることで価値が出ます。

## 小さく始めて段階的に運用を広げる

いきなりデザインシステム全体を対象にすると、マッピング設定と既存コードの確認が同時に発生します。まずは利用頻度が高く、表示結果を確認しやすいコンポーネントへ対象を絞る進め方がおすすめです。効果と課題を確認した後に、同期や自動化の範囲を広げます。

### パイロット対象を選ぶ

最初の対象には、複数画面で再利用され、Figma側とコード側の対応が明確な部品を選びます。状態が複雑な部品や、アニメーションを多く含む部品は後に回すと、MCP接続とマッピングの基本動作を確認しやすくなります。

選定時には、部品の利用頻度、変更頻度、現在の差分確認にかかる手間を見ます。対象を決めたら、Figma側の構造、コード側の部品、Code Connectのマッピング、生成後のレビューまでを一通り実施します。

### 効果を確認して対象を広げる

パイロットでは、コード生成の速さだけでなく、既存部品を再利用できたか、レビューでどのような修正が発生したかを確認します。修正が多い場合は、AIの性能だけを原因にせず、Figmaの構造やマッピングの不足を見直します。

| 段階 | 主な作業 | 確認する成果 |
| --- | --- | --- |
| 基盤整備 | MCP接続と主要部品のマッピング | デザイン情報と対応関係を取得できる |
| ワークフロー構築 | 対象部品の拡大とトークン同期 | 変更からレビューまでの流れが回る |
| 最適化 | マッピングと変換ルールの改善 | 修正内容がルールへ反映される |

企業様によって最適な形は異なります。デザインシステムが整っていればトークン同期や対象拡大へ進みやすい一方、コンポーネントが未整理であれば、Figma側とコード側の基盤整備から着手します。

### 更新を運用として定着させる

対象を広げる前に、Figmaコンポーネントを変更した際の担当者、Code Connectを更新する担当者、生成コードをレビューする担当者を決めます。担当者名だけでなく、どの変更を契機に何を確認するかを手順として残します。

例えば、Variantを追加したらpropsとの対応を確認し、コードコンポーネントを移動したらマッピング先を更新します。トークン変更では影響する画面を確認し、表示テストの結果を残します。

この運用があることで、詳しいメンバーが不在でも同じ流れをたどれます。個人の経験に依存して差分を見つけるのではなく、変更時の確認を仕組みとして組み込むことが重要です。[AI活用ツール選定フレームワーク](https://start-link.jp/hubspot-ai/ai/ai-management/ai-tool-selection-framework)もあわせてご覧ください。

## よくある質問

Figma MCPの導入を検討するときに確認されやすい点をまとめます。利用条件だけでなく、既存プロジェクトへの適用方法やコード品質の考え方も押さえておきましょう。

### Q1. Figma MCPサーバーは無料で使えますか？

Figma MCPサーバー自体はオープンソースで公開されており、セルフホストであれば無料で利用できます。ただし、Figma Dev ModeへのAPIアクセスはFigmaのProfessional以上のプランが必要です。Claude CodeなどのAIツールを利用する場合は、それぞれの利用コストも確認します。

### Q2. 生成されたコードはそのまま利用できますか？

生成コードの品質は、Figmaの設計とCode Connectのマッピング精度に大きく依存します。実装の初期ドラフトとして利用し、エンジニアが既存コンポーネントとの整合性、アクセシビリティ、性能、レスポンシブ挙動を確認します。

見た目が合っていても、コードの責務や再利用方法が適切とは限りません。レビューで見つかった修正をFigmaやマッピングのルールへ戻すと、次の生成品質を改善しやすくなります。

### Q3. Figma以外のデザインツールでも同じ方法を使えますか？

Figma MCPサーバーはFigmaのAPIに特化しています。Adobe XDやSketchに対応したMCPサーバーは存在しないため、このワークフローではFigmaの利用が前提になります。

デザイン情報が複数のツールへ分散している場合は、先にどの情報をFigmaで管理するかを整理します。デザインシステムをFigmaへ集約すると、MCPが参照する基準を揃えやすくなります。

### Q4. 既存のコードベースへ導入するときは何から始めますか？

まず、新規コンポーネントや対応関係が明確な既存コンポーネントを対象にパイロット運用します。既存の全コンポーネントを一度にマッピングすると、重複部品の整理と整合性確認が同時に発生しやすくなります。

Figma側の部品、コード側の部品、propsの対応を確認し、生成結果をレビューします。そこで得た修正点を命名規則やマッピング手順へ反映してから、対象を段階的に広げます。

## まとめ

Figma MCPサーバーは、Figmaのデザイン構造、Variables、Code Connectの対応関係をAIへ渡し、デザインからコードへの変換を支援する仕組みです。デザインと実装の乖離を抑えるには、MCP接続だけでなく、Figma側の構造化、コードコンポーネントの整理、マッピングの更新、生成コードのレビューまでを一続きで設計する必要があります。

Code Connectは、Figmaコンポーネントと実装コードの対応を共有可能なルールに変えます。デザイントークンの同期は、色や余白を人が転記する運用から、変更を取得し、差分を確認して反映する運用への移行を支えます。一方で、アニメーション、アクセシビリティ、性能、リリース判断は人が担う領域です。

まずは、利用頻度が高く、対応関係が明確なコンポーネントから着手してみてください。

1. Figma側のAuto Layout、コンポーネント、プロパティを見直します。
2. 対応するコードコンポーネントを確認し、Code Connectへマッピングします。
3. 生成結果を人がレビューし、見つかった修正を設計ルールへ反映します。

この小さな流れを一度回し、運用できることを確認してからトークン同期や対象部品を広げると、自社の開発体制に合う導入範囲を判断しやすくなります。このテーマの全記事は[MCP連携ガイド](https://start-link.jp/hubspot-ai/ai/mcp-integration)でご覧いただけます。

CRMを活用した業務効率化やAIとの連携に関するご相談は、CRM特化型コンサルティングのStartLinkまでお気軽にお問い合わせください。

## あわせて読みたい

- [MCP×CRM×会計連携ガイド｜HubSpotとfreeeをAIでリアルタイム統合する方法](https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-crm-accounting-integration)
- [MCPサーバーの構築ガイド｜自社データをAIに接続するための設計と実装手順](https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-server-development-guide)
- [MCPエコシステム戦略｜8,600+サーバーの分類・選定基準とマルチMCP構成の設計原則](https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-ecosystem-strategy)

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpotゴールドパートナーのStartLinkが、HubSpot導入・AI活用・CRM整備・業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。

[サービス概要を見る](https://start-link.jp/service/hubspot-ai) [無料で相談する](https://start-link.jp/contact)

## 次に読む

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-61_fast_mode_model_support.png) Claude Codeのfast mode（/fast）｜対応モデル・料金・使いどころの判断基準](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-fast-mode)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-60_agent_view_session_states.png) Claude Code agent viewの使い方｜全セッションを1画面で管理](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-agent-view)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-58_goal_evaluation_loop.png) Claude Codeの/goalコマンド｜完了条件でAIを自律実行させる方法](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-goal-command)

## 記事の内容を、そのまま実務に落とし込みたい方向け

[無料で相談する](https://start-link.jp/contact) [資料をダウンロード](https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-figma-design-to-code#blog-download)

 株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化（ERP/CRM/SFA/MAの導入）」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、[無料のお問い合わせページ](https://www.start-link.jp/contact)より、お気軽にご連絡くださいませ。

###### 関連キーワード:

[AI](https://start-link.jp/hubspot-ai/tag/ai) [外部連携](https://start-link.jp/hubspot-ai/tag/外部連携)

## サービス資料を無料DL

## 著者情報

![7-1](https://start-link.jp/hubfs/7-1.jpg)

### 今枝 / Imaeda

 株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。  
 HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。

[StartLink](https://start-link.jp/)

### Service

- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [プロダクト](https://start-link.jp/sync)
- [採用情報](https://start-link.jp/recruit)
- [コンサルタントの方へ](https://start-link.jp/consultant-platform)

### Contact

- [問い合わせ](https://start-link.jp/contact)
- [資料ダウンロード](https://start-link.jp/download/service)
- [Syncナレッジベース](https://start-link.jp/sync/knowledge-base)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

(c) 2026 All Rights Reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "今枝 拓海",
    "url" : "https://start-link.jp/hubspot-ai/author/imaeda"
  },
  "datePublished" : "2026-03-14T03:52:36.000Z",
  "headline" : "Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド",
  "image" : [ "https://start-link.jp/hubfs/blog/screenshots/generated/gen_mcp-figma-design-to-code.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-figma-design-to-code",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://start-link.jp/hubfs/Start%20Link%20(1500%20x%20600%20px)%20(5)-1.png"
    },
    "name" : "株式会社StartLink"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Figma MCPサーバー自体はオープンソースで公開されており、セルフホストであれば無料で利用できます。ただし、Figma Dev ModeへのAPIアクセスはFigmaのProfessional以上のプランが必要です。Claude CodeなどのAIツールを利用する場合は、それぞれの利用コストも確認します。"
    },
    "name" : "Figma MCPサーバーは無料で使えますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "生成コードの品質は、Figmaの設計とCode Connectのマッピング精度に大きく依存します。実装の初期ドラフトとして利用し、エンジニアが既存コンポーネントとの整合性、アクセシビリティ、性能、レスポンシブ挙動を確認します。 見た目が合っていても、コードの責務や再利用方法が適切とは限りません。レビューで見つかった修正をFigmaやマッピングのルールへ戻すと、次の生成品質を改善しやすくなります。"
    },
    "name" : "生成されたコードはそのまま利用できますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Figma MCPサーバーはFigmaのAPIに特化しています。Adobe XDやSketchに対応したMCPサーバーは存在しないため、このワークフローではFigmaの利用が前提になります。 デザイン情報が複数のツールへ分散している場合は、先にどの情報をFigmaで管理するかを整理します。デザインシステムをFigmaへ集約すると、MCPが参照する基準を揃えやすくなります。"
    },
    "name" : "Figma以外のデザインツールでも同じ方法を使えますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "まず、新規コンポーネントや対応関係が明確な既存コンポーネントを対象にパイロット運用します。既存の全コンポーネントを一度にマッピングすると、重複部品の整理と整合性確認が同時に発生しやすくなります。 Figma側の部品、コード側の部品、propsの対応を確認し、生成結果をレビューします。そこで得た修正点を命名規則やマッピング手順へ反映してから、対象を段階的に広げます。"
    },
    "name" : "既存のコードベースへ導入するときは何から始めますか？"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-figma-design-to-code#article",
  "@type" : "BlogPosting",
  "author" : {
    "@id" : "https://start-link.jp/#founder"
  },
  "dateModified" : "2026-10-20T01:23:16+09:00",
  "datePublished" : "2026-03-14T03:52:36+09:00",
  "headline" : "Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド",
  "image" : "https://start-link.jp/hubfs/blog/screenshots/generated/gen_mcp-figma-design-to-code.png",
  "isPartOf" : {
    "@id" : "https://start-link.jp/#website"
  },
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/mcp-integration/mcp-figma-design-to-code",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "speakable" : {
    "@type" : "SpeakableSpecification",
    "cssSelector" : [ ".blog-section h2", ".blog-section p:first-of-type", ".blog-section blockquote" ]
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://start-link.jp",
    "name" : "ホーム",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai",
    "name" : "ブログ",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai",
    "name" : "AI活用",
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai/mcp-integration",
    "name" : "MCP連携",
    "position" : 4
  }, {
    "@type" : "ListItem",
    "name" : "Figma MCPでデザインからコード変換を仕組み化する実践運用ガイド",
    "position" : 5
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#organization",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "JP",
    "addressLocality" : "中央区",
    "addressRegion" : "東京都",
    "postalCode" : "104-0061",
    "streetAddress" : "銀座1丁目12番4号 N&E BLD.6F"
  },
  "alternateName" : "StartLink Inc.",
  "award" : [ "HubSpot Gold Solutions Partner（HubSpotゴールドパートナー、2026年4月認定）" ],
  "contactPoint" : [ {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja" ],
    "contactType" : "customer support",
    "url" : "https://start-link.jp/contact"
  }, {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja", "en" ],
    "contactType" : "sales",
    "url" : "https://start-link.jp/contact"
  } ],
  "description" : "「AI × HubSpot」をコンセプトに掲げるHubSpotゴールドパートナー（Gold Solutions Partner、2026年4月認定）。HubSpotマーケットプレイスに自社アプリ（Sync for freee / Notion / Money Forward / Chatwork）を公開するアプリ開発企業であり、HubSpot/Salesforce知見とAI活用を組み合わせたCRM構築・移行・最適化・AIエージェント/PoC支援まで一貫して提供する。",
  "founder" : {
    "@id" : "https://start-link.jp/#founder",
    "@type" : "Person",
    "jobTitle" : "代表取締役",
    "name" : "今枝 拓海",
    "sameAs" : [ "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.facebook.com/takumiIma" ]
  },
  "foundingDate" : "2024-09-04",
  "hasCredential" : {
    "@type" : "EducationalOccupationalCredential",
    "credentialCategory" : "certification",
    "name" : "HubSpot Gold Solutions Partner",
    "recognizedBy" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    }
  },
  "image" : [ "https://start-link.jp/hubfs/startlink-ai-agent.jpg", "https://start-link.jp/hubfs/startlink-aiorg.jpg" ],
  "knowsAbout" : [ "HubSpot CRM", "HubSpot Implementation", "HubSpot導入支援", "CRM構築", "AI活用", "HubSpot連携アプリ開発", "Salesforce to HubSpot Migration", "Generative AI Integration", "AI Agent Development", "Revenue Operations", "Marketing Automation", "freee Integration", "Notion Integration", "Money Forward Integration" ],
  "legalName" : "株式会社StartLink",
  "logo" : "https://start-link.jp/hubfs/startlink-logo.png",
  "mainEntityOfPage" : "https://start-link.jp/",
  "memberOf" : {
    "@type" : "ProgramMembership",
    "hostingOrganization" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    },
    "membershipNumber" : "Gold Tier",
    "programName" : "HubSpot Solutions Partner Program"
  },
  "name" : "株式会社StartLink",
  "sameAs" : [ "https://www.youtube.com/@startlink-hubspot", "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.linkedin.com/company/108100307/", "https://www.facebook.com/takumiIma", "https://www.facebook.com/profile.php?id=61566874764985", "https://prtimes.jp/main/html/searchrlp/company_id/149669", "https://app.hubspot.com/ecosystem/46046172/marketplace/solutions/startlink" ],
  "taxID" : "8010001248134",
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#website",
  "@type" : "WebSite",
  "inLanguage" : "ja",
  "name" : "株式会社StartLink",
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM導入", "HubSpot" ],
  "description" : "150社以上の実績を持つHubSpotゴールドパートナーが、業務フローに合わせた設計から構築・本番稼働まで一貫支援。",
  "name" : "HubSpot導入・構築支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot導入・構築支援",
  "url" : "https://start-link.jp/service/hubspot"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-ai",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM最適化", "AI活用" ],
  "description" : "HubSpotを軸に業務要件に沿った設計改善とAI連携活用を包括支援。",
  "name" : "HubSpot AIコンサルティング",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot AIコンサルティング",
  "url" : "https://start-link.jp/service/hubspot-ai"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-training",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "研修", "HubSpot" ],
  "description" : "HubSpotの概念・基本操作からAI活用ノウハウまで、社内浸透のための研修を提供。",
  "name" : "HubSpot研修・レクチャー支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot研修・内製化支援",
  "url" : "https://start-link.jp/service/hubspot-ai/training"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-sf2hs-replace",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM移行", "データ移行" ],
  "description" : "Salesforce/HubSpot双方の思想とデータモデルを理解した移行設計とHubSpot側CRM開発を実行。",
  "name" : "SalesforceからHubSpotへのリプレイス支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "SalesforceからHubSpotへのリプレイス支援",
  "url" : "https://start-link.jp/service/salesforce-hubspot-replace"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-bi",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "AI活用", "経営管理" ],
  "description" : "複数システムのデータを統合し、毎朝のAIブリーフィングなど経営の意思決定を加速する仕組みを構築。",
  "name" : "Claude Codeによる経営データ活用支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AI経営管理支援",
  "url" : "https://start-link.jp/service/claude-code/business-intelligence"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-content",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "コンテンツマーケティング", "AI活用" ],
  "description" : "キーワード戦略からSEO記事制作、CMS公開まで、AIを活用したコンテンツマーケティングを自動化。",
  "name" : "Claude Codeによるコンテンツマーケティング支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AIコンテンツ制作支援",
  "url" : "https://start-link.jp/service/claude-code/content-marketing"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-freee",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとfreee会計・freee請求書をシームレスに連携。取引先の同期から請求書作成まで、バックオフィスの業務を自動化するHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "freee取引先をHubSpotに自動同期", "HubSpotからfreee見積書・請求書を作成", "取引データをfreee会計に自動登録", "月次請求・更新処理に対応", "商品項目・品目・部門・タグ情報の連携" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/apps/sync-for-freee-bystartlink",
  "name" : "Sync for freee",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "softwareHelp" : {
    "@type" : "WebPage",
    "url" : "https://start-link.jp/sync/knowledge-base/freee/basic-steps"
  },
  "url" : "https://start-link.jp/sync/freee"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-notion",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotのCRMレコードとNotionのページ・データベースを接続。HubSpotの画面から離れずにNotionのすべてにアクセスできるHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "CRMカードからNotionページの作成・閲覧・編集", "NotionデータベースをCRMタブにテーブル表示", "4つのワークフローアクションで自動化", "コンタクト・会社・取引・チケット・サービス・プロジェクト対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-notion-bystartlink",
  "name" : "Sync for Notion",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "ページ・DB合計50件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Professional",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/notion"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-moneyforward",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとマネーフォワード クラウドを連携。取引情報から見積書・請求書を自動作成し、取引先・品目の同期や継続請求に対応するHubSpot連携アプリ。",
  "featureList" : [ "取引（Deal）から見積書・請求書を自動作成", "会社情報とマネーフォワード取引先の同期", "商品項目・品目マスタの連携", "月次・固定回数の継続請求に対応（Professionalプラン以上）", "合算請求（Enterpriseプラン限定）", "前受請求（一括請求・月次計上）（Enterpriseプラン限定）", "原価登録（MF会計への仕訳登録）で案件別の原価・粗利を可視化（Enterpriseプラン限定）", "取引レコードにCRMカードで連携ステータスを表示" ],
  "installUrl" : "https://ecosystem.hubspot.com/ja/marketplace/listing/sync-for-moneyforward-bystartlink",
  "name" : "Sync for Money Forward",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/moneyforward"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-chatwork",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとChatworkを連携。ワークフローからChatworkのルームへ通知を送り、CRMカード上で最新のやり取りの確認と返信ができ、紐付けたルームの新着メッセージをHubSpotのノートとして自動で記録するHubSpot連携アプリ。",
  "featureList" : [ "ワークフローアクション「Chatworkに通知」（取引・会社・コンタクト・チケット対応）", "送信先ルームIDとメッセージ本文にHubSpotのプロパティを差し込み", "取引・会社・コンタクトとChatworkルームの紐付け（全プラン無制限）", "CRMカードにルームの最新100件のメッセージを表示（Professionalプラン以上）", "CRMカードからChatworkへメッセージを送信（Professionalプラン以上）", "紐付けたルームの新着メッセージをHubSpotのノートへ自動記録（Enterpriseプラン限定）", "引用や装飾を、HubSpotのノートでも読みやすい見た目のまま記録", "OAuth接続とAPIトークン接続（SAML/SSO環境向け）に対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-chatwork-bystartlink",
  "name" : "Sync for Chatwork",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "通知 月10件まで・ルーム紐付け無制限",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "通知無制限・CRMカードで最新100件の表示とメッセージ送信",
    "name" : "Professional",
    "price" : "3000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "Professionalの全機能＋メッセージ同期（30分ごと）",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/chatwork"
}
```