Code to Canvas
Code to Canvas( Claude Code to Figma / Codex to Figma )はFigma MCPを使用して、コードからデザインを作成する。generate_figma_designツールを利用する。
generate_figma_design
Section titled “generate_figma_design”WebサイトのUIをデザインレイヤーとしてFigmaに送信できる。
サポート状況（2026/03/11時点）
Section titled “サポート状況（2026/03/11時点）”- MCP Server: Remote Figma MCP Serverのみ
- クライアント: Claude Code、Codex by OpenAI、VS Code
- サービス: Figma Design
送信先の選択肢
Section titled “送信先の選択肢”- 新規Figma Designファイル
- 新規ファイルはチームまたは組織のドラフトに作成される
- 既存のFigma Designファイル（編集権限が必要）
- クリップボード
- リモートFigma MCPサーバーをセットアップする
- クライアントにUIのキャプチャを指示する（公開されたWebサイトの場合はPlaywrightなどを使用する）
- クライアントがサーバーを起動し、スクリプトを注入してブラウザウィンドウを開く
- ブラウザのキャプチャツールバーで送信範囲を選択する
- 現在の画面全体をキャプチャ
- 特定の要素をキャプチャ
- キャプチャ完了後、Figmaファイルを開く（クリップボードの場合はFigmaファイルにペースト）
キャプチャのツールバー
実際に送信されたFigma Design
Figmaを利用したエンジニアとデザイナーのコミュニケーションが増える
- デザイナーが編集可能なデザインとして出力されるため、細かなUIの相談がしやすくなる
- ライブラリに依存するUI（グラフなど）は、実装を元にデザインに起こすことが可能になる