v0, Vercel's AI-powered UI builder, just shipped a significant upgrade to its Figma integration. The new import pipeline goes far deeper than a screenshot-style visual pass: it now reads layout structure, typography, components, icons, and images directly from your Figma files and turns them into functional, production-ready React code. The headline claim is higher fidelity than ever before, and the mechanism behind it makes that believable.

From screenshot to structured read

The old way to get a Figma design into an AI code generator was to export a PNG and hope the model could infer spacing from pixels. v0's Figma integration now extracts visual and structural context directly from your Figma files, analyzing both the visual layout and underlying design tokens like color palettes and spacing. This usually results in higher fidelity prototypes than working from screenshots.

The five things the new import reads are worth spelling out, because each one closes a gap that used to require manual correction:

• Layout -- auto layout constraints, frame hierarchy, and spacing values, not just a flat image
• Typography -- font families, weights, sizes, and line heights as actual tokens
• Components -- Figma component instances, so v0 can map them to shadcn/ui equivalents
• Icons -- icon assets extracted and matched, rather than hallucinated from context
• Images -- actual image assets pulled through, not placeholder boxes