東京は桜の花も咲き始め…、こもりです。
先月追加された「コードからFigma」へ的な「generate_figma_design」ツールは、実際のコードをローカル環境で表示してその内容をFigmaのファイルにキャプチャするようなツールでした。それはあくまでもレビューというか、ブラウザに表示されている内容をFigmaに移植するようなものと言えば良いでしょうか。
いずれ「Figmaのファイル構造をちゃんと再現する」ようなアップデートがおこなわれるだろうな…と予想はしていたのですが、それが思いのほか早くFigma MCPに新しいツールとして「use_figma」が追加されました。Figmaの開発者サイトでの表記も「Code to Canvas」と「Write to Canvas」に分けられ、それぞれのツールが解説されています。
2月に公開されたものはコードをFigmaのキャンバスに再現するものだとしたら、今回公開されたものはFigmaのキャンバス自体を操作できるものになっています。
これを使うことで、AIエージェントに指示を与えて新規の空のFigmaファイルを作ることはもちろん、コードからFigmaファイルを作ったり、コード上のコンポーネントをバリアント付きのFigmaコンポーネントとして新しく生成したり、テーマファイルなどのCSSの変数をFigmaのバリアブルに移植したり、はたまたFigma側の変更をコード側に再取り込みしたり、双方向での操作が可能になっています。
コードはあるけど元が「Photoshopしかない」みたいな環境でFigmaに移行したいとして、画面を見ながら手動で新しいFigmaのファイルを作らなくても、AIエージェント経由でFigmaのファイルを生成できるって考えると楽なんではないでしょうか。今回講座のコンテンツを作るにあたっては、サンプルで用意したReactのコードを使いましたがそれ以外でも試してみる価値はあると思います。
新しいツールはまだβ版の扱いですが「これはすぐにでも解説せねばならんな…」ということで、自分で言うのも何ですが鬼のような速さで解説動画を「Figma × AI」講座に追加しました。先月追加したコンテンツについても若干ですが内容を更新して再録、講座内の章の並びも少し変更をしております。
【2026/3/29追記】
Gemini CLIのFigma公式エクステンションも最新版になりました。先月こちらで更新した内容でインストールされているエクステンションは、そのままアップデートをかけることができません。該当するパートは、アンインストールの方法と新しい公開先の情報などとあわせて最新版に更新しました。
以下、今回変更・追加した内容になります。
---
103. Figmaからコードへ
3. GeminiへのMCP追加とVSCode拡張機能（9:15）
105. コードからFigmaへ（Code to Canvas）
- コードからFigmaファイルが生成できる？（3:45）
- ローカルサーバの準備（2:59）
- Claudeにプロンプトを入力してみよう（3:51）
- Figmaに変換するオプションの選択（1:06）
- 任意の要素を変換して保存する（1:18）
- 変換されたFigmaファイルを確認する（1:37）
- 修正済のフレームリンクをプロンプトへ（3:14）
- キャプチャスクリプトの除去（1:10）
- より効率よくコードを修正するには（3:04）
- まとめ（1:49）
106. コードからFigmaへ（Write to Canvas）
- Code to Canvas と Write to Canvas の違い（1:24）
- 対応するクライアントとMCPサーバの更新（2:04）
- use_figma の仕組み（2:18）
- 空の新規Figmaファイルを作成する（1:43）
- コードからFigmaファイルを生成する（3:00）
- コードからコンポーネントを生成する（3:16）
- コードからFigmaに変数として保存する（2:39）
- Figmaでの変更を再度コードに取り込む（3:44）
- スキルについて（1:59）
- まとめ（1:45）
---
当面書籍ではこの内容は出てこないと思いますので、早い段階で新しいツールを使って業務の効率化をしたい方は是非ご覧ください。なお、Figma Design本体の新機能である「スロット」については「Figma Design - マスター編の方に追加済です。
→ Figma × AI
→ Figma Design - マスター編
※「Figma Design - マスター編」には「Figma × AI」講座も含まれます。重複購入にご注意ください