《Figmaと運用 Vol.3》LLMの壁をどう越える？ Ubieに学ぶFigma×デザインシステム×MCP

Ubie株式会社では、Figmaを活用して、デザインシステム「Ubie Vitals」のデザインリソースの作成・管理を行っています。それと並行して、AIを用いた効率的な実装フローの構築にも、いち早く取り組んできました。しかし、LLMには、固有の「文脈」を理解するのが苦手な側面があり、AIとデザインシステムの連携は、AI実装を進めるうえでの大きな課題となります。本記事では、この問題を解決するMCPの構築方法や、実装精度を高めるデザインシステム・Figmaデータの作成ポイントなどを深掘り。Ubieの試行の足跡から、「自動実装」の未来が見えてきます。（「Web Desigining 2025年8月号」より抜粋）

プロフィール

デザインシステムの意図を、どのようにAIに伝えるか

─Ubieのデザインシステム「Ubie Vitals」は、優れた視認性などで発表当初より話題になりました。デザインリソースはFigmaで作成・管理されているとのことですが、Figmaを選んだ理由はありますか？

渡辺智保子（以下、渡辺）　Ubieのプロダクトは、医師など、デザイナー以外のメンバーもUIの設計や修正に関わります。そのため、多人数で共同編集ができることが、必須の条件でした。また、コンポーネントをベースとしたデザインツールである点が、「UI」をデザインする私たちの感覚にあっていたことも理由として大きいです。

─Figmaのコンポーネントベースの設計思想は、AIコーディングとも馴染みがあるように思いますが、実装の自動化の試みは早くから行われていたのですか？

江崎広太（以下、江崎）　 プロダクト開発はスピードが求められる側面もあり、業務の効率化は常に課題です。そのため、AIを通してデザインシステムを活用する動きは全社的にありました。一方で、Web／アプリに特有の課題もあり、AIコーディングについては、最初からうまくいったわけではありません。というのも、LLM（※1）は汎用的な処理には長けている一方で、独自の設計思想やデザインの文脈を汲み取るのは苦手な面があり、単純なAI利用では、理想的な開発体験を得ることは難しい状況でした。

渡辺　　デザインデータから独自の実装をしてしまうなど、「Ubie Vitals」のコンポーネントやトークンの情報を生かせていないことは大きな課題でしたね。

江崎　　そこで私が、当時注目を集め始めていたMCP（※2）サーバを試作してみたところ、これがことのほかうまくいったんです。ここから、本格的にチームを組んで「Ubie Vitals MCP」の開発を行い、現在ではかなり高い精度の実装結果を得られるようになりました。

渡辺　　加えて、構造を意識したレイヤー名をつけるなど、Figmaデータのつくり方も実装精度に影響を与えることがわかってきました。まだ完全な自動実装には至っていませんが、その手応えは感じています。実装精度を高める試みを続けると同時に、今後はアクセシビリティ領域にもAI活用の幅を広げていくことを検討していきたいです。

（※1）大量のテキストデータで学習し、言語処理を得意とするAIモデル。通常のテキスト作成のほか、コード生成・レビューなどプログラミング領域でも活用される。
（※2）「Model Context Protocol」の略で、AIが外部のデータソースやツール（ここではデザインシステム）と連携し、より高度な機能を実現するためのプロトコル／仕組み。

【Figma×デザインシステム×MCP】近づく「自動実装」の未来

自動実装の実現には下準備が重要！　AIを生かすためのFigmaデータのつくり方や、MCPの導入方法を考えます。

Figmaを活用したデザインシステムの運用

①Ubie VitalsのデザインリソースはすべてFigmaで管理

デザインシステムのデザインリソースの作成・管理にFigmaを活用。現在は、コンポーネントを管理する「Ubie UI」、カラーやフォント、スペーシングを管理する「Design Tokens」、アイコン類を管理する「Icons」の3ファイルで構成されています。

②プロダクト横断的な「基盤」チームが発足

Ubie Vitalsは、2025年よりUbieの事業基盤の一つとして位置付けられ、事業全体を横断的に支える「基盤」チームが、整備・運用を担うことに。各プロダクトチームとの意見交換にはFigmaのコメント機能を活用。

③コンポーネントはバリアント機能で展開。プラグインを使って一覧管理も

コンポーネントの管理には、プラグイン「Propstar」が便利。一覧にしたいコンポーネントを選択し、「Propstar」を起動するだけで、サイズ、カラー、状態などの組み合わせバリエーションが一覧表で作成されます。

④命名規則は使う人に馴染むようにする

コンポーネントの展開は、サイズ・バリエーション・状態の順番で定義。また、カラーのCSS変数などは、実装を担当するエンジニアが覚えやすく、直感的に使えるよう、色名を含めるルールを採用しています。

⑤AIコーディングの課題：AIは文脈を汲み取るのが苦手

「AIに、単純にデザインシステムを参照するよう指示するだけでは、Ubie Vitalsを用いた実装は難しい状況でした。また、stackやflexなど、レイアウトの意図が反映されにくいことも、課題の一つでした」（江崎さん）

MCPを活用し、AI実装の精度を高める

⑥MCPを通して、デザインシステムの情報を実装に反映させる

AIにUbie Vitalsの情報を効率的に渡すため、Ubie VitalsのReactコンポーネントなどの情報を取得する「Ubie Vitals MCP」を開発。Figmaが提供している「Figma MCP」とあわせて活用することで、Figmaデータの情報をUbie Vitalsにあてはめて実装できるように。

⑦プロンプトは各種データの場所を指示するだけでOK

Cursorで入力するプロンプトは、下記3点を簡潔に指示。MCPを介することで、内容の説明や意図など細かい情報がなくても、想定に近い実装が可能になります。

●実装するデザインデータ（Figmaデータ）を指定　
●Ubie UI（Ubie Vitals）を使用するよう指示
●Ubie Vitals MCPの場所を補足

⑧デザインシステムの充実が実装精度に影響

元データと実装結果を比べると、マージンなど細かな違いはありますが、かなりの精度で再現されていることがわかります。一方、ステップバーなど、Ubie Vitalsにない要素については、再現度が落ちる結果に。

「自動実装を目指す上では、デザインシステムの成熟は必須の要件と言えそうです。一方、自動実装のために無秩序にコンポーネントを増やすことは、デザインシステムとして好ましくない面もあります。何をデザインシステムとして定義し、不足する場合にどのように補助的なコンポーネント類を用いるかなどは、人が議論し、整備していく領域だと考えています」（江崎さん）

⑧レイヤー名を考慮することで実装精度が格段にアップ

「Figmaデータのレイヤー名に、StackやFlexといったレイアウトの意図や、Subtitleのような要素の意味を入れると、実装精度が向上することがわかってきました。エンジニアからフィードバックをもらいながら、デザインデータの作成についてノウハウを蓄積中です」（渡辺さん）

＜まとめ＞
①MCPを活用することで、自動実装の実現が視野に
②MCPのもととなるデザインシステムの充実がマスト
③デザイナーとエンジニアの対話がますます重要に

取材・文：原明日香（アルテバレーノ）
※本記事は「Web Desigining 2025年8月号」より抜粋しています。