0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#11 in Variables & Tokens

Export styles to CSS variables

by Felix Thålin

users
34K
likes
341
saves
7.5K
comments
16
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v4 · Jun 1, 2021
First published
Mar 3, 2020
Publisher
Felix Thålin
On this page
Overview

About Export styles to CSS variables

Export styles to CSS variables is a free Figma plugin published by Felix Thålin in 2020. It works in Figma Design and has 34,494 users and 341 likes on the Figma Community. It ranks #11 in Variables & Tokens on our lists.

Generate and export your styles to CSS custom properties (variables). To use, create some styles, run the plugin, select your color system (RGBA, Hex, or HSLA) and if you want to use REM units for text, and hit Generate.

Changelog

What's new

Version 4 · released Jun 1, 2021

  • Fixed a misstake that causes shadows to be generated incorrectly.
Trust

Permissions and privacy

Network access

This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest. Questions about data handling go to the developer's support page.

Rankings

Where Export styles to CSS variables ranks

Compare

Export styles to CSS variables alternatives

  1. 1

    Tokens Studio for Figma

    by Jan Six

    369K users7.6KFree + paid features

    The scalable design tokens solution for Figma

    View details
  2. 2

    Design System Organizer

    by Arthur

    205K users3.1KFree + paid features

    Extended swap for variables/styles/components, export variables/styles, bulk-audit library & mockups

    View details
  3. 3

    Styles & Variables Organizer

    by Chenmu Wu

    140K users3.3KFree + $15 upgrade

    Apply styles and variables to all your designs with one click!

    View details
  4. 4

    Export/Import Variables

    by Honza Toman

    91K users1.7KFree

    Export variables from one file and import them to another. Supports modes, references, and scopes.

    View details
  5. 5

    Styles to Variables

    by Yann-Edern Gillet

    90K users1.1KFree

    Convert your Figma Styles into Variables

    View details
  6. 6

    Variables Pro

    by Figterate

    82K users479Free

    Variables Pro | Swap, Import, Export Variables

    View details
FAQ

Export styles to CSS variables FAQ

What does Export styles to CSS variables do?

It's a Figma plugin by Felix Thålin that runs in Figma Design.

Is Export styles to CSS variables free?

Yes. Export styles to CSS variables is free to install and run from the Figma Community, with no paid tier listed.

How do I install Export styles to CSS variables?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Export styles to CSS variables?

By user count, the closest alternatives are Tokens Studio for Figma, Design System Organizer and Styles & Variables Organizer. Compare all of them on the best Figma plugins for variables & tokens.

For developers

Built this plugin?

Use this page as a landing page for Export styles to CSS variables: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Export styles to CSS variables on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/export-styles-to-css-variables/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Export styles to CSS variables on figmaplugins.co" width="220" height="48"></a>