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?

Use a publicly reachable Vue or Nuxt route for URL capture. For local work, export a complete HTML document with its generated CSS and assets, verify that it renders independently, and load the file through manual input. Editable output maps supported content on a best-effort basis.

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

Scoped styles work when their generated CSS is available to the capture. Use a public built page, or provide a complete HTML document with the compiled stylesheet. The data-v-* attributes alone do not contain the CSS rules they reference, and editable output remains best effort.

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

Yes. Use a publicly reachable Nuxt route for URL capture, or export a complete HTML document with its generated CSS and assets for manual input. Verify the exported file independently before importing it.

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 rendered layout and typography — into a Figma review artifact. Use a public built page for URL capture, or a complete HTML document with its generated CSS and assets for manual input. Editable output maps supported content to native layers and should be checked against the source.

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 best-effort editable representation of the real component, not a static image.

The Vue to Figma workflow

Four manual steps. 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

Choose the complete source

Open DevTools (F12), find the root element of your component in the Elements panel — typically a For a public build, copy the route URL. For local work, export a complete HTML document that includes Vue's generated scoped stylesheet and required assets. A data-v-* attribute without its CSS does not reproduce the component styling.

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 and run HTML to Figma. Use URL mode for the public route, or load the complete exported file through manual input. Scoped styles, Tailwind utilities, and CSS variables only contribute when the document includes or can reach their generated CSS.

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 generated scoped stylesheet still carries the rules. Keep it with a manual export, or use a public URL that can load it. The data-v-* attributes alone are insufficient.

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

Supported padding, margin, gap, and measured flex/grid geometry can inform editable frames. Responsive rules become a static state, and the imported result should be compared with the source.

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?

They work when the compiled scoped stylesheet is available. The data-v-* attributes identify selectors, but they do not embed those CSS rules in isolated markup.

Can I convert Nuxt.js pages to Figma?

Yes. Use a public route for URL capture, or export a complete HTML document with its CSS and assets from nuxt dev or a production build for manual input.

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.