デザインとコードの壁がなくなる新機能
デザインツールで作った画面をエンジニアに渡して、コードに落としてもらう。フリーランスのデザイナーなら日常的な流れですよね。ただ、この工程には時間がかかりますし、デザイン通りに実装されないこともあります。
FigmaとOpenAIの新しい統合は、この壁を取り払おうとしています。Codexというツールを使って、Figmaのデザインを直接コードに変換できるだけでなく、コードから編集可能なFigmaデザインを生成することもできます。つまり、双方向の変換が可能になったということです。
これはMCP（Model Context Protocol）という標準規格を使った統合で、Figma Design、Figma Make、FigJamのすべてで機能します。CodexのmacOSデスクトップアプリから設定すれば、すぐに使い始められます。
従来のツールとの違い
Figmaにはすでにコード生成機能がいくつかありました。Dev ModeではHTML/CSSのスニペットを取得できますし、プラグインを使えばReactやHTMLにエクスポートすることもできます。Figma Makeでは、テキスト入力からReactコンポーネントを生成できました。
ただ、これらはすべて一方向の作業でした。デザインからコードへ、あるいはテキストからデザインへ。プロジェクト全体のコンテキストを理解しているわけではありませんでした。
今回の統合が違うのは、AIがコード、Figmaファイル、デザインシステムに同時にアクセスできる点です。たとえば、既存のコードベースを読み込んで、それに合わせたFigmaデザインを生成したり、デザインシステムのコンポーネントを使ったコードを出力したりできます。
具体的にどう使えるのか
いくつか実際の使い方を想像してみましょう。
まず、クライアントから「このページのボタンを大きくして、色を変更してほしい」という修正依頼が来たとします。従来なら、Figmaでデザインを修正して、エンジニアに伝えて、コードを書き直してもらう必要がありました。新しい統合があれば、Figmaで修正したデザインをそのままコードに反映できます。
逆のパターンもあります。エンジニアがコードでプロトタイプを作った後、「これをFigmaできれいに整理したい」という場合です。コードからFigmaの編集可能なデザインを生成できるので、そこからさらに視覚的な調整を加えられます。
もう一つの使い方は、デザインシステムの活用です。会社やプロジェクトで使っているデザインシステムがある場合、Codexはそのコンポーネントやスタイルを理解した上でコードを生成します。単純にデザインを見た目通りにコード化するのではなく、既存のシステムに沿った形で出力してくれるわけです。
どんな人に向いているか
この機能が特に役立つのは、デザインとコードの両方に関わる人たちです。
フリーランスのUI/UXデザイナーで、簡単なフロントエンド実装も自分でやる方なら、デザインからコードへの変換がスムーズになります。クライアントに動くプロトタイプを見せる時間が短縮できるでしょう。
フロントエンドエンジニアで、デザインツールも触る方にとっては、コードからデザインへの変換が便利です。コードでラフを作ってから、Figmaできれいに整える流れが作れます。
プロダクトチームで働いている方なら、デザイナーとエンジニアの間のやり取りが減ります。デザインの意図がコードに正確に反映されやすくなるため、修正の往復が少なくなる可能性があります。
注意しておきたいこと
便利そうに見える機能ですが、いくつか注意点もあります。
まず、デザインシステムがある場合でも、Codexは視覚レイヤーから推測してコードを生成することがあります。完全にライブラリを読み込んでいるわけではない場合もあるということです。生成されたコードは必ず確認して、デザインシステムに沿っているかチェックする必要があります。
また、現時点ではベータ版です。日本語対応や利用可能地域についての情報はまだ明確ではありません。OpenAIのCodexはmacOSデスクトップアプリから使うため、Macユーザーでないと試せない可能性があります。
価格についても不明です。Figmaの有料プランに含まれるのか、OpenAIの料金が別途かかるのか、公式の発表を待つ必要があります。
フリーランスへの影響
この統合が普及すれば、フリーランスの働き方にいくつかの変化が起きそうです。
デザインとコードの間の作業時間が短縮できれば、一つのプロジェクトにかかる時間が減ります。同じ時間でより多くのクライアントワークをこなせるか、一つのプロジェクトをより深く磨く時間が取れるかもしれません。
一方で、デザインだけ、コードだけという分業の仕事は減る可能性があります。クライアントが「デザインとコードを両方できる人」を探すようになるかもしれません。ただ、ツールがあっても最終的な品質チェックや調整は人間の判断が必要なので、すぐに仕事がなくなるわけではないでしょう。
特に小規模なプロジェクトや個人クライアント向けの仕事では、この統合が強みになります。デザインから実装までワンストップで対応できれば、提案できるサービスの幅が広がります。
今すぐ試すべきか
現時点では、様子見をおすすめします。ベータ版なので、安定性や機能の完成度はまだわかりません。価格や利用条件も明確ではないため、すぐに業務に組み込むのはリスクがあります。
ただ、デザインとコードの両方に関わる仕事をしている方は、情報を追っておく価値があります。正式リリース時に素早く取り入れられれば、競合との差別化ポイントになるかもしれません。
また、AnthropicのClaude Codeという競合サービスもあります。Figma統合はOpenAIのCodexが先行しましたが、他のツールも追随する可能性があります。どのツールが自分の仕事に合うか、選択肢が増える時期が来るでしょう。
詳しい情報は元記事（The Decoder）で確認できます。
コメント