Figma to Vuetify
A VS Code extension that automatically converts Figma CSS variables to your theme variable format (e.g. Vuetify, design tokens).
Features
- Convert Figma CSS vars like:
background: var(--Colors-Background-bg-overlay, #0d121c);
to:
background: rgba(var(--v-theme-background-bg-overlay), 1);
- Works with a single keyboard shortcut
- Smart token name transformation (CamelCase → kebab-case)
- Works inside any CSS / SCSS / Vue / HTML file
- Selection or current line support
Installation
From Marketplace (Recommended)
- Open VS Code
- Search for
Figma Var Converter
- Click Install
Manual Installation
vsce package
code --install-extension figma-var-converter-1.0.0.vsix
Quick Start
1. Select a Line or Place the Cursor
background: var(--Colors-Background-bg-overlay, #0d121c);
2. Press the Shortcut
Ctrl + Alt + F (Windows)
Cmd + Alt + F (Mac)
3. Result
background: rgba(var(--v-theme-background-bg-overlay), 1);
How It Works
| From |
To |
var(--Colors-Primary, #8EF251) |
rgba(var(--v-theme-primary), 1) |
var(--Colors-Background-bg-overlay, #0D121C) |
rgba(var(--v-theme-background-bg-overlay), 1) |
| Supports nested tokens |
--Colors-Gray-100 → --v-theme-gray-100 |
Automatic handling of:
- Prefix replacement (
Colors → v-theme)
- CamelCase to kebab-case
- Fallback colors preserved
Keyboard Shortcut
| Shortcut |
Description |
Ctrl + Alt + F (Win) |
Convert selected line or text |
Cmd + Alt + F (Mac) |
Convert selected line or text |
You can customize the shortcut from VS Code Keybindings settings.
Commands
| Command |
Description |
Figma Var Converter: Convert |
Converts Figma-style CSS vars to your theme variable format |
Example
Before:
color: var(--Colors-Text-Primary, #ffffff);
background: var(--Colors-Background-bg-overlay, #0d121c);
After:
color: rgba(var(--v-theme-text-primary), 1);
background: rgba(var(--v-theme-background-bg-overlay), 1);
Development
# Install dependencies
npm install
# Run in VS Code debug mode
F5
# Or build a VSIX package
npx vsce package
Changelog
v1.0.0
- Initial release
- Figma → Theme var conversion
- Keyboard shortcut
- Automatic token normalization
Author
Kerolos Zakaria
Portfolio • GitHub • Marketplace • LinkedIn
License
MIT © 2025 Kerolos Zakaria
