「デザインを作ったけれど、コードに落とし込むのが大変」「エンジニアの実装を待たないとデザインの微調整ができない」……そんな悩みは、もう過去のものになるかもしれません。
OpenAIとFigmaが発表した新しい「コード to デザイン」の統合。これにより、AI（Codex）で書いたコードから一瞬でFigmaデザインを生成したり、逆にFigmaのデザインをシームレスにコードへ変換したりすることが可能になりました。
元の記事はこちら↓
この記事では、現役講師の私がこの革新的なアップデートのポイントと、皆さんの制作ワークフローがどう変わるのかを具体的に解説します。
-
身につくスキル：AIを活用した最新のWeb制作ワークフローの理解、Figma MCP Serverの活用知識
-
所要時間：約10分
1. デザインとコードの「往復」を自動化する新機能
これまでの制作現場では、デザイン（Figma）と実装（コード）は切り離された作業でした。しかし、今回の統合により、オープンソース標準の「MCP（Model Context Protocol）」を介して、CodexとFigmaがダイレクトに繋がります。
-
コードからデザインへ：Codexで生成した構成案を、そのままFigmaのキャンバス上に展開できます。
-
デザインからコードへ：Figma上のデザイン要素を、文脈を保ったままコード実装へフィードバックできます。
-
「Figma MCP Server」の役割：これが橋渡し役となり、Figma MakeやFigJamといったツールとも連携。アイデアを即座に形にできる環境が整いました。
実務では「デザインの微修正をコードに反映し忘れる」といったミスが起こりがちですが、この連携によって「常にデザインとコードが同期している状態」に近づけることができます。
2. エンジニアもデザイナーも「役割の境界」を超えていく
今回のアップデートで最も注目すべきは、Codexのプロダクトリードであるアレクサンダー・エンビリコス氏が語る「役割のソフト化」です。
-
エンジニアの場合
エディタを離れることなく、視覚的にデザインを反復試行（イテレーション）できるようになります。 -
デザイナーの場合
コードの深い知識がなくても、実際の「実装」に近い形でデザインを検証できます。 -
共通言語は「意図」
システムが「何を作りたいか（意図）」を汲み取り、デザインとコードの間で翻訳してくれるため、コミュニケーションコストが劇的に下がります。
これからのWebデザイナーは「ただ絵を描く人」ではなく、AIを使いこなして「実装まで見据えたディレクションができる人」が重宝されます。
3. すでに100万人が活用！現場で進むAIエージェントの導入
Codexは2025年4月のCLIリリース以来、驚異的なスピードで普及しています。週間のアクティブユーザーは100万人を超え、年初から400%以上の成長を遂げています。
-
大手企業の採用：NVIDIA、Datadog、Ciscoなどのグローバル企業がすでにCodexを導入し、開発スピードを加速させています。
-
デスクトップアプリの登場：macOS版のCodexアプリを使えば、マルチタスクでAIエージェントに背景ワークフローを任せることが可能です。
「AIに任せればデザインの勉強は不要」と考えるのは危険です。Loredana Crisan氏（Figma CDO）が言うように、参入障壁が下がるからこそ、「何を作るか」「どう差別化するか」というクリエイティビティ（クラフト）の価値がより高まっているのです。
まとめ：次のレベルへ進むために
今回の連携は、単なるツールのアップデートではなく「作り方」そのものの変革です。まずはFigma内でOpenAIモデルを活用したプラグインを触ってみることから始めましょう。
次のおすすめステップ：
-
Level 2：[FigmaのAI機能を使ってバナーのレイアウトを自動生成してみよう]
- Level 3：[Codexを使って、デザインからReactコンポーネントを書き出す実践ガイド]
上記記事は追加予定！お楽しみに。
