SREホールディングス株式会社でエンジニアをしております、加藤です。世の中の技術進化は目まぐるしく、特に開発業務ではAIの活用が当たり前になりつつあります。その中、画面デザインでよく使われるFigmaのMCPが公開され、個人的にかなり注目をしております。この記事では、Figma MCPを実際に使用した所感をまとめていこうと思います。
- Figma MCPの導入を検討している方
- Figma MCPを使ってみたい方
MCPとはModel Context Protocolの略で、生成AIが外部サービスや他AIと連携するためのルールのようなものです。ChatGPTに聞いてみたところ「AIが今、何について話しているかをちゃんと覚えておくためのルール」とのことでした。
Figma MCPの操作の流れは以下の通りです。今回はAIエージェントとしてCursorを使用しました。
- ユーザーがAIエージェントに「このデザインをHTML・CSSにして」と指示を出します。
- 指示を受けたAIエージェントはその内容を解釈して、指示を出します。
- Figma MCPは指示に対してFigmaが理解できるようにAPIを投げ、データを取得します。
- AIエージェントは手順3のデータを取得し、HTML・CSSを生成、”私が作成しました”顔をしてユーザーに提示します。
ここからは私が実際にサンプルのWebページを作成して、それに対してFigma MCPを使用してみた結果について記載していきます。環境構築方法についてはググればすぐに出てくるのでそちらを参照してください。
今回使用したサンプルWebページはこちら。（※デザイナーではないのでセンスは…）
中身についてはあったら面白いかもと思ってたりもしますが、ほとんど適当に記載しています。配色についてはColor Huntを参考に
- Base: F2EFE7
- Primary: 9ACBD0
- Accent-Support： 48A6A7
- Accent-Deep: 2973B2
で設定しました。
とりあえず1ページ作成
まずはお手並み拝見ということで、この1ページをHTML・CSSのコードに置き換えてくださいと指示してみました。指示するときはFigmaデザインのリンクを発行して貼ればOKです。
無事実行が完了したので、早速HTMLを表示させると…わくわく
なんか…違う…！！！
とりあえず一枚作ってみた感想としては
⭕️良い所
- 雰囲気は合っている
- よくあるレイアウトになっている
- ボタンに影がついている
❌ダメな所
- 画像が読み込まれていない
- Accent-Supportが消えている
- 画像のalt属性がlabelとして誤認識されている
- ホームボタンが勝手に追加されている
- 背景色が消えている
だいぶ出力したいデザインとは異なってしまったため、何度かエージェントに修正依頼を投げて近づけてみました。5回くらい投げてこれが限界と思ったデザインがこちら
初回に比べるとだいぶマシにはなりましたが、「ホーム」が消えなかったり、「WELCOME」に画像を入れてくれなかったりと、完全再現は難しいと思いました。ここまで来ると、自分で手直しした方が早いかもしれないです。特に画像や図形が重なり合っている部分は誤認識されやすいと思いました。
一方で、ログインボタンに関してはFigmaのコネクション設定を別ページ遷移としていたのもあり、navタグで作成されていて、ホバー時に色が変わる実装がされていてのはGoodでした。
ちなみにCSSはpxによる固定値になっていました。またHTMLではなくてReactで作らせると、Appコンポーネントにベタ書きされる形になります。ここは指示を出せば構成を変えてくれるので問題はなさそうです。
ReactのComponent指示
次にFigmaのLayerを細かく分けて、Componentとして作成した場合どうなるか試してみました。実行結果のヘッダーComponentはこのようになっていました。
左側のアクセントは無くなっていますが、概ね合っていました。初めは全Componentを一気に作ろうとして失敗してしまったので、1つずつ作ると良さそうです。何にでも言える事だとは思いますが、大きい単位よりも小さい単位で実行した方が精度は良い気がします。
レスポンシブ
ちなみにCSSはpx固定値になっていました。
前述のような指摘があると、気になりますよね。今ではスマホでの閲覧が当たり前となり、モバイルファーストが基本です。レスポンシブ対応ができないと、そもそも話にならないと思います。そこで今回は、作成したページに対して「pxを使わずviewportに応じて変化するように」と指示を出しました。その結果は
しっかりレスポンシブ対応されていました。（デザインが元のものとだいぶ違うのは目を瞑ってください…）画像では伝わらないのですが、スクリーンサイズを徐々に変えると、全体のレイアウトが自動で調整されていくのが確認できました。個人的にここがFigma MCPですごく良いと思ったポイントです。また、px指定からvw指定になるだけではなく、@mediaでしっかりとスマホ用のデザインに切り替えてくれました。しかも、スマホ用のデザインは用意していなかったにもかかわらず、よしなに調整してくれたのは、工数削減的な観点でもGoodだと思いました。
イメージで色を変えてみた
このページを〇〇色を使って〇〇風にしてという指示を出してみました。これができるなら、イメージちょっと変えたパターンを見てみたいという時に便利と思ったので、試してみました。今回は「赤茶色を基調として、アクセントカラーは濃い赤を使う。フォントは筆文字のようなものを使用して和モダン風なデザインにして」と指示してみました。その結果
思っていた以上に和モダン！！！（というか和風）な仕上がりになりました。色だけでなく、レイアウトも変化していますね。こういう使い方も結構アリなのではと思いました。
与えた画像を元に別ページを作る
前段でAをBに変化させることが得意ということが分かったので、これを元に別ページを作成という指示を出してみました。具体的には「このFigmaデザインを元に名前、出身地、好きなゲーム、プレイスタイルを入力するようなプロフィール入力フォームページを作って」と指示を出してみました。その結果
デザインを踏襲しつつ、いい感じにフォーム画面を作成してくれました。しかも、指示していないバリデーションを自動でつけてくれていました。
複数ページを作る
最後に今まで使用していたサンプルページに複数ページを追加して、それぞれに遷移先を設定してました。
少しわかりにくいですが、それぞれ以下のような画面構成になっています。
- Home画面のログインボタン→ログイン画面
- ログイン画面のログインボタン→ヘッダーのログインボタンがゲストに変化→Home画面
- ログイン後のHome画面のおバカ人狼ボタン→おバカ人狼画面
- おバカ人狼画面のゲームスタートボタン→ゲーム画面
その結果
- Home画面のログインボタン→ログイン画面
- ログイン画面のログインボタン→ヘッダーのログインボタンがゲストに変化→Home画面
これらについては正しく制御されていました。PropsでType定義もされていましたが、状態としてはやはりuseStateを用いていました。
- ログイン後のHome画面のおバカ人狼ボタン→おバカ人狼画面
- おバカ人狼画面のゲームスタートボタン→ゲーム画面
これらについてはそもそもページを作るのを忘れられていました。再度指示を出しても間違った遷移になってしまい、やはり一気に作成依頼をするとかなり精度が落ちる気がします。
ここまで読んでいただきありがとうございます。いかがだったでしょうか？私自身Figma MCPに関するいくつかの記事を見て「すごい！」と感じていたのですが、実際にやってみるとそこまででもないなというのが正直な感想です。まだまだAIを使いこなすには未熟なところもあるので、やはり使いこなすにはプロンプトエンジニアリングとFigmaの正しい作法を身に付けることが重要だと感じました。今回の検証を通して、Figma MCPについては以下のような特徴が見えてきました。
- デザインのレスポンシブ化は得意というか便利
- 学習したデザインからか”よしなに”やってくれる部分が多い
- 細かい単位、特にcomponentで作成すると精度が高い、逆に一気にお願いされると弱い
- ベースとなるデザインを1枚作ってから、それに倣う形で指示させると良い
技術の進歩が早すぎるので、つい誰かの書いた記事を鵜呑みにしがちですが、自分で確かめることの大切さを改めて実感しました。流れに飲まれないよう、しっかり鍛錬していきたいですね。今回はデザインToコードだったので、コードToデザインができるようになったら試してみたいです。では良きFigma MCPライフを〜👋
Views: 0
