Figmaで実践しているMCPサーバーの4つの活用方法
FigmaのMCPサーバーは、これまで以上にプラットフォーム全体で幅広く活用できるようになりました。常に最新の状態を保つデッキの更新から、デザインを本番環境へ反映するまで、その実際の活用方法をご紹介します。
Figmaで実践しているMCPサーバーの4つの活用方法を共有
エージェントにキャンバスを開放してから2か月が経ち、Figma MCPサーバーは現在、Figma Slides、FigJam、Figma Make、そして新しいFigmaエージェント全体で動作するようになりました。つまり、プレゼンテーションデッキ、FigJamボード、Makeプロトタイプはすべて、プロンプトから作成・更新できるようになっています。MCPサーバーはカスタムフォントにも対応しており、さらに新しいdownload_assetsツールを通じて、デザインファイルから画像やアイコンをSVG、PDF、JPG、PNGとしてダウンロードすることもできます。
ここでは、Figmateたちが現在これらの新機能を活用して実践している4つのワークフローを紹介します。
1. Figma Slidesでデッキを作成・更新する
FigmaのデザイナーアドボケイトであるMallory Deanは、FigmaのAI製品リリースをまとめた常に最新の状態を保つプレゼンテーション資料を管理しています。この資料は数週間ごとに更新されており、デザインイベントでの講演や顧客とのミーティングで紹介する内容が、製品のリリースに合わせて常に最新の状態になるよう維持されています。
Figma MCPサーバーは、アップロードしたカスタムフォントにも対応するようになりました。そのため、ローカルマシンに保存されている任意の書体を、デザインやスライド上で正しく反映するようプロンプトで指定できます。
Figmaエージェントのリリース後、彼女はコードエディタで次のようにプロンプトしました。「Figma AIデッキを更新して、新しいFigmaエージェントを追加してください。Slack、Google Drive、Shortcutブログ、およびRelease NotesのWebページからコンテンツを取得し、更新すべき箇所の提案と、新しいスライドのアイデアも出してください。」エージェントは関連する会話、ブリーフ、ローンチメッセージを収集し、それらをもとにuse_figmaツールと、Figma Slidesにおける/figma-use-slidesスキルを活用して、彼女のテンプレートに沿ってデッキを更新しました。
新しく生成されたスライドには、最終確認やプレースホルダー画像の差し替え、コピーの調整といった作業は必要でしたが、Malloryが手を加え始める時点で、コンテンツ作成の約80%はすでに完了していました。新たに追加されたカスタムフォント対応により、エージェントはWebセーフフォントによる代替ではなく、アップロードされたカスタムフォントをそのまま使用してテキストをレンダリングできるようになりました。そのため、デッキのブランドの一貫性を維持できます。
このワークフローは、ゼロから新しいものを作成する場合でも、既存のドキュメントを更新する場合でも、プロダクト開発プロセス全体を通して同様に活用できます。キックオフデッキを作成するPM。デザイン探索を発表するデザイナー。機能のGTMプランをまとめているマーケティングチーム。最新の製品変更を反映した顧客向けデッキを更新するセールスチーム。作業が速くなるだけでなく、チームのデザインシステムをもとに構築されるため、ブランドの一貫性も保たれます。
2. ライブデータからFigJamボードを生成する
Skillsを活用することで、エージェントはより高品質で一貫性のあるアウトプットを生成できます。Figmaコミュニティで公開されているカスタムスキルを活用したり、自作のスキルをFigmaコミュニティリソースリポジトリへ投稿したりすることで、他のユーザーもFigma MCPサーバーと組み合わせて利用できるようになります。
FigmaのプロダクトマネージャーであるPrasant Lokinendiは、機能のキックオフワークショップを頻繁に開催しています。こうしたワークショップ向けのFigJamを準備するには、社内のさまざまな情報を集約し、セッションに合わせて各セクションを構成・整理する必要があり、多くの時間がかかります。そこで彼は、毎回同じ内容をプロンプトで繰り返し指示しなくても済むよう、それらの指示を組み込んだカスタムスキル/figjam-builderを作成しました。
今年初めに実施したMakeの音声入力機能のリリースでは、Slack、Asana、Notionからプロジェクト構成に必要なコンテキストを、Hexから分析データを取得し、それらをもとにFigJamボードを生成するようエージェントに指示しました。白紙のFigJamから始めるのではなく、プロダクトビジョン、顧客インサイト、重要な意思決定など、最新の情報を反映した状態から作業を開始できました。
3. Figma Makeでコードとキャンバス間を行き来しながらデザインする
MCPサーバーは現在Figma Makeでも動作し、デザインの編集からプロダクション向けPRまでのループを、Figmaを離れることなく完結できるようになっています。FigmaのプロダクトデザイナーであるIris Linは、このループを実際のプロダクト開発業務で活用しています。
例えば、Irisがチームメイトとデモ用のサンプル音声エディターを作成した際、チームメイトが最初のバージョンを実装した後、Irisはデザインを更新したいと考えました。インタラクションは静的なデザインファイルでは表現しづらいため、彼女はコードをブランチしてFigma Make上で実際に動作するものを作成しました。具体的には、ドラッグ&ドロップで並べ替えられる音声クリップ、レベル調整用のポップオーバー、そして再生位置をスクラブできるプレイヘッドなどを実装しました。
Irisはデモファイル用にデザインシステムを編集したかったため、Makeのプロンプト入力欄で次のように指示し、Makeのプレビューをキャンバスへ編集可能なデザインレイヤーとして取り込みました: 「このプレビューをFigmaにデザインレイヤーとして戻してもらえますか？」画面はキャンバス上に配置され、彼女のライブラリからの関連コンポーネントで再構築されました。Irisはキャンバス上で通常どおりのデザインワークフローに従い、音声クリップのコンポーネントにデフォルト、ホバー、ドラッグの各状態を追加しました。その後、今度は逆方向に次のように指示しました。「新しく追加した状態をコードへ反映してください。」エージェントはデザイン上の変更内容を読み取り、3つの状態すべてをコンポーネントに実装し、GitHubへPRとして送れる状態のコードを生成しました。
このワークフローにより、Figmaの中だけで何をリリースするかをコントロールできるようになります。エージェントは両方向で実際のコンポーネントを読み書きし、その仕組みはCode Connectがライブラリとプロダクションコードを対応付けるのと同様です。これまでハンドオフやレビューの過程で失われていたデザインの意図も、そのままPRまで一貫して引き継がれるようになります。
4. Figmaエージェントと作業を分担する
Figma MCPサーバーのプロダクトマネージャーであるYarden Katzは、MCPの可能性を最大限に引き出す方法を熟知しています。彼女が繰り返し取り組んでいるシナリオのひとつは、キャンバス上に存在せずコード上にのみ存在する画面です。その目的は、それを適切なデザインシステムに紐づけた状態でFigmaに取り込み、デザイナーがそのまま作業できる形にすることです。
download_assetsを使うことで、Figma MCPサーバー経由でFigmaからすべてのアセットを直接取得できるようになりました。スクリーンショットとは異なり、SVG、PDF、JPG、または元のソース画像など、実際にエクスポート可能なファイルとして取得できます。手動でのエクスポートは不要です。
ログインフローとダッシュボードを含むサンプルアプリをベースに、彼女はコードエディタから次のようにプロンプトしました: 「このダッシュボードとログインフローをFigmaにプッシュしてください。既存のコンポーネントとバリアブルは再利用し、存在しない場合は適切にコンポーネントセットとバリアブルを生成してください。」Figmaプラグインにはskillsが組み込まれており、エージェントがFigmaの使い方に関するコンテキストを理解できるようになっています。そのためエージェントは、Figmaとコードベースの両方にあるライブラリを読み取り、既存のものを再利用するか、新しく構築するかを判断し、すでに行った作業を重複させることなく処理しました。
それによって得られたのは完成形ではなく、しっかりした第一ドラフトでした。オートレイアウト、フォント、そして一部の未マッピングのカラーはまだ調整が必要でした。そこでFigmaエージェントがキャンバス上で彼女と並走し、デザインシステムに関する深いコンテキストを持ちながら作業を引き継ぎました。彼女はレイアウトの修正、タイポグラフィの調整、そしてすべてのカラーを適切なバリアブルへマッピングするよう指示しました。望む状態になった時点で、その内容をMCPサーバー経由でコードへ再度プッシュしました。必要に応じて、download_assetsツールを使えば、アセットやアイコンを別途エクスポートすることなくエージェントから直接取得することも可能です。
このユースケースでは、MCPサーバーとFigmaエージェントが連携し、最終的なデザインまで共同で作業を進めます。MCPサーバーはFigmaと現在使用しているエージェントを接続し、コードのみで構成された画面を、実際のコンポーネントを使ってキャンバス上に再現します。その後はFigmaエージェントが作業を引き継ぎます。キャンバスネイティブな環境で、コンポーネントやトークンに基づきながら方向性を探索し、チームがデザインを行うその場で作業を進めていきます。
FigmaエージェントおよびFigma Makeのプロダクションコードベース連携は、現在クローズドベータとして提供されています。一方で、Figma MCPサーバーの書き込み機能はオープンベータとして利用可能です。開始するにはセットアップガイドをご覧ください。皆さんがどのようなものを構築するのか楽しみにしています。