デザインから始めるデザイン駆動開発の構想（Figma DevMode MCPサーバーで「Design to Code」の実現）
はじめに
こんにちは、あるいはこんばんは。otot_devです。
ここ最近、Figma の DevMode MCP サーバーを使うことで、真の意味でのデザイン駆動開発（Design-Driven Development）が実現できるのではないかと妄想しています。
（妄想なので、tech ではなく idea タグにしています）
この記事では、Figma DevMode MCP サーバーを利用する上で押さえておくと良いと感じたポイントと、デザイン駆動開発が実現することによる開発サイクルの進化について妄想理解を深めていこうと思います。
まずは、妄想の材料理解を深めるための前提知識を集めていきます。
🚀Figma DevMode MCP サーバーの登場
Figma Config 2025 in サンフランシスコで 2025 年 5 月に発表された AI＋新機能（Make.Sites.Draw.Buzz.グリッド）。その翌月に「Figma DevMode MCP サーバー」が発表されました。
その後、Figma 社主催で「デザインからコードへ Dev Mode MCP サーバーの活用」というイベント（オン・オフ両方）が 2025 年 7 月に開催されました。実は Dev Mode MCP サーバーの日本での反響が世界的にも大きかったという理由から日本で開催した背景があるそうです。
ちなみに私もオンラインで参加しましたが、非常に有意義な時間でした。
Figma DevMode MCP サーバーは、Figma が提供する新しい機能で、デザインを MCP サーバー経由で生成 AI に渡すことができる機能です。
これにより、普段使用している Cursor や Claude と連携できます。
（※Figma MCP サーバーと Figma DevMode MCP サーバーは別物なので注意してください。Figma DevMode MCP サーバーは、Figma 公式の MCP サーバーであり、Web ではまだ使用できず、アプリケーションでのみ使用可能です）。
📚Figma DevMode MCP サーバーの生成結果を高めるために押さえておくと良いポイント
Figma DevMode MCP サーバー単独でも勿論利用できるのですが、生成結果の品質をより高めるためにいくつか押さえておくと良いポイントがありそうです。
Figma Code Connectについておさらい
Figma 社主催で「デザインからコードへ Dev Mode MCP サーバーの活用」というイベントの中で、実例として取り上げられてもいましたが、Code Connect がされていると、生成 AI がプロジェクト内で使用されているコンポーネントを利用してコードを生成してくれるので、よりプロジェクトに即したコードが生成される可能性が高まります。
Figma のブログによると 2024 年 4 月に発表されているので、約 1 年ほどになります。
Figma Annotationについておさらい
Dev モードと同時期に発表された機能だった気がするのですが、正確な時期は不明です。
Annotation は、読んで字の如く、Figma 上でデザインに対して注釈を追加できる機能です。
当初はそのまま注釈としてリアルタイムにデザインの意図を伝えるための機能として利用されていることが多かったのではないでしょうか。しかしながら、DevMode MCP サーバーではこの Annotation 情報を取得できるので、使用することでデザインの意図をより正確に生成 AI に伝えることができるようになります（これは対人間でも同じですよね）
ここまでの内容で私が感じた AI 時代のデザイン駆動開発の可能性は全て集約されているのですが、もう少し頑張って言語化してみます。
今まではデザインを作成し、何かしら生成 AI を活用していたとしてもデザインからコードへの変換部分はどこかで人間の手が入っていたのではないでしょうか？
ここ最近では、仕様駆動開発（Specification-Driven Development）という言葉も聞かれるようになってきましたが、仕様書を作成し、その仕様書を元にコードを生成するという流れもあると思います。しかしながら、デザイン（絵）からコードを生成するという部分はやはり手付かずだったと思います。これは、デザインが曖昧であり、デザインの意図を正確に伝えることが難しかったからだと思いますし、事実今も難しいのだと思います（DevMode MCP サーバー上手く使えないといったコメントがあるのもそのせいだと思います）。
しかしながら、Figma DevMode MCP サーバーを利用し、デザインの意図を Annotation で正確に伝え、Code Connect でプロジェクトに即したコードを生成できるようになるので、デザインからコードへの変換部分も自動化できる可能性が高まります。これにより、確度の高いデザイン駆動開発が実現できるのではないかと妄想しています。
💡デザイン駆動開発（Design-Driven Development）
デザイン駆動開発（Design-Driven Development）を定義してみる
デザイン駆動開発は、デザインを中心に据えた開発手法であり、ユーザー体験を最優先に考えたプロセスを指します。
これにより、開発チームはデザインの意図を正確に理解し、実装に反映させることが可能になります。
また、デザイン駆動開発は、デザインとコードの間のギャップを埋めることを目指し、効率的なコミュニケーションとコラボレーションを促進します。
さらに、Figma DevMode MCP サーバー、Code Connect、Annotation を有効活用することで、デザインからコードへの変換が自動化され、開発プロセスの迅速化と品質向上が期待できます。
デザイン駆動開発が実現することによる開発サイクルの進化
- デザイン駆動開発で「design to code」を実現し、フロントエンドを
- 仕様駆動開発で「spec to code」を実現し、バックエンドを
- テスト駆動開発で品質を
これらを組み合わせることで、開発サイクル全体の効率化と品質向上が期待できるのではないかとここ１ヶ月は妄想してました。
開発フロー図
🎬おわりに
デザイン駆動開発（Design-Driven Development）は検索したら、数点はヒットしましたが、造語に近いと思います。
もっと別の概念で造語を作りたいとも思いましたが、デザイン駆動開発（Design-Driven Development）が一番しっくりきたので、これにしました。
どなたか良い造語があればコメントください。
Discussion