はじめに：「デザイン通りじゃない！」…コーディングで感じる、あの“もどかしさ”を終わらせたい
Figmaを使ってデザインを作り込み、オートレイアウトで要素を整える。完璧なデザインができた――そう確信しても、開発フェーズで必ずぶつかる壁があります。
「デザイン通りに実装されていない」
「余白が微妙に違う」
「指定した色と違う」
細かいことですが、こうした小さなズレの積み重ねが、最終的にユーザー体験を左右してしまいます。
ただ、開発者に細々とした指示を出すのは気が引けますし、自分でコードを修正するスキルがない場合、開発フェーズでは「見守るだけ」になってしまいがちです。
そんなもどかしさを感じてきたデザイナーは、きっと少なくないはずです。
Figmaの使い方を極めても、コーディングの壁は残ってしまう。
これまでも、AIとデザインツールの連携については、このブログでもご紹介してきました。
AIコーディングツールを使えば、確かにコードは生成できます。
でも、結局コードが読めないと、やはり限界がある。デザイナーとしての「もどかしさ」は、完全には解消されませんでした。
ですが、もっと根本的で、本質的な解決策があるのではないか？
それが、Figma Code Connectです。
Figma Code Connectとの出会い
なぜ今、Code Connectに注目すべきなのか？ デザイナー視点の3つの理由
Figma Code Connectは、Figmaが2024年に発表した新機能です。
簡単に言えば、Figmaのデザインコンポーネントと実際のコードを紐づけるツール。
従来のFigmaの使い方では、デザインとコーディングは別々の工程でした。
オートレイアウトで綺麗に整えたデザインも、実装時には「余白がずれる」「色が違う」といった問題が起きていたわけです。
これまでのAIツールは、コードを「書く」ことを支援してくれました。
でも、Code Connectが目指すのは、Figmaでのデザインとコーディングの「断絶」そのものを埋めること。
デザイナーの視点から、このツールに注目する理由は3つあります。
デザインルールを「実装可能なデータ」にできる
Code Connectを使えば、「このコンポーネントはこう使う」というルールが、コードと紐づいた形で保存されます。
Figmaのオートレイアウト設定も含めて、デザインシステムが単なるドキュメントではなく、「実装可能なデータ」になります。
生成AIとの組み合わせで、コーディング精度が劇的に上がる可能性
ChatGPTやCopilotは優秀ですが、個別プロジェクトのデザインシステムのルールまでは知りません。
でも、Code ConnectでFigmaの構造化されたデザインルールを、AIに正確に伝えられたらどうでしょう？
「デザイン通りのコーディング」がもっと簡単になるはずです。
ノンコーダーデザイナーでもコーディングに深く関われる
「Figmaでデザインを渡して終わり」ではなく、実装まで伴走できる。
Figmaの使い方が変わり、デザイナーの役割も大きく変わる可能性を感じています。
Code Connectの概要
公式情報によれば、Figma Code Connectは以下のような機能を持っています。
• Figmaのデザインコンポーネント（オートレイアウト設定含む）と実際のコード（React、Vue、Web Componentsなど）を紐づけ
• デザイナーが定義した使用ルールを構造化して保存
• VS CodeなどのエディタでDesign Tokensとして参照可能
Figmaの使い方が、「デザインツール」から「実装の設計図」へと進化する。そんな未来が見えてきました。
Code Connectに期待する3つの大きな可能性
実際に使う前ですが、Code Connectに期待していることを整理してみます。
デザインシステムが「実装の設計図」になる
これまでは、NotionやConfluenceにデザインシステムのドキュメントを作っていても、それは「参考資料」に過ぎませんでした。
でも、Code ConnectでFigmaのコンポーネント（オートレイアウトで設定した余白や配置も含む）とルールを紐づければ、Figmaそのものが「実装可能なデータとしての設計図」になります。
デザイナーがFigmaで定義したルールが、そのままコーディングに使える形で保存される。
これは大きな変化だと思います。
生成AIに「正確なデザイン指示」を出せる
以前の記事で紹介したChatGPTやCopilotは、確かに便利です。
でも、個別プロジェクトのデザインシステムのルールまでは知りません。
例えば「ボタンを作って」とAIに頼んだとき、AIは一般的なボタンコードを生成します。
でも、実際のプロジェクトでは「角丸は8px」「Primaryは#3B82F6」「フォントサイズは16px」「オートレイアウトで左右に16pxのパディング」といった細かいルールがあるはずです。
Code ConnectでFigmaから構造化されたデザインルールを、プロンプトとしてAIに渡せたらどうでしょう？
AIが「そのプロジェクトのデザインシステムに準拠したコーディング」を実現できるようになる。そんな期待があります。
ノンコーダーでもコーディングの「最終確認」ができる
コーディングのコードは読めなくても、「このボタン、Figmaのデザインと違う」は分かりますよね。
Code ConnectでFigmaのデザインとコードが明確に紐づいていれば、生成AIが出したコードが「デザイン通りか」を確認しやすくなるはずです。
デザイナーが、コーディング完成後の品質管理者になれる。そんな可能性を感じています。
ご指定の通り、「生成AIと組み合わせる新しい可能性」と「実際に試す前の『想定』と『不安』」のセクションについて、箇条書きを「説明文＋箇条書き」形式に修正しました。
生成AIと組み合わせる新しい可能性
Code Connectは、本来は開発者との協業を前提としたツールです。
生成AI（ChatGPT/Claude等）と組み合わせれば、デザイナー単独でもコーディングまで進められる可能性があると考えています。
検証したいワークフロー
以下のような流れで、ノンコーダーデザイナーでもコーディングまで完結できるのではないか、と想定しています。
Figmaでデザイン＆Code Connect設定
デザインとルールの土台を作るステップです。
デザインルールをAIに渡す
構造化されたデザイン情報をAIに正確に伝えます。
AIがコードを生成
AIがデザインルールに準拠したコードを出力します。
デザイナーが検証
生成されたコードをデザインと比較し、確認・修正を行います。
このワークフローが実現すれば、開発者がいなくても、デザイナーがコーディングまで責任を持って完結できるようになります。
実際に試す前の「想定」と「不安」
期待だけでなく、正直な不安もあります。
できそうなこと
ノンコーダーのデザイナーでも、この新しいワークフローの中で無理なく対応できそうだと考えている部分です。
不安なこと
実際にツールを導入し、ワークフローを回す上でつまずきそうだと懸念している点です。
なぜ今、デザイナーがこれを学ぶべきなのか
少し大きな話になりますが、AI時代のデザイナーに求められるスキルは変わってきています。
これまで：Figmaで綺麗な画面を作る
これから：Figmaの使い方を極め、実装可能性を理解し、AIと協働してコーディングまで完結できる
もちろん、コーディングのコードを「書ける」ようになる必要はありません。でも、Figmaでのデザインとコーディングの「距離」を縮めることは、これからのデザイナーに必須になると感じています。
Code Connectと生成AIの組み合わせは、その「懸け橋」になるツールのはずです。
デザイナーが、自分の手で「意図した通りに動くプロダクト」を作り出せる。私たちが長年願ってきた、そんな時代がいよいよ現実味を帯びてきたと感じています。
これから試していくこと
というわけで、これからFigma Code Connectと生成AIを組み合わせたコーディングを実際に試していきます。
具体的には、以下のような点を検証していく予定です。
- Code Connectの設定を、ノンコーダーがどこまで自力でできるか
- Figmaのオートレイアウト情報をAIに伝える最適な方法
- 生成されたコードの検証・修正プロセス
- このワークフローの実用性（個人プロジェクトで使えるレベルか）
うまくいくかどうかは分かりませんが、試行錯誤のプロセスも含めて、正直にレポートしていきたいと思っています。
まとめ：Figmaの使い方が、実装への「懸け橋」になる
正直に申し上げますと、まだ実際に触れたわけではありません。
ですが、AIとデザインツールの進化を見てきた中で、「デザイナーの役割が本質的に変わる、大きな転換点」を感じています。
Figmaの使い方を極めることで、コーディングのコードを書けなくても、デザインの意図を正確に伝え、実装まで責任を持って完結できる。
開発者に頼りきりにならず、デザイナーが生成AIと協働して、実装の質を高めていける。
そんな働き方を実現するために、Figma Code Connectと生成AIの可能性を、これからしっかりと探っていきたいと考えています。
詳細レポートは、実際に試した後に改めてご紹介します。
ぜひ、続編記事も楽しみにしていてください！
関連記事
コメント