Working with Figma and custom design systems in v0
By Steven Van ·
Vercel's guide to v0 advises one Figma frame per component, and covers shadcn/ui, custom Tailwind configs and public npm packages.
Importing Figma files into v0 works best when designs are split into smaller pieces, according to a Vercel guide on the Figma integration and custom design systems. The import extracts context from a Figma file, along with any supplementary visuals, and passes it into v0's generation process.
The guide recommends treating a design as you would for a handoff to human developers:
- Put each component in its own frame, such as navigation bars, sidebars, forms, date pickers and individual landing page sections. This avoids size and dimension errors and helps the AI process each piece.
- If a larger combined design is imported, keep it and its components inside a single frame.
- Work iteratively: refine each component, then assemble full landing pages from the pieces rather than generating one long page at once. Building buttons and images first lets v0 reuse them.
On design systems, v0 uses shadcn/ui by default, and Vercel says some teams refactoring their systems around it have cut the time from design to implementation on new features by up to three times. Generations can also use a custom Tailwind config file, for example to define a gradient button. v0 also works with any public npm package, so components published to npm, or libraries such as Material UI and React Aria, can be pulled into a project.