Zenn
🍎

"v0 x Figma"の実用性を検証する 〜モジュール編〜

に公開
Figma
webデザイン
uiデザイン
生成 AI
v0
idea

この記事について

v0ではFigmaを入力としてUIを作成することが出来ます。
しかしながら、実用性がどれくらいあるのかが不明でした。

そのため、「v0でFigmaを取り込みUIを作成するフローは十分機能するのか？」の検証を行いました。また、"v0 x Figma"の可能性を探ることも目的としています。

以下の4つの観点で検証しました。

  • 再現性：UIは忠実に再現されているか
  • 修正精度：再現できなかったUIをどれだけ修正できるか
  • 新規追加：既存のUIを壊さず追加出来るか
  • アイデア発散：意匠やインタラクションの発散はどの程度可能か

https://v0.dev/

検証後の所感

UIの再現性、修正、追加は利用可能なレベルかと言えます。アイデアの発散も良い感じです。
特に、FigmaからUIを実装する点において、（生成AI全般に言えることですが）人類を超える圧倒的な実装スピードがキモかと思います。一方で、再現精度は高いレベルではないので修正作業が必要です。ただし、プロンプトの工夫や関連情報を付加してあげることで再現性がより高まる可能性があります。

それぞれの観点の所感としては以下のようなことが言えます。

  • 再現性：まずまずです。 ですが、不確実性の許容は必要です。ぐちゃぐちゃなアウトプットをされてもめげない心や修正できるプロンプト力や工夫は必要です。品質の面ではピクセルパーフェクトで実装できる人やアクセシビリティに知見のあるエンジニアには劣りますが、そうでなければv0の方が品質が高い可能性があります。
  • 修正精度：問題ありません。 CSSに慣れ親しんでいる人は自分でやったほうが速いです。
  • 新規追加：問題ありません。 再現性は上記と同様です。
  • アイデア発散：活用できます。 ただし、発散させたい範囲を考えプロンプトを工夫することが必要です。

ただし、以下の点に注意です。

  • プロンプトの工夫、Figmaの大きなフレームをv0に渡さずに細かく渡すなど工夫が必要。
  • VS Code、Cursor、Cline、Devin、Figma MCP等のツールを駆使できる人はv0を使わなくても良い可能性があります（ここはメリデメありそうなので要検証）。一方でコードに慣れ親しんでいない人に関しては強力なツールになるかと思います。
  • コードを評価出来る人がいないとネットのコードをそのままコピペしているのと同じレベルになる可能性があるので注意です。
  • v0にFigmaのURLを渡しますが、画像データに変換されているように見えます。構造データも渡したいところです。
  • 「そもそもv0だけでUI作ればよいのでは？」という意見もありそうですが、「仮でとりあえず作成してみたい」「アイデアを発散させたい」「生成AIで作成したUIの評価が出来るレベルのビジュアルデザインスキルがある」場合はv0だけでも良いかもしれません。

生成AIの進化はすさまじいのであくまで現時点での所感です。

検証

再現性

静的な状態

シンプルなボタンとカードをInputとして、以下のプロンプトでv0に食わせました。
大きさ、フォントなど細かな点が異なることがわかります（人間以下のレベル）。ホバーインタラクションが自動的についている点はありがたいです。カード内の画像がカードUIになっています。

Please recreate the UI shown in the attached Figma frame as accurately as possible.

丸みの大きいボタンUIの再現
丸みの大きいUIの再現

丸みの小さいボタンUIの再現
丸みの小さいUIの再現

カードUIの再現
カードUIの再現

動的な状態

ボタンのインタラクションを再現するために、Figmaをv0に食わせました。
画像の左が複数のvariantsを持つコンポーネントで、画像の右部がアウトプットになります。アウトプットは紫の点線内にシンプルなボタンがあり、ホバーすると画像のようにハイライトが付与されます。

だいたいの再現は出来ていますが、細部が異なります（人間以下のレベル）。プロンプトで指定していないのでこちらが悪いですが、紫の点線はいらないですね。

ボタンを一つ作ってください。 ただし、ボタンのインタラクションはFigmaファイルに従って下さい。

次にカードのレスポンシブを再現するために、Figmaをv0に食わせました。
色々と気になる点はありますが、概ね再現できている気もします。プロンプトの工夫が必要です

画面幅に応じてUIが変化するカードコンポーネントを１つ作ってください。 ただし、画面幅に応じたUIは添付したFigmaファイルを参照してください。 添付したFigmaファイルには画面幅が小さいパターンと大きいパターンがあります。 紫色の点線は不要です。

