How do I capture a Vue component that depends on Pinia state?

Run the app locally with the desired Pinia store state populated — log in, navigate to the right route, or use Vue DevTools to manually set store values. Once the component renders the state you want to capture, copy the outerHTML from the browser's DevTools and paste it into html2design. The plugin captures the rendered output, not the source code, so whatever is visible in the browser is what gets imported into Figma.

Vue to Figma — Convert Vue.js Components to Figma

Q: How do I convert a Vue component to Figma?

Run your Vue app locally with npm run dev (or via Nuxt dev server). Open the component in your browser, right-click the root element in DevTools → Copy → Copy outerHTML, then paste that HTML into the html2design Figma plugin. The plugin converts the rendered output — including scoped styles resolved by the browser — into native Figma layers.

Q: Does Vue's scoped CSS affect the Figma output?

No. Vue scoped styles (using the scoped attribute in Single File Components) are resolved by the browser at render time. The html2design plugin reads computed CSS — the final styles the browser calculated — not the source stylesheets. Your scoped styles will be fully reflected in the generated Figma layers.

Q: Can I convert Nuxt.js pages to Figma?

Yes. Run your Nuxt app with nuxt dev, navigate to the page or component in your browser, and copy the rendered HTML from DevTools. Paste it into the html2design plugin. This works for any Nuxt route, including server-side rendered pages — as long as you can view the rendered output in a browser.

Vue to Figma —
In Two Minutes

Converting Vue.js components to Figma means rendering your component in the browser, copying the output HTML, and pasting it into the html2design plugin. Vue's scoped styles, Composition API state, and Nuxt server-rendered output all land in Figma as native, editable layers — no public URL, no Chrome extension.

What is "Vue to Figma"?

"Vue to Figma" refers to the process of converting a rendered Vue.js component or page — including its computed styles, layout, and typography — into a native Figma design that designers can edit, annotate, and use as a handoff spec. The html2design Figma plugin enables this workflow by accepting raw HTML pasted directly from your browser's DevTools and generating editable Figma frames from it.

Unlike screenshot tools or Chrome extensions, this approach works entirely offline: you render the Vue component on localhost, copy its outerHTML, and paste it into Figma. The browser has already resolved Vue's scoped styles, reactive data, and compiled template — so what arrives in Figma is a pixel-accurate representation of the real component, not a static image.

The Vue to Figma workflow

Four steps, under two minutes. Works with Vue 3, Vue 2, Nuxt 3, and any Vue-based framework.

Step 01

Run your Vue app locally

Start your dev server with npm run dev (Vite), vue-cli-service serve, or nuxt dev for Nuxt projects. Navigate to the page or component you want to capture. No staging deploy, no public URL required.

If the component depends on Pinia store state or a specific route, set that state first — log in, navigate to the correct route, or use Vue DevTools to manually update the store. The plugin captures whatever the browser renders.

Step 02

Copy the rendered HTML from DevTools

Open DevTools (F12), find the root element of your component in the Elements panel — typically a <div> with a data-v-* scoped attribute — right-click it, and choose Copy > Copy outerHTML.

For a full-page capture, select the <main> or the app root element (#app). For a single component, select just that component's root node.

Step 03

Paste into html2design and generate

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin parses the HTML and reads the computed styles the browser already resolved — your Vue scoped styles, Tailwind utility classes, or custom CSS variables are all baked in before the plugin ever sees the markup.

The result is a native Figma frame: real text layers with correct fonts, fills reflecting your CSS custom properties, and a layer tree that mirrors the component hierarchy. No screenshot, no rasterized image.

Step 04

Share the Figma frame with your designer

Share the Figma frame link. Your designer can open the frame, add comments, adjust spacing, iterate on the design, and hand back a Figma-native spec — all without needing to run the Vue app or touch the codebase.

Because the Figma frame starts from the actual rendered component, the designer's changes represent a true delta from the current state. No "does this match what's live?" questions — it does, because you just exported it.

Vue-specific tips for better Figma output

Vue has a few unique characteristics that affect how components render. These tips help you get the cleanest Figma import.

Scoped styles are resolved automatically

Vue Single File Components (SFCs) use <style scoped> to add unique data-v-* attribute selectors. The browser resolves these scoped styles to their final computed values — so when you copy the rendered HTML and paste it into html2design, all scoped styles are already applied. You do not need to worry about them.

Use Vue DevTools to set component state before capturing

The Vue DevTools browser extension lets you inspect and manually edit component data, props, and Pinia store state. If you want to capture a component in a specific state — for example, a form with validation errors, a dropdown in its open position, or a dashboard with loaded data — use Vue DevTools to set that state, then copy the outerHTML from the browser's Elements panel.

Force-render CSS transitions to a specific frame

Vue's <Transition> component adds CSS classes during enter/leave cycles. If you want to capture a mid-transition state for a handoff, use DevTools to pause the animation: open the Animations panel, slow down the animation speed to 10%, trigger the transition, then pause and copy the HTML at the frame you want.

Nuxt: use the hydrated client-side DOM, not SSR source

If you're using Nuxt, the page source you see when you "View Page Source" is the server-rendered HTML before Vue hydrates it. Always copy from the browser DevTools Elements panel — not the raw page source — to get the fully hydrated, client-side DOM with all reactive data applied.

What you get in Figma

Every import creates native Figma objects — not screenshots, not plugin wrappers.

Editable text layers

Every text node — including dynamic content rendered by Vue's template engine — becomes a real Figma text layer with the correct font family, size, weight, line height, and color.

Computed spacing from CSS

Padding, margin, gap, and flex/grid layout values are read from the browser's computed styles — not the source stylesheets. What the browser renders is exactly what lands in Figma.

CSS custom properties as fills

Vue apps often use CSS custom properties for theming. The browser resolves var(--color-primary) to its actual hex value before the plugin reads it — so Figma fills reflect your exact design tokens.

Named layer hierarchy

HTML class names and element types become Figma layer names. Your component's .header__title becomes a named frame in Figma's layer panel — easy to navigate and hand off.

Frequently asked questions

How do I convert a Vue component to Figma?

Run your Vue app locally, open the component in the browser, copy the root element's outerHTML from DevTools, and paste it into the html2design Figma plugin. The plugin converts the rendered HTML — with scoped styles already resolved by the browser — into native Figma layers.

Does Vue's scoped CSS affect the Figma output?

No. Scoped styles are resolved to their final computed values by the browser before the plugin reads the HTML. The data-v-* attributes Vue adds for scoping are irrelevant to the plugin — it reads computed styles, not source stylesheets.

Can I convert Nuxt.js pages to Figma?

Yes. Run nuxt dev, navigate to the page, copy the rendered HTML from the DevTools Elements panel (not page source), and paste into html2design. Works for SSR pages, SPA routes, and static Nuxt sites.

What if my component uses Pinia store data?

Populate the Pinia store first — log in, navigate to the right state, or use Vue DevTools to manually set store values. Once the component renders with the desired data, copy the outerHTML and import it. The plugin captures rendered output, not source code, so the store state is already reflected in the HTML.