Figma MCPを試した結果 - デザインアセットの自動化が想像以上に便利だった件
はじめに
みなさん、AIを利用した開発ライフはどうでしょうか？
私は新規案件に入ったらAIでスタートダッシュを切ってやろうと思っていました。そこで今回は私が現場で実際に役に立ったMCPサーバーの活用事例を紹介します。
※本記事はあくまでも個人の見解であり、実際の導入の際は各プロジェクトの要件に合わせてご検討ください。
使用したMCPサーバー
今回の検証で使用したMCPサーバーは以下の2つです：
- Figma MCP - Figmaデザインファイルとの連携
- Filesystem MCP - ローカルファイルシステムへの自動保存
従来の課題
アイコンやカラーコード、テキストコンポーネントなどはデザイナーがいる場合は大体準備されていますよね？
これまでは毎回Figmaを参照してコピー→貼り付けのような手順でプロジェクト毎に準備していました。プロジェクトごとにカラーが異なってくるので、毎回これだけでも一苦労だったんです...
最近話題のFigma MCPを実際に試してみたところ、想像以上に実用的で開発フローの改善に大きな可能性を感じました。今回はその検証結果と今後の展望について共有したいと思います。
実際に試してみた機能
1. アイコンの自動ダウンロード機能
Figma MCPの最も印象的だった機能の一つが、アイコンの自動ダウンロードです。
- Figmaデザインファイル内のアイコンを指定
- filesystem MCPを経由して自動的に.svg形式でローカルフォルダに保存
- ファイル名も自動で適切に設定される
これまでデザイナーからアイコンを受け取る際の手間が一気に削減されました。特に大量のアイコンセットを扱う際の効率性は目を見張るものがあります。
2. カラーコードの自動取得
デザインシステムの構築において重要なカラーパレットの取得も簡単に実現できました。
- Figmaファイル内で使われているカラーコードを自動抽出
- CSS変数やデザイントークンとしてすぐに活用可能な形式で出力
- ブランドカラーの一貫性を保ったまま開発に移行できる
3. テキストコンポーネントのテーマ化
個人的に最も感動したのが、テキストコンポーネントの自動テーマ化機能です。
- Figma内のテキストコンポーネントを指定
- フォントサイズ、line-height、カラーなどのスタイル情報を抽出
- 再利用可能なテーマオブジェクトとして自動変換
これにより、デザインシステムとコードベースの一貫性を保つことが格段に楽になりました。
4. UIフレームの詳細分析
最後に試したのが、UIフレーム全体の構造分析機能です。
- 特定のフレーム（画面）を指定
- そのフレーム内の全要素を詳細に分析
- レイアウト構造、使用コンポーネント、階層関係を文章化
得られる情報の詳細さは予想を上回るもので、まるでデザインレビューを受けているかのような細かい解説が得られました。
今後の展望 - AIとの連携可能性
この検証を通じて見えてきた、より大きな可能性について考察してみます。
プロンプトの精度向上による開発効率化
UIを言葉として表現できるということは、それをそのままDevinなどの開発AIへのプロンプトとして活用できるということです。
従来の「この画面を作って」という曖昧な指示ではなく、具体的な要素分解された情報を渡すことで、より正確なUI構築が期待できそうです。
AIプロンプトの2段階最適化
さらに興味深いのは、AIを使ってAIへの指示を最適化するというアプローチです。
- Figma MCPでUIの詳細情報を抽出
- その情報をプロンプト最適化AIで整理・構造化
- 最終的な開発指示として別のAIに投げる
一見すると「2度手間」のように見えますが、各段階でAIの得意領域を活かすことで、最終的により精度の高い成果物が得られる可能性を感じています。
まとめ
Figma MCPは単なるデザインアセット取得ツールを超えて、デザインと開発の橋渡しを大幅に効率化してくれる存在でした。
特に今後のAI活用フローにおいて、「情報の構造化」「プロンプトの精密化」という観点で大きな価値を発揮しそうです。まだ発展途上の技術ですが、デザインシステムの運用や開発フローの改善を検討している方は、一度試してみる価値は十分にあると思います。
本記事は実際の検証結果に基づいて執筆していますが、Figma MCPは日々アップデートされているため、最新の機能については公式ドキュメントもご確認ください。
Discussion