---
title: Figma×MCPで デザインシステム開発を加速させたい
tags: 
author: [あんど](https://www.docswell.com/user/ampersand_xyz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE9X58R473.jpg?width=480
description: https://bitkey.connpass.com/event/352578/ で発表した資料です
published: May 12, 25
canonical: https://www.docswell.com/s/ampersand_xyz/KV13N3-2025-05-12-200505
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE9X58R473.jpg)

Figma×MCPで
デザインシステム開
発を加速させたい
みのるんさんとMCPの&quot;今&quot;をキャッチアップ！試した事例と学びを語り合うLTラッシュ
2025-05-12
ストックマーク株式会社 安藤真衣子（あんど@ampersand_xyz)


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE82Y8WVED.jpg)

自己紹介
技術広報・デザインエンジニア
安藤 真衣子
あんど@ampersand_xyz
ストックマーク株式会社
自然言語処理・情報収集基盤・1000億パラメー
タ規模のLLMモデルや情報構造化サービスとかを
作っている会社です
情報構造化サービスの新規開発事業でUIの設計や
開発作業を行っています


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LEL24RNR7R.jpg)

デザイン
システム
開発やる
こと多す
ぎ問題
変数の設計・定義
コンポーネントの設計・実装
（前段に色々あるが）実際にFigma
のファイルに落とし込む作業とし
てやること自体は単純に”これだ
け”とも言える
が、チームとして問題なく運用でき
るものをちゃんと・汎用や独自の
コンポーネントを網羅したものを
作るとなるとかなりの作業量が必
要になる


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JM8KRXPJW.jpg)

デザインシステム開発は大変だが…
かといって、分業が簡単にできるのか？
というとそういうわけでもない…
ゼロイチの開発の場合、分業体制が取れるだけのポリシーを
確立するのが先に必要というジレンマが発生する


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJR5XRNYE9.jpg)

なんだかにわかに話題になっている


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PEXK6RN4JX.jpg)

Figma用のMCPサーバが公開されていたので使わせていただく
https://github.com/GLips/Figma-Context-MCP/


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3EK51RNPJD.jpg)

前評判がすごい
自動でコンポーネントが生成できるようになるとか
自動でCSSが生成できるようになるとか
そういう話、ホントなの…？
失職…？


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L73KQ8V475.jpg)

このMCPサーバができること
は、Figmaの構造を読み取る
こと
登録されているtoolsからどのようにAPIと連携をして
いるのかを確認。
今まではLLMにFigmaの構造情報をAPI経由で渡そうと
するのはなかなか億劫だったが、MCPを介すること
でFigmaとの連携を確実に行うことができるように
なったことがよく分かる


# Page. 9

![Page Image](https://bcdn.docswell.com/page/87D39M85JG.jpg)

ここに動きを試すのにちょうどいい感じのFigmaコンポーネントがある


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJP4ZR8D78.jpg)

生成させてみよう
cursorでMCPサーバを用いて
コンポーネントを生成してみ
る
参照コンテキストに既存の実装を参照させることでか
なり良いコードが生成された。
（見えてきたな…失職…）


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2EVXWRNGJQ.jpg)

Storybookで動作確認
LGTM！！
下のカードはマウスホバーをしてシャドウがちゃんとついている様子


# Page. 12

![Page Image](https://bcdn.docswell.com/page/57GVDM5D7L.jpg)

この部分だけ見ると凄く良さそうに見えるが…
Figmaを用いたデザインシステム作成で
本当に大変で解決したいのは
この部分の話だけではない
マジで大変＆しんどいのは変数や実装と足並みを合わせる作業だと
個人的には思っています


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EQ61RZXEP.jpg)

Figmaで管理してるVariablesをコードと楽に同期したい。したくない？


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KJ44R832J1.jpg)

挑戦してみた結果
VariablesのAPIは
エンタープライズプラン以上じゃないと
使えないので駄目でした…
MCPで解決できる話ではない


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LE14Q21KEG.jpg)

余談
構造で判断できるようにし
ておけばFigmaのvariablesを
LLMにそれらしく認識させ
ること自体はできる
検証をしていたときLLMのこの挙動に気づか
ず、非エンタープライズプランなのにvariables
がAPIから取得できていると思っていたためメ
チャクチャ困惑した


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GEWXMR8P72.jpg)

Figmaと実装の連携の現状は概ねこんなかんじ (非エンタープライズプラン）
内容読み取りにより、正確な構造をcodeと協調させられる
コードの生成はもちろん、codeと内容を対比して作成するCSS変数を提案させたりとか具体的なことも
かなりの精度で行えるようになった。
０→１ ではなく 0.5 → １の作業がある程度やりやすくなるという認識がちょうどいいかも
だが、そもそもある程度ちゃんと構造を整えたFigmaが必要
おそらく構造をきちんと作成していない”見た目だけ”のファイルはうまくいかないと思われる


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47Z6QR8673.jpg)

Figmaと実装の連携の現状は概ねこんなかんじ (非エンタープライズプラン）
codebaseとfigmaを比較してメンテナンスすべき内容を列挙
できる
反映は今のところ手作業になるが、それでも脳の負荷はだいぶ下がるので、これからバリバリ使ってい
きたい
エンタープライズプラン使えないとやれることは限られそう
使用可能ならマジでデザインエンジニアリング生産性が飛躍的に向上しそうという気配がする
とりあえず変数を更新するためのtoolsは手元に作成はした…


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YJ626RPL7V.jpg)

Figma×MCP まとめ と その他の所感
開発・保守ビリティはめちゃくちゃ上がりそう
まだチーム開発の実践に投入できてはいないし、エンタープライズプランを使えるわけでもないが、
それでもFigmaで定義 = コード実装 と作業をほぼ同義にできるなら、Figmaに投資する時間をかなり増やしても良くなる
ハルシネーションが発生することを踏まえないと危険
Figmaの内容やデザインリソースについて尋ねるとTailwindをベースにした知識で回答をしてくることがある（Claude 3.7）
これはLLMを使う上でのリテラシーが求められる話
APIに対する知識とtoolsを読めないなら使うべきではないかも
MCPの操作でなんらかのデータを壊した、という話もちょくちょく耳にするようになってきた。
今回MCP経由でFigmaの操作を試みていて感じたこととして、Write系の操作は細心の注意をはらって行うべき操作だなと感じる


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GJ5268KMJ4.jpg)

MCPはMCP Serverだけではなく、
どのようなモデルと組み合わせるかも今後注目したい
ここにある
LLMモデル
ドメイン特化型モデルを
組み合わせることで
無限の可能性が拓けるかも？


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LE3KQ8Z9E5.jpg)

Thank you!
懇親会でお話しましょう！


