Project

Figma + Vue Starter

Starter template for design-to-code with Vue.js

Vue.jsFigmaOpen Source

What it is

A starter template that connects Figma designs to a Vue.js project. It extracts design tokens from Figma and generates a matching component structure so you’re not starting from scratch every time.

Why I built it

Every new project starts the same way — you have a Figma file and an empty code editor. Setting up the bridge between them takes hours. This template cuts that setup to minutes.

What’s included

  • Design token extraction (colors, typography, spacing) from Figma
  • Pre-configured Vue component structure
  • Hot reload dev environment
  • Responsive breakpoint system matching Figma frames

Built with

Vue.js, Vite, Figma Plugin API.

View on GitHub