Figma×MCPで デザインシステム開発を加速させたい

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

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

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

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

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

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

• https://github.com/GLips/Figma-Context-MCP/

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

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

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

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

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

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

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

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

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

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

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

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

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

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