FigmaとClaude Codeの新連携「Code to Canvas」を試してみた

2023年2月17日、デザインツールFigmaとAIコーディングプラットフォームAnthropicのClaude Codeが提携し、「Code to Canvas」という新機能を発表しました。この機能は、Claude Codeで生成したコードをFigmaに直接取り込めるもので、従来の「デザイン→コード」の流れではなく、「コード→デザイン」を実現します。

Windows環境とFigma無料プランを用いて実際に試してみた結果、AIで作ったUIをFigmaの編集可能なレイヤーとして取り込むことが可能になりました。具体的には、Claude CodeでダッシュボードなどのUIを生成し、「Send this to Figma」というプロンプトを入力することで、ブラウザ上で動作していたUIがFigmaキャンバスに変換されました。

Code to Canvasは、複数のUI案を比較検討したり、既存のプロダクションコードをFigmaに取り込んでリデザインするなど、デザイナーとエンジニアの協業フローを加速させる可能性を秘めています。ただし、ターミナル操作が必要な点や、デザインシステムとの自動整合がない点は改善の余地があります。

背景

FigmaとClaude CodeはそれぞれデザインツールとAIコーディングプラットフォームとして人気を集めています。今回の提携により、従来の「デザイン→コード」の流れに逆行し、「コード→デザイン」を実現する新たなワークフローが誕生しました。これは、デザイナーとエンジニアの協業を加速させ、プロトタイピングのスピードアップにもつながると期待されています。

重要用語解説

今後の影響

Code to Canvasは、デザイナーとエンジニアの協業フローを大きく変える可能性があります。プロトタイピングがより迅速化し、デザインレビューもスムーズになることが期待されます。また、AIコーディング技術の普及に伴い、この様なツールがますます重要になっていくと考えられます。