はじめに
この記事を書こうと思ったのは、普段から使っているFigmaから新しい機能が続々と出てきたという背景がまずあります。今回は、FigmaSites + FigmaMake、Figma MCPのそれぞれ使って、分かったことを共有できたらと思います。また、これから使い始める方の参考になれればと思います。
各サービスの概要
FigmaSites
Figmaで作成したデザインを、そのままWebサイトとして公開できるサービス。
デザイナーがコードを書かずに「デザイン → 公開」まで一気通貫で進められるのが特徴です。
-
特徴
- FigmaのUIをほぼそのままWebページ化
- 簡単なカスタマイズ機能（リンク、ページ切り替えなど）
- コードやインフラ知識が不要
-
第一印象
- 「Figmaの延長線上でサイト公開できる」シンプルさが強み
- 複雑な機能や高度なSEO設定はまだ弱い印象
FigmaMake
Figmaデザインからアプリを作れるツール。
デザインと動作をつなげることで、動くプロトタイプや簡易アプリをバイブコーディングで構築可能。
-
特徴
- ボタンやフォームなどのUI要素に動作を割り当てられる
- データを使った動的表示（例：リスト、テーブル）
- ノーコードでアプリ的な体験を実現
-
第一印象
- デザイナーが「動くもの」をすぐに作れる点が便利
- 複雑なビジネスロジックや外部連携はまだ制約が多い
Figma MCP (Model Context Protocol)
AIモデルや外部サービスとFigmaをつなぐための新しい仕組み。
Figma内の情報をAIに安全かつ効率的に渡したり、逆に外部からの情報を取り込んだりできる。
デザインとAIを橋渡しすることで、作業効率化や自動化の幅が広がる。
-
特徴
- Figma内のコンテキスト（デザイン情報やメタデータ）をAIに提供可能
- AIからの提案をデザインプロセスに組み込みやすい
- 外部プラグインやサービスと標準的なプロトコルで連携
-
第一印象
- 「AIにどうFigmaの情報を渡すか」が整理されており、拡張性が高い
- 実際に使うには設定や対応サービスの知識が必要
具体例 / ユースケース
上記で概要を述べましたが、簡単に特徴を伝えるとこんな感じです。
- FigmaSites → 「簡易的なサイトをすぐ公開したいときに便利」
- FigmaMake → 「デザインから簡単なアプリやモックを動かすときに便利」
- Figma MCP → 「大規模デザインやプロジェクトを整理するときに有効」
FigmaSites + FigmaMakeのメリット・デメリット
メリット
-
公開までが早い（ワンクリックで1分くらいで可能）
-
レスポンシブ対応が簡単（PC版タブレット版スマホ版で別デザインを作成できる）
-
インタラクションのリンクを設定するだけで、画面遷移がコードを書かずに実装できる（他にもホバーエフェクトやクリックエフェクトなども設定可能）
-
プレビューで画面イメージが確認できる
-
画面の動きをバイブコーディングで簡単に作成可能
-
画面全体だけでなく、フレーム単位でもできる
###デメリット
- 複雑な動きはコードを書いて部品ごとに定義する必要がある
- コード化した部品同士の値の受け渡しができない
- Basic認証はつけられない
- AIとチャットのやりとりが多くなると重くなる
- ラジオ/チェックボタンなどは勝手にダークモード対応が入る
- 生成されたコードが煩雑
- コードが長くなると勝手に省略される
#Figma MCPのメリット・デメリット
メリット
- AIにデザイン情報とデザインのイメージを渡すことができる
- Clineを使えば、ルールを作成してルールに沿ったコード出力をしてもらえる
→一定のコードの質を保てる
デメリット
- 出力は安定しない
- 生成まで時間がかかる
- コードの内容を把握せずに作れてしまう
それぞれで工夫して、やったこと
FigmaSites + FigmaMake
- Basic認証の代替として認証画面の実装
- 勝手にシステムテーマ（ダークテーマなど）を使ったcssになる部品の対応
例）ダークテーマの場合チェックボックスやラジオボタンが黒塗りになる
🔳←ダークテーマ
🔲←ライトテーマ - セッションストレージを使ったデータの受け渡し
- 重くなった時に、元のデザインを復元する（FigmaMakeを解除）をして、生成されたコードをコピぺする
FigmaMCP
- Cline + Claude Sonnet4（Bedrock）を使ってデザインをコードにする
- コード化のルールを定義して遵守させる
- atomicデザインにする
まとめ(感想)
FigmaSites + FigmaMake
- 作ってから公開までのスピードが早く楽しい
- ホバー、リンク付け、画面遷移とかはコードを書く必要がないから楽
- デザインがそのまま公開されてデザイン崩れが起きないから良い
- AIに投げるだけで動きのあるデザインができるのは面白い
- コードが煩雑に生成されていて、見づらい
- DBとかのバックエンドがない、用意できないのは不便
FigmaMCP
- atomicデザインとか、コードをフォルダ/ファイル毎に分けられるのは非常に良い
- コード編集の自由度が高いのはプログラマー的にはすごく嬉しい
- デザインが細かいと反映させるのに苦労する
- コード化する時の毎回承認するのが面倒臭い
終わりに
FigmaSites + FigmaMakeは作成したデザインのまま公開でき、公開までも早いので簡単なアプリは即効できてしまうと思いました。やや使いづらかったり、セキュリティの観点から不安要素はありますが、今後それらの課題も解消されると使い勝手が良くなりそうです。
Figma MCPは、FigmaSites + FigmaMakeに比べてデザインが上手く反映されなかったり、Tokenが多すぎてエラーがよく返ってきたりしましたが、自由度が高いためしっかり開発する際にはFigma MCPの方が良いと思いました。
簡単ではありますが、これから使用する方々の参考になれば幸いです。