この記事の注目ポイント: 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上でエージェントを動かして図を編集するだけで、チームの理解度やフィードバックの質が変わるはずだ。
参考リンク
※内容の正確性には万全を期していますが、最新の仕様や公式情報については、必ず上記の参考リンク先をご確認ください。


