はじめに
みなさんこんにちは。株式会社インプルの岩崎です。
本日は、MCPでデザインを正しく実装するためにはどんなことに気をつければいいのかの話題です。
Figma MCPとは
MCPとは、 Model Context Protocol の略称で、アプリケーションが LLM にコンテキストを提供する方法の一つです。そのFigma版が、Figma MCPというわけです。
Figmaでデザインしたwebページやアプリケーションは、MCPを繋げば簡単にエディターで主にcssを実装させることができます。
これまでの記事
さて、前回はAntigravityとFigmaをMCPで繋げて、デザインが実装できることを紹介しました。まだご覧になっていない方は、ぜひご覧ください。
MCPとは何？という方は、こちらの記事で解説していますので、ぜひご覧ください。また、こちらではCursorとの接続方法についても紹介しています。
MCPを繋げればOK・・・？ではない。
さて、上記2つの記事では、MCPの素晴らしさについてとても語りましたが、MCPを繋げれば何でもかんでも綺麗にデザインは実装できるわけではありません。
それはエディターのLLMが原因だったり、デザインが原因だったり、伝え方が悪かったりさまざまです。
この記事では、MCPでデザインしようとしたら失敗した事例をまとめておきますので、どうすればうまくできたのか、改善策も含め、ご覧ください。
忠実に実装するためのTips
今回のパターンは、プロトタイプでできていたUIに対して、デザインを実装する過程でのTipsです。
そのため、ゼロベースで作らせたら今回のような問題は起きないかもわかりません。いずれにしろ、LLMにしっかりと情報を伝えることは大切ですので、参考にしてみてください。
MCPでやり取りされるデータ
まず、FigmaとAIを繋いだ時、どのようなデータがやり取りされるのでしょうか？
LLMは、ユーザーが入力したURLを使って、情報をMCPサーバーから引っ張ってきます。その際、引っ張れる情報は、MCPサーバーから与えられる情報のみです。その情報には、ノード構造(JSON)やスタイル(JSON)、テキスト(JSON)、画像URLなどがあります。
これらの情報を使って、Figmaで実装されたデザインをLLMはコードを書き換えて実装していくわけです。chatGPTがわかりやすい図を作ってくれました↓
さまざまな情報があるMCPだからこそ・・・。
Figmaのデザインを実装する時は、LLMに実装したいデザインのURLを送ってあげることで、MCPサーバーから該当デザインの必要な情報を引っ張ってくることができます。
そのため、Figmaにはプロンプト例を用意してくれており、コレをこのままコピぺして送れば、綺麗にデザインされるだろうと思いますよね！
しかし、うまくできない・・・。
どこか似てるけど、何か違うぞ？というデザインができた方もいるのではないでしょうか？（そうでない人は、きっとLLMが賢かったのです！）
先ほども言った通り、MCPサーバーからはノード構造(JSON)やスタイル(JSON)、テキスト(JSON)、画像URLといった、デザインに関する様々な情報が与えられますが、その情報をどのように使うかは、LLM次第です。
ですから、この中で画像URLだけを情報として使ったLLMは、きっと上記のような、どこか似てるけど、何か違うぞ？というデザイン。が出来上がっているはずです。これが、うまくデザインが実装されない正体だと考えています。
一方、JSONデータから実装できるのであれば、Figma上で表示されているレイアウトやスタイルの要素を、正しく反映させることができます。なので、LLMにはそれを使って実装をしてね、と指示をしてあげると、この問題は解決できるはずです。
先ほどのFigmaのプロンプトに以下の一言を追加すると、JSONを積極的に読んで実装をしてくれるはずです。
これらの1個のデザインをFigmaから実装して。
**実装する際はJSONを参考に忠実に再現すること。**
@https://www.figma.com/XXXXXXX/XXXXXXXXXXFigmaのデザイン不足で・・・。
今回は、プロトタイプからデザインの実装を行いました。
そのため、プロトタイプでは不要と判断され、デザインでは削除されてしまった項目がありました。また、項目を入力したら追加ボタンで追加されるはずなのに、デザインでは追加ボタンがなかった、という項目もありました。
これにより、UIの項目のURLを取得しても、正しく実装できなかったり、プログラムが壊れてしまったりします。
未作成のUIを実装しようと、変なところにボタンができたり、ボタンがないことにより機能が動作しなかったり。。。さまざまなトラブルが発生します。
これは、完全なコミュニケーション不足です・・・。
デザイナーとエンジニアの間、さらには間の連携をしてくれる調整役の最低でもこの三者間で、 ツールの動作や流れは共有しておく必要がありますね。そうすることで、UIの抜け漏れなく実装までたどり着くことができます。
MPCで実装する前には、しっかりと全てのパーツがあるか、確認してから進めるのが良いと思います。
一気にできる魔法みたいな仕組みだけど・・・。
また、MCPと聞くと、やはり魔法のようなツールなので、ページ全体のリンクを取得して実装させれば、全て完璧にできる！と思われるかもしれませんが、複雑なページやデザインになる程、案外そうはうまくいきません。
先ほども紹介したように、デザインが不足していたり、デザインを実装しても裏側の機能と連携する部分で、どこかしら不具合が出てきます。これは、AI（LLM）に任せる以上、どこかはうまくいかない部分も出てくるので、仕方のないことではあります。
このミスを減らすためには、パーツごとに実装していくことが大事です。
例えば、実装したいセクションを複数選択することで、いくつかのURLには分かれるものの、Figmaのデザインを一括で送信することができます。
また、この時にグループ化をしておくことで、一つのURL・デザインとして送信することもでき、こちらの方がまとまりを持ったデータとしてLLMに実装させることができます。（おそらく実際のデザインは、オートレイアウトなどを使ってすでにまとまりを持って作られているはずなので、大丈夫だと思いますが笑）
さらに、プロンプトにデザインの動作を追記しておくと、プログラムが壊れにくくなります。例えば、下記のような感じです。
- デザインにある「送信ボタン」を押すと、XXと連携し、送信されるように実装してください
- デザインにある「ドロップダウン」をクリックすると、すでに実装されているXXと連携してOOな項目が出てくるように実装してください。こうすることで、デザイン以外のプログラムも壊さず、忠実な実装をさせることができます。
おわりに
いかがだったでしょうか？
このTipsを使っていくことで、Figma MCPをより賢く使い、デザインを実装させることができます。今後使っていく中で、さらにあった方がいいTips集があれば、また紹介しようと思います。
ご覧いただき、ありがとうございました。