Zenn
🎨

v0 × Magic Pattern ~ 無料でできちゃう爆速Figma制作フロー

に公開
AI
React
デザイン
v0
tech

TL;DR

ステージ ツール アウトプット 所要時間
1. 生成 v0.dev コード生成・UIプレビュー 1–2 分
2. 変換 Magic Pattern Chrome拡張 Figma生成リンク（オートレイアウト化済み） 30 秒
3. 編集 Figma 情報設計 / 配色 / プロトタイプ 任意
4. フィードバック v0.dev / Figma UI調整・文字/サイズ調整 継続

https://v0.dev/
https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp
https://www.figma.com/community/plugin/1304255855834420274/magic-patterns

背景 ― 「まずは Figma でワイヤーを切る」派にこそ効く、コードレス v0.dev → Figma 逆輸入

Figma でしっかりワイヤーフレーム (WF) を組んでから
　→ 開発者に渡し
　→ 実装が上がってくるまで待つ……
というのが従来の流れかと思います。

しかし、今回紹介するのは、リバースエンジニアリング的な発想です。

  1. コードを書かずに UI を生成
    • プロンプト入力だけで クリーンな HTML を取得
    • デザイナーでも「実装に限りなく近いモック」を 1 ~ 2 分で得られる
  2. コード → Figma” をワンクリック変換
    • 1のアウトプットをブラウザで開き、Figmaデータに変換
    • Auto-layout 化されたレイヤー構造のIDが即座に生成、Figma上でIDを貼り付けるとインポートが終了
  3. Figma 上でいつものワイヤー調整を続行
    • 生成直後から Auto-layout が効いているので、細かい文字変更・デバイス幅や余白の調整がドラッグ操作だけで完結
    • “コードを触らずに” プロダクションレベルのコンポーネントを量産できる

結果、「デザイナー自身が 0 行コーディングで動く UI の原型を立ち上げ、即 Figma に取り込んで磨く」 という新しいワークフローが実現できる世の中になりつつあります。具体的なツールについて紹介していきます。

1. v0.dev で “叩き台 UI” を生成する

https://v0.dev/

  1. https://v0.dev にアクセスし、プロンプトに 「SaaS の概要ページ、ヒーローに 3D モックアップ、CTA 2 つ」 などと入力。
  2. 数秒で React + Tailwind + shadcn/ui コードが生成されます。コードは open in new tab ボタンを押せば、生成画面をブラウザタブで確認可能です。

  1. 技術ナレッジのあるユーザー向けTips
    • Figma ファイルを持っている場合は Import from Figma で既存デザインを AI に学習させて精度を上げます。
    • GitHub 連携 → Vercel に 1‑click Deploy まで行えば、即座に Preview 環境が生まれ、後工程の UI 差分チェックが楽になります。
# 例: v0.dev から生成したコードを GitHub に push → Vercel にリンク
npx v0 export ./
git init && git add . && git commit -m "initial v0 scaffold"
gh repo create your-org/landing --public --source=. --push
# Vercel ダッシュボードで「Import Project」→ GitHub リポジトリを選択

2. Magic Pattern で “コード→Figma” に瞬間転送

https://chromewebstore.google.com/detail/html-to-react-figma-by-ma/chgehghmhgihgmpmdjpolhkcnhkokdfp

Chrome ウェブストアで HTML to React & Figma をインストールし、
ローカル Preview または任意の Web ページを開いた状態でアイコンをクリック。

操作 出力 補足
Code Component.jsx + styles.module.css Tailwind クラスはそのまま残るため後続の shadcn/ui カスタムも容易
Export to Figma layer Id を取得 Auto‑layout レイヤー & コンポーネント化。

埋め込み AI 編集（Edit with AI） 機能で「<Button> を secondary バリアントに変えて」等と指示すると JSX 側も即バッチ処理されます。

3. Figma でワイヤーフレームを磨く

Figma Pluginで Magic Pattern を検索・クリック。

https://www.figma.com/community/plugin/1304255855834420274/magic-patterns

先ほど取得したlayerIdを入力するとインポートされる。

⌨️ Shift+A 連打で Auto‑layout を多重に適用し、レスポンシブ想定を先回り確認。

終わりに

このワークフローを導入してから、要件定義 → ワイヤーフレーム提出 までの工数は体感半分くらい削減できました（筆者自身これで何度もワイヤーを通してきました）。
“コードベース” で始めても、デザイン側とのコミュニケーションコストを増やさず、
むしろ レビューサイクルを高速化 できるのが最大のメリットです。

デザインと実装、どちらのファーストステップも捨てない。
「生成 & 変換 & 同期」　で、2025 年のプロダクト開発を加速しましょう 🚀

Discussion