Vercel's v0 Adds Drag-and-Drop Design to Kill the Figma Handoff

Vercel's v0 just shipped a significant upgrade to its design mode, and it's the clearest sign yet that the tool is no longer just an AI code generator. It now wants to be the place where design and development happen in the same tab, without switching to Figma, without burning LLM credits, and without writing a single line of CSS by hand.

The gap it's closing

The original design mode, which launched in mid-2025, let you click elements and tweak Tailwind styles through a side panel. Useful, but limited. The workflow still felt like a developer tool wearing a designer's hat. What was missing was the spatial, direct-manipulation feel that makes tools like Figma so fast: grab a handle, drag a gap, see it move.

That's exactly what this update delivers. Design mode now provides an intuitive, visual way to refine your app's UI by letting you select any element in the live preview, tweak its styles with a visual panel or natural-language instructions, and apply those edits back to your source code. But the new version goes much further than the original.

What's new in the toolbar and canvas

The headline additions are all about direct manipulation on the live preview itself:

• Floating toolbar: A contextual action bar appears over your selected element, giving you quick access to the most common operations without hunting through panels.
• Drag handles for spacing and flex gaps: You can now grab and drag to adjust spacing and flexbox gaps visually, the way you would in a design tool.
• Drag to move and reorder: Elements can be repositioned and reordered directly on the canvas.
• Delete shortcut: A keyboard shortcut to remove elements without going through the code.

These additions matter because they eliminate the most tedious part of the old loop: select element, read the current padding value, type a new number, check the preview, repeat. Now you just drag.

The side panels go deeper

Beyond the canvas interactions, two new side panels give you structural and stylistic control:

• Layers panel: Exposes your full component hierarchy, letting you navigate and select elements the way you would in Figma's layers sidebar.
• Properties panel: Controls for fonts, color, border radius, and shadows. The full suite covers typography (family, size, weight, line height, letter spacing, alignment, decoration), text color, background color, margin and padding, border color/style/width, opacity, corner radius, box shadows, and direct text content editing.
• Inspector: Shows element IDs and links, useful for debugging and cross-referencing with your codebase.

Design mode detects when your app is using Tailwind CSS and surfaces Tailwind-compatible values where appropriate, with class and token coverage depending on what's defined in your project. So if you're on a custom Tailwind config, the panel won't invent values that don't exist in your design system.

Annotations: async design review, built in

The most novel addition is the annotations system. You can now click any element in the preview, leave a comment, and send all annotations as a single bundled prompt to the AI. This is a workflow that previously required a separate tool entirely, whether that was Figma comments, a Loom recording, or a Notion doc with screenshots.

The practical implication: a designer or PM can click through a live, running app, leave pinned feedback on specific elements, and hand that off to the agent as a structured set of instructions. No more "the button on the third card in the pricing section" ambiguity.

The version system keeps everything safe

Applying design mode changes creates a normal v0 chat version, so every design-mode change is diffable, reviewable, and revertable. This is a key detail: you're not making freeform edits to a file that could get out of sync. Every change goes through the same versioning pipeline as a prompt-generated edit, which means you can roll back a drag-and-drop spacing change the same way you'd roll back a bad AI generation.

While editing, the panel exposes undo/redo for pending tweaks, a reset to clear all pending edits on the current element, and a before/after preview toggle to compare changes with the original. Pending edits are held until you apply them or leave the chat.

Where it still has limits

Design mode is not a full replacement for Figma or a standalone design tool. A few important constraints:

• It's only available on chats that use the latest preview runtime and the latest version of the chat. It is not available on read-only chats or on mobile viewports.
• v0 outputs React and Next.js with Tailwind and shadcn/ui. It will not output Svelte or Vue. If you are not on the React stack, v0 is the wrong tool.
• The agentic mode is still maturing. Complex multi-step tasks can sometimes go off track, requiring you to course-correct with additional prompts.
• Structural changes, like converting a section to a three-column grid, still require a natural-language prompt rather than a direct drag operation.

Pricing and availability

Design mode is available on all plans, including the free tier. The free plan includes $5 of monthly credits, a 7-message-per-day limit, deploy to Vercel, design mode, and GitHub sync. Paid plans start at the Team tier at $30/user/month; there is no individual paid plan between Free and Team.

The new design mode features are live now at v0.app. You can enable it from the prompt toolbar on any chat using the latest preview runtime. The official docs cover the full feature set including keyboard shortcuts (Cmd+I to toggle inspect mode, Escape to deselect).

Why this matters beyond v0

The broader signal here is about where the AI-assisted development market is heading. Vibe design in 2026 is where vibe coding was in early 2025: a real movement with real tools, rapidly expanding what is possible and who can participate in the design process. Tools like Google Stitch approach this from the pure design side. v0 is coming from the code side and meeting in the middle.

This bridges the designer-developer handoff gap and eliminates manual translation of design specs into components. The annotations feature in particular turns what used to be a multi-tool async review process into a single in-app workflow. For teams where designers and engineers both live in v0, that's a meaningful reduction in friction, and a hint at what a truly unified design-to-production environment could look like.