Variables to CSS

About this plugin

Simple way to export your Figma variables as CSS variable tokens with support for breakpoints (Mobile, Desktop) and REM for font sizes.

How to Use

1. Open the plugin from Figma's Plugins menu → Variables to CSS
2. View your CSS - All Figma variables automatically convert to CSS custom properties
3. Copy to clipboard - Click the copy button to use in your project
4. Configure settings (optional) - Adjust rem size and breakpoint as needed

Variable Mode Conventions

The plugin automatically converts Figma variable modes to CSS using these conventions:

1. Light/Default mode → :root selector
2. Dark mode → .context--darkclass
3. Mobile mode → @media (max-width: 768px)
4. Desktop mode → @media (min-width: 769px)
5. Custom modes → .context--[mode-name]classes

Automatic Conversions

1. Variable names → CSS format (e.g., Color/Primary → --color-primary)
2. Font sizes & line heights → rem units (configurable base: 16px)
3. Variable aliases → var() references
4. Colors → hex or rgba format

Settings

- 1rem equals: Base pixel value for typography (default: 16px)

- Breakpoint: Mobile/Desktop threshold (default: 768px)

Settings save automatically and persist between sessions.