FigJam MCPスキル登場:コードを視覚的に設計・レビューしよう

Design

この記事の注目ポイント: FigmaがFigJamをAIコーディングエージェントの「ホワイトボード」として拡張。新しいMCPスキルを使うことでAIエージェントが直接FigJamに図解(アーキテクチャ図やER図など)を作成したり、付箋を貼ったりできるようになった。デザインと開発のギャップを埋める狙いだよ。

以下は3分で読める解説だよ。元記事の要点を噛み砕いて、現場ですぐ使える視点でまとめるね。

深掘り解説

具体的なワークフローはこんな感じ

  • リサーチと計画: AIがコードベースを分析し、解決策をFigJam上に図解やプロジェクトプランとして出力する。
  • レビュー: チームメンバーがその図を見て、FigJam上でコメントやフィードバックを送る。
  • 実装: AIはFigJam上の図やフィードバックを読み取り(get_figjamツール)、それを元に実際のコードを書き始める。

提供されるツールとスキル

  • figma-use-figjam: エージェントがFigJamのボードを読み書きするためのスキル。
  • generate_diagram: 複雑なシステム構成図やデータベース設計(ER図)を自動生成するスキル。
  • ベータ期間は無料: 現在、このAPIはベータ期間中で無料で利用可能。CursorやClaude Code、VS CodeのCopilotなど、主要な開発ツール(MCPクライアント)に対応しているよ。

現場でのメリットは明快。デザイナーはコードの振る舞いを視覚的に理解できるからハンドオフがスムーズになるし、開発者はエージェントが生成したブラックボックスな出力を可視化してレビューやデバッグを効率化できるんだ。

気をつけたい点もあるよ。ユーザーからは「複雑な図の正確性」「無料プランの制限」といった懸念が挙がっている。リリース直後に出たバグは短期間でパッチ対応されているけど、エンタープライズ利用時はポリシー確認をおすすめするよ。

まとめ

今回のFigJam拡張は、デザインと開発のワークフローを直接変える可能性があるアップデートだ。エージェントが生成したコードの「見える化」が進めば、ハンドオフの摩擦が減ってレビュー時間も短縮できる。

まずは小さなプロジェクトやプロトタイプで試してみるといいよ。FigJam上でエージェントを動かして図を編集するだけで、チームの理解度やフィードバックの質が変わるはずだ。

参考リンク


※内容の正確性には万全を期していますが、最新の仕様や公式情報については、必ず上記の参考リンク先をご確認ください。

タイトルとURLをコピーしました