How I use v0 to transform Figma designs into a shadcn/ui Production-Ready Website

As a designer who works with both Figma and code daily, I've refined this process to be as efficient as possible. You'll learn how to leverage v0's capabilities alongside shadcndesign’s Pro Blocks to dramatically speed up your implementation workflow, while maintaining professional quality and attention to detail.

What makes this guide different? Instead of just showing you the end result, I'll walk you through my complete process—from preparing your assets to deployment—with practical tips and solutions for common challenges along the way.

Video overview

‍

Let's dive in!

What you will need

• Figma account
• shadcn/ui kit for Figma with Pro Blocks
• Landing page design made with Pro Blocks
• Figma to shadcn/ui plugin
• v0 account
• shadcn/ui & next.js starting template in v0

Project Setup

Let’s prepare all our components and assets.

Step 1. Components

1. Make sure your landing page is built with Pro Blocks
2. Find the related Pro Blocks .tsx files in the pro-blocks package you received after the purchase
3. Create a local folder for code components: project name / components
4. Move .tsx files to the components folder

Step 2. Images

1. Make sure your assets are properly named - I name my assets so they include section name so v0 can know where to put them
2. Export logo in SVG format
3. Export images in PNG format (2x size for retina displays)
4. Create a local folder for images: project name / images
5. Move images to the images folder

Step 3. Styling Setup

1. Open the Figma to shadcn/ui plugin
2. Access Manage Variables tab
3. In the Export tab, Generate CSS variables for colors and radii
4. If you have multiple themes set up in your Themes collection, make sure to copy the styling from the theme you used for your website design
5. Save generated CSS in the project name / styles.txt file

Step 4. Content Preparation

1. Prepare website copy in a structured text file. You can do it with Chat GPT or Claude 3.5 Sonnet by uploading the image of the website
2. Save the copy in project name / copy.txt file
3. Make sure to organize content by sections
   1. Section name
   2. Pro Block reference
   3. Content (headings, paragraphs, icons)

Implementation Process

When we have everything prepared, we can jump straight to v0 and work on the implementation.

Step 1. Components

1. Open our starter template in v0
2. Upload files from components folder to v0 chat (max 10 files per one upload)
3. Prompt: “Add these files to the components folder in our project”
4. Wait until the prompt is processed.
5. Check if all components were properly added to the components folder in v0. If not, troubleshoot the problem with v0 until all components are added.

Step 2. Logo

1. Upload logo.svg to v0.
2. Prompt: “Add this SVG as a logo component saved as logo.tsx and make sure to use it in the navbar and footer.”
3. Wait until the prompt is processed.
4. Check if the logo was properly added to the components folder in v0. If not, troubleshoot the problem with v0 until resolved.

Step 2. Content

1. Upload copy.txt file
2. Prompt: “Add the copy to components and reorder sections on page according to this text file.”
3. Wait until the prompt is processed.
4. Check if the content was properly added to the components. If not, troubleshoot the problem with v0 until resolved.

Step 3. Styling

1. Replace default variables in globals.css with the ones from your styles.txt file
2. Update font configuration in the layout.tsx file (more details on Google Fonts usage in next.js)
3. Save the project and refresh the page.
4. Check if the styling and font was properly added and if it renders properly. If not, troubleshoot the problem with v0 until resolved.

Step 4. Images

1. Upload the images to v0 chat
2. Prompt: “Use these images in our sections. Make sure to add proper alt texts.”
3. Wait until the prompt is processed.
4. Check if the images were properly added. If not, troubleshoot the problem with v0 until resolved.

Step 5. Custom components and assets

Now you have a great starting point to improve the project or add more custom elements if you need. For example, you can add a pattern, customize the section with v0 or add a custom section you designed in Figma.

Add a pattern

1. Select your pattern in Figma found in Assets page in the shadcn/ui kit for Figma (You can also copy the code of the pattern from patterns.css found in the pro-blocks / patterns folder)
2. Paste the code in v0
3. Prompt: ”Add this svg as a pattern class to the globals.css file and add this class to our home and pricing section.”

Customize section

‍To customize the section you can simply prompt v0. Sky is the limit here. For example:

• Make the title and paragraph aligned to left in the feature-section-3.tsx
• Make the image square ratio in the feature-section-1.tsx
• Use 3 columns instead of 2 in the faq-section-3.tsx
• Add a testimonial with text, name and avatar to our hero-section-1.tsx

Add a custom section

‍You can easily add custom sections you designed in Figma with our Figma to shadcn/ui plugin.

1. Open the Figma to shadcn/ui plugin
2. Select the custom section in Figma
3. Use the “+” icon in the plugin's interface to add desktop variant
4. Optionally, select the mobile variant of your design and press the “+” icon.
5. Press the Generate Code button and wait.
6. Copy the code
7. Paste the code in v0
8. Prompt: “Add this section as [name].tsx component and add it to our website before the [existing section name].”
9. Check if the section was properly added in v0. If not, troubleshoot the problem with v0 until all components are added.

Step 6. Final touches

Before deploying your website, it's crucial to ensure everything is properly optimized and accessible.

‍SEO Optimization

‍Add metadata to your layout.tsx. Prompt v0: "Add proper meta tags and OpenGraph data to our layout.tsx file for SEO optimization."

export const metadata = {
  title: 'Your Website Name',
  description: 'Your website description',
  keywords: 'relevant, keywords, here'
}

‍Accessibility Improvements

‍‍Check heading hierarchy. Prompt: "Verify and fix heading hierarchy (h1, h2, h3) across all sections to ensure proper document outline."

‍

Following this process, you can efficiently implement a Figma design using v0 in approximately 30 minutes. The key to success is proper preparation and systematic execution of each step.