# Figma Vue Export

> Generate Vue components from Figma with Weblify and keep your design system in sync with code.

- Canonical page: https://www.hypermatic.com/articles/weblify-figma-vue-export/
- Published: 2025-03-12T00:00:00.000Z
- Updated: 2025-03-12T00:00:00.000Z

Vue teams deserve the same quality handoffs as React shops. Weblify exports Vue single-file components (SFCs) from your Figma frames, complete with `<template>`, `<script setup>`, and `<style>` sections. Tokens, responsive rules, and props map directly from your design.

### Works with Vue 2 or 3
Choose the syntax your app uses. Weblify adapts the export to match (Options API or Composition API), making it easy to slot into existing codebases.

### Variant-aware
Like the React export, Weblify converts Figma variants into props, so toggling states is straightforward for engineers.

### Export steps
1. Highlight the component/state combo in Figma.
2. Run Weblify, select Vue, and preview the generated SFC.
3. Paste it into your repo and hook up data.

Vue teams finally get a design-to-code path tailored to their stack.

### Automation idea
Add a script that drops Weblify’s exported SFCs into your component library repo whenever the Figma file updates. Engineers get notified via pull requests, and the design-to-code pipeline stays transparent.