Figma to Code

@maya-design

Convert Figma designs to production-ready React, Vue, or HTML/CSS code

4.1K DOWNLOADS

612 STARS

4.5 RATING

5 REVIEWS

2.3.0 VERSION

MIT LICENSE

● INSTALL

sv install maya-design/figma-to-code

Requires the sv CLI. Installs to your project automatically.

.cursor/skills/figma-to-code/SKILL.md

Download and place the SKILL.md file into your .cursor/skills/figma-to-code/ directory.

curl -sL https://skillvault.md/api/packages/maya-design/figma-to-code/download -o figma-to-code.zip

Downloads the package as a zip archive to your current directory.

https://skillvault.md/api/packages/maya-design/figma-to-code/download

Download the zip, extract, and copy the relevant files into your project.

● WHAT'S INSIDE

SKILL: layout-extractSKILL: token-syncSKILL: component-genCLAUDE.MD

● COMPATIBILITY

Claude CodeCursorCopilot

● DESCRIPTION

Figma to Code

Bridge the designer-developer gap. Export your Figma designs and this skill converts them into clean, semantic, responsive code.

Skills

layout-extract — reads Figma JSON and produces flex/grid CSS layouts
token-sync — maps Figma design tokens to CSS custom properties or Tailwind config
component-gen — generates React or Vue components from Figma component nodes

Supported Output

React + CSS Modules
React + Tailwind
Vue 3 + Composition API
Plain HTML + CSS
Svelte (experimental)

bash

sv install maya-design/figma-to-code

● VERSION HISTORY

No version history available.

● REVIEWS

Sam Webcrafter

★★★★☆

Great concept, getting better fast

The layout extraction is impressive — it handles auto-layout really well. React + Tailwind output is clean. Docking a star because complex animations don't translate yet.

Feb 28, 2026