修正精度

一発でうまく再現できるわけないので、プロンプトでの修正力をチェックしてきます。
まずは画像。png画像とプロンプトをインプットしましたが、うまく修正できています。

カード内の画像は添付した画像を利用してください。

画像周りの余白が気に入らないので、修正します。

画像の左右上下の余白はなくしてください。

以上のように、単一コンポーネントであれば指示どおり修正してくれます。
一方でマークアップがある程度出来る人であれば、自分で修正した方が早いです。

新規追加

新たにコンポーネントやパーツを追加したくなることもあると思います。
その際に、ちゃんと追加できるかを検証しました。

以下の結果から問題なく追加出来ていることがわかります。

プロンプトのみで追加

サインアップ画面に3rd partyログインをプロンプトのみで追加しました。
サインアップ画面の作成にはFigmaファイルを利用しています。日本語と英語が混在しています。

"Create Acount"の下にサードパーティのアカウントによるログインを追加してください。サードパーティのアカウントはGoogleとAppleとしてください。

Figmaファイルを参照

サインアップ画面に3rd partyログインをFigmaで作ったものを追加しました。
加えて、Google, Appleアイコンがうまく表示されてなかったので、プロンプトにて別途Google, Appleの画像を添付してはめ込んでもらうようにしています。Appleアイコンが潰れてしまいました。

Please recreate the UI shown in the attached Figma frame as accurately as possible under "Create Acount".

アイデア発散

このセクションでは実装フェーズでなくデザインフェーズの可能性を探ります。
意匠の探索行為を行い選択肢を広げ、コンセプトや目的にあったベターな手段を選ぶことも大事です。AIでぱぱっとUIを出したものが唯一の正解であるとは断言できないので、アイデアを発散させることも重要になってきます。

以下の検証結果からいうと、"発散性"においては十分活用可能ではないかと思います。
あくまでプロンプト次第（どういったUIの発散をしたいか）ですが、発散は十分可能かと思います。

とりあえず、作成したUIを食わせてみてAIと相談してみる。という活用方法が浮かびます。

ボタンUIアイデアの発散

Figmaファイルのボタンからあまり離れないスタイルを出力してもらっています。インタラクションも作ってもらいました。

ボタンの形とインタラクションを検討しています。 Figmaファイルを参考に9個のボタンを作ってください。 ・１個はFigmaファイルを忠実に再現したもの。 ・４個はボタンのスタイルのバリエーション ・残りの４個はホバーインタラクションのバリエーション

もっと自由にアイデアを発散してもらってます。コンセプトや特徴も記述してもらっています。

You are a highly creative UI/UX デザイナーAIです。

Figma ファイルにあるボタンコンポーネントを参照しつつ、
あえて基本ルールや既存のデザインパターンに縛られず、
自由な発想で新しいボタンデザインを7案提案してください。

— 要求事項 —
• 用途やステート（Hover, Active, Disabled など）はあえて指定しません。
• 色、形状、テクスチャ、グラデーション、アニメーション、タイポグラフィ、余白……
思いつくまま、制約なく探求してください。
• 各案ごとに「デザインコンセプト」と「ビジュアルの特徴」を２〜３行で説明してください。
• 必要に応じて、簡単なイラストもしくは擬似コード（CSS/JSX）スニペットで雰囲気を伝えてください。
— 出力フォーマット（Markdown） —

案 1: <自由なネーミング>

コンセプト：
特徴：

/* 任意のスニペット例 */
.button-free1 { … }

※プロンプトは生成AIを利用

カルーセルUIアイデアの発散

カードUIをくっつけてカルーセルをFigmaで作成しました。
そのカルーセルのUIアイデアを発散してもらっています。

9.のフルスクリーンカルーセルが出てきたのは面白いですね。
画像も一部勝手に生成されています。特定のメーカーの完全にアウトな画像が出てくるので、著作権ガードがついているAdobe Fireflyで作った画像などを渡してあげるなど注意が必要です。

I need to validate the carousel styles. Please generate 10 different carousel variations. The first carousel should be based on the current design. The remaining nine carousels should explore diverse variations in form, color schemes, and interactive elements.

おわりに

触らないとわからないことが色々出てきました。

また、触った過程でFigma AI, Adobe Fireflyなどの活用も行ったので楽しかったです。

単一コンポーネントやモジュールにフォーカスしましたが、PC向けの大きなページの作成も行いましたのでそちらの記事も書こうと思っています。

おまけ

v0 x Figmaのノウハウ

https://vercel.com/blog/working-with-figma-and-custom-design-systems-in-v0

Discussion