Build a Full‑Stack App in 7 Minutes with v0 (Figma to Code)

Overview

This guide follows the exact steps shown in the YouTube video by Vercel. You will:

1. Import a Figma design into v0.
2. Let v0 generate a Next.js + React app.
3. Use live editing and design mode to tweak UI components.
4. Connect a Supabase database and set required environment variables.
5. Deploy the app to Vercel with one click.

Prerequisites

• A Figma account with a design ready to import (e.g., a payment form).
• A Vercel account.
• A Supabase account (to create a database and obtain the public URL & anon key).
• Basic knowledge of React/Next.js (optional, as v0 handles most code generation).

Step‑by‑Step Instructions

1. Prepare the Figma Design

1. Open your design in Figma.
2. Click Share → Copy link.

2. Import into v0

1. Go to https://v0.dev and sign in.
2. In the sidebar, click Import Figma.
3. Paste the copied Figma URL and click Next.
4. Confirm the preview and click Confirm to attach the file.

3. Generate the App

1. In the chat, type a prompt such as Generate a full‑stack app from this design or simply press Enter to let v0 auto‑detect the design.
2. v0 will generate a Next.js project with React components. A live preview appears in the right pane.

4. Iterate on the UI

1. In the preview, click the Design icon (cursor button) or press Option + D.
2. Select a component (e.g., a radio button) and use the sidebar to modify styles:
   • Remove the black background from the selected button.
   • Add a monospace font from Google Fonts.
3. Click Apply to commit changes. v0 updates the code in the Code tab.
4. Use the Fast Edit mode for quick tweaks: highlight a component in the code and edit only that file.
5. If a change isn’t desired, use the History panel to revert to a previous version.

5. Add a Backend (Supabase)

1. In the v0 sidebar, open Connect → Supabase.
2. Click Connect and authenticate with your Supabase account.
3. v0 will prompt for:
   • Public Supabase URL
   • Public anon key
4. Copy these values from your Supabase project settings (under API) and paste them into v0.
5. v0 saves them as environment variables in your Vercel project.
6. The assistant generates additional files:
   • lib/supabase.ts (connection helper)
   • Server actions for checkout handling
   • Updated form component that posts to Supabase

6. Deploy to Vercel

1. In v0, click Publish (top‑right corner).
2. Choose Create new project and name it (e.g., Payments).
3. Confirm deployment. v0 triggers a Vercel build.
4. Once finished, a live URL appears. Click it to view the deployed app.

Tips & Gotchas

• Environment Variables: Never hard‑code your Supabase keys; v0 stores them securely in Vercel.
• Live Editing: Use the Design mode for visual tweaks; use the Code tab for deeper changes.
• Version Control: v0’s history panel lets you revert any change instantly.
• Supabase Setup: Ensure the database schema matches the form fields; you can ask v0 for the necessary SQL.
• Deployment Time: Simple projects deploy in ~30 s; more complex ones may take a minute.
• Custom Domains: After deployment, you can add a custom domain via the Vercel dashboard.

Resources

• v0 website: https://v0.dev
• Vercel documentation: https://vercel.com/docs
• Supabase docs: https://supabase.com/docs