Vue to Figma: Import Vue.js Components into Figma

The Vue-to-Figma Problem

Vue teams run into the same design-dev gap that affects every modern front-end stack. Your component library lives in .vue single-file components — buttons, modals, data tables, navigation — carefully built and tested over months. Meanwhile, the Figma file is a relic: a snapshot of an old design pass that no longer matches the running app.

Designers work from stale mockups and spend half their time reconciling the "Figma version" with what the dev team actually shipped. Every sprint, the gap widens.

The obvious fix is to pull the real components into Figma. But Vue components aren't static assets — they're JavaScript modules that need a browser to compile and render. Most "design system sync" tools require you to add special annotations to your Single File Components, integrate a build plugin, or maintain a parallel Storybook configuration.

There's a simpler path. Vue already renders to HTML and CSS. You can capture that output from any running Vue app — no code changes, no extra tooling — and convert it to editable Figma layers using html2design. The workflow takes about 30 seconds per component.

Why This Works

When a Vue Single File Component renders, the browser compiles the template, executes the script, and produces a standard HTML DOM with computed CSS. At that point, it is just HTML — identical in structure to what any other website produces.

The html2design Figma plugin processes raw HTML and CSS, reading the computed styles the browser has resolved and mapping them to native Figma layers. The plugin does not care how that HTML was generated — whether by Vue 3's Composition API, the Options API, Nuxt's server-side rendering, or a Vue CLI project. The rendered output is the same.

Prerequisites

• A Figma account (free or paid)
• The html2design plugin installed from Figma Community
• An active html2design subscription ($12/mo or $96/yr)
• A running Vue dev server (localhost:5173, localhost:3000, or similar)

Step-by-Step: Convert a Vue Component to Figma

Vue-Specific Workflows

Working with Nuxt.js

Nuxt 3 server-renders Vue components before they reach the browser. By the time you inspect a Nuxt page in DevTools, the full rendered HTML is already in the DOM — including content from server-side data fetching. Copy it exactly as you would for a client-side Vue app.

For Nuxt layouts and shared components (nav, footer, sidebars), navigate to a page that includes that component, pick the element in DevTools, and copy just that section's outerHTML. This gives you a clean import without full page noise.

Vue Scoped Styles and CSS Modules

Vue's Scoped Styles add a data-v-xxxxxxxx attribute to each element and generate matching CSS selectors. When you copy a component's outerHTML, the browser has already applied those scoped styles as computed values. html2design reads the computed output — not the original selectors — so Scoped Styles, CSS Modules, and plain global CSS all produce identical results in the converted Figma frame.

Working with Vue UI component libraries

Many Vue projects use Vuetify, PrimeVue, Quasar, Naive UI, or Element Plus for UI components. These libraries render to standard HTML with framework-specific class names. The import workflow is identical: open the component in the browser, copy its outerHTML, and paste it into html2design. The converted Figma frame will visually match the rendered output regardless of which library generated it.

One nuance: UI library components often wrap their content in deep DOM trees — a Vuetify button might be three nested divs deep. After importing, you may need extra time cleaning up the layer hierarchy: removing extraneous wrapper frames and flattening the structure to match your component vocabulary.

Capturing different component states

Vue components built with v-if, v-show, reactive props, or Pinia/Vuex state often have multiple visual states. Capture each separately:

• Default state — the base render
• Loading state — trigger via a mock API delay or a :loading="true" prop injected through Vue DevTools
• Error state — inject an error via Pinia or directly modify the reactive ref in the Vue DevTools panel
• Hover state — use DevTools' Force element state → :hover before copying

In Figma, create each state as a separate imported frame, then combine them as Variants under a single Component. This gives you a Figma component library that mirrors your Vue component API.

Vue 3 Composition API and script setup

Whether your component uses <script setup>, the Options API, or class-based components, the rendered HTML output is identical in structure. html2design does not read Vue source files — it only processes the DOM that the browser produces. Any valid Vue component will work.

What Gets Converted from Vue Components

html2design accurately converts the vast majority of what Vue components produce. Here's what to expect:

