アイデアがもっと自由に、もっと速く形になる！
今まで、コードとデザインを行ったり来たりする作業って、ちょっと手間だったり、分断されがちでしたよね。でも、この新しい連携なら、Claude Codeで構築したUI（ユーザーインターフェース）を、なんとFigmaのキャンバスに直接取り込んで、編集できるようになるんです！
たとえば、こんなことができるようになります。
-
コードで動くUIをFigmaで編集！：ブラウザで動作する実際のUIを、Figmaの編集可能なフレームに変換。コードの強みとキャンバスの強みを良いとこどりできちゃいます。
-
みんなで同じ画面を見て意見交換！：キャプチャした画面をFigmaファイルに貼り付けたら、チームメンバーと「ここ、もっとこうしたらどうかな？」って直接コメントし合ったり、別のアイデアを試したりできます。別のツールに切り替える必要がないから、議論がスムーズに進みますね。
-
フロー全体をFigmaで「見える化」！：複数の画面を一度にFigmaに取り込んで、体験全体の流れを把握できます。コードで作成されたインターフェースをキャンバスに取り込むことで、検討や対話の幅がぐっと広がり、新たな可能性が見えてくるでしょう。
「どう作るか」から「どの案を発展させるか」へ
Figmaは、「アイデアを世界最高のデジタルプロダクトや体験へと形にするための場所」として、常に私たちの創造性を支援してくれています。今回のClaude Codeとの連携も、その想いから生まれたものなんです。
この機能によって、デザインに関する話し合いの焦点が「どうやって作るか」から「どのアイデアをさらに発展させるか」へとシフトします。Figmaは、Figma Makeでプロンプトから動作するプロトタイプを生成したり、Copy designでそのプレビューをデザインキャンバスに取り込んだりする機能も提供しています。
今回のClaude Code to Figmaは、この考え方をコードファーストのワークフローにも拡張し、構築済みのインターフェースを編集可能なデザインアセットへと変えてくれます。プロンプトから始めても、コードから始めても、最終的な目標は同じ。「スピーディな制作によって、より深い探索が可能になる」ということです。
FigmaとClaude Codeの連携について、もっと詳しく知りたい方は、ぜひこちらのブログ記事もチェックしてみてくださいね。
あなたのアイデアやプロダクト開発が、この新しい機能でさらに加速すること間違いなし！さあ、FigmaとAIの力を借りて、あなたのクリエイティブな可能性をどんどん広げていきましょう！