• Flexbox layouts → Accurately positioned Figma frames (spacing, padding, and alignment preserved visually; Auto Layout not applied automatically)
• Typography → Font family, size, weight, line-height, letter-spacing, color, text alignment
• Colors → Fills, gradients, box shadows, borders — all preserved as Figma styles
• Border radius → Mapped from CSS or Tailwind values to Figma corner radius
• SVG icons → Native Figma vector paths, fully editable
• Background images → Captured as image fills where accessible
• CSS Grid → Approximated with nested frames (partial support; positions preserved, no Auto Layout)
• CSS animations / Vue transitions → Static snapshot only; capture the component at rest
• Scoped styles / CSS Modules → Fully supported via computed style resolution

Compared to Dedicated Vue-to-Figma Tools

The Vue ecosystem does not have a widely adopted dedicated "Vue to Figma" converter. Most teams either maintain Figma manually or use screenshot-based tools that produce flat, uneditable images.

Some design-system tooling (like Supernova or Zeroheight) can sync design tokens between Figma and code, but they don't import component structure — they handle tokens (colors, typography, spacing), not component layout and composition.

The html2design approach fills the gap: it imports real rendered component structure — frames, text layers, fills, SVG paths — as editable Figma layers. The trade-off is that you capture one component state at a time rather than generating all variants in a single automated pass.

For most Vue teams, the manual-capture workflow is practical and fast enough. For teams needing to auto-generate hundreds of variants from a component catalog, a dedicated introspection tool may be worth the significant setup cost. See our full comparison of HTML-to-Figma tools for more context.

Building a Vue Design System in Figma

Once you have a workflow for converting individual Vue components, you can systematically build a Figma design system that mirrors your Vue component library. A practical sequencing:

• Primitives first — buttons, inputs, badges, chips, avatars. Small, composable, and easy to convert and clean up.
• Compound components next — cards, modals, forms, data tables. These use the primitives you have already captured.
• Page sections and layouts last — hero, pricing, navigation, sidebars. Bigger and denser layer trees, but changed less often in design work.

For each component, capture three or four key states: default, hover (force via DevTools), disabled, and loading or error. These cover the vast majority of what designers need to produce accurate mockups and handoff specs.

Once your core component set is in Figma as reusable Components, publish the Figma file as a Team Library. Designers can use components from the library in new mocks — and you can update the library by re-importing components after shipping changes, keeping Figma in sync with the live codebase. See our guide on keeping Figma designs and code in sync for the full maintenance workflow.

Frequently Asked Questions

Can I convert a Vue component to Figma?

Yes. Vue renders to standard HTML and CSS in the browser. You copy that rendered output using DevTools and paste it into the html2design Figma plugin. No special Vue plugin or code annotation is needed.

Does Vue to Figma work with localhost?

Yes. html2design works from HTML you paste directly into the plugin — it does not need to reach a URL. Your Vue dev server on localhost:5173 (Vite default) or localhost:3000 works exactly the same as a live URL. See our guide on converting HTML to Figma for the general workflow.

Does html2design work with Vue 3 Composition API?

Yes. html2design operates on the rendered DOM output, not the source code. Whether you use the Composition API with <script setup>, the Options API, or any other Vue 3 pattern makes no difference — what the plugin processes is the HTML and computed CSS the browser produces.

Can I import Nuxt.js pages into Figma?

Yes. Nuxt pages render to HTML that you can inspect and copy in DevTools. Because Nuxt server-renders to the browser, the DOM in DevTools is the fully resolved output. Copy it and paste it into html2design as you would for any client-side component. See our guide on importing a website into Figma for full-page strategies.

What about Vue UI libraries like Vuetify or PrimeVue?

All Vue UI libraries render to standard HTML. html2design does not know or care which library generated the output — it reads the computed DOM. Vuetify, PrimeVue, Quasar, Naive UI, and Element Plus all work. You may need to clean up the resulting layer tree more than you would for a hand-rolled component, since UI libraries often produce deeper DOM hierarchies.