On this page
About Styles to Variables
Styles to Variables is a free Figma plugin published by Yann-Edern Gillet in 2023. It works in Figma Design and has 89,739 users and 1,113 likes on the Figma Community. It ranks #5 in Variables & Tokens on our lists.
In the developer's words
Variables are now available! Hurray!
Stop manually adding all your styles; instead, use this plugin to spend more time playing with aliases, modes, and updating your design system components.
Only compatible with Color styles (solid and transparent).
How to use it
- Open the plugin
- (Optional) Choose a name for your new collection
- (Optional) Use first-level of groups to create modes
- (Optional) Link styles to the variables created
- Click "Convert Styles into Variables"
- And voilà!
If you want to split your color styles across modes, please move your file from your drafts to a paid external team, or upload it to a team in another organization.
If you need help on anything, I wrote a dedicated guide with the most asked questions about the plugin ↗︎, please have a read before adding a comment to the plugin page.
What's new
Version 9 · released Jul 9, 2023
- Add footer
Permissions and privacy
Network access
Styles to Variables declares no network access, so it runs entirely inside Figma and can't send your file anywhere.
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where Styles to Variables ranks
Styles to Variables alternatives
- 1
Tokens Studio for Figma
by Jan Six
369K users7.6KFree + paid featuresThe scalable design tokens solution for Figma
- 2
Design System Organizer
by Arthur
205K users3.1KFree + paid featuresExtended swap for variables/styles/components, export variables/styles, bulk-audit library & mockups
- 3
Styles & Variables Organizer
by Chenmu Wu
140K users3.3KFree + $15 upgradeApply styles and variables to all your designs with one click!
- 4
Export/Import Variables
by Honza Toman
91K users1.7KFreeExport variables from one file and import them to another. Supports modes, references, and scopes.
- 5
Variables Pro
by Figterate
82K users479FreeVariables Pro | Swap, Import, Export Variables
- 6
Design Tokens
by Lukas Oppermann
65K users2KFreeExport design tokens to JSON or GitHub.
Styles to Variables FAQ
What does Styles to Variables do?
Convert your Figma Styles into Variables. It's a Figma plugin by Yann-Edern Gillet that runs in Figma Design.
Is Styles to Variables free?
Yes. Styles to Variables is free to install and run from the Figma Community, with no paid tier listed.
Is Styles to Variables safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Styles to Variables declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Styles to 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 Styles to 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.
Built this plugin?
Use this page as a landing page for Styles to Variables: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/styles-to-variables/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Styles to Variables on figmaplugins.co" width="220" height="48"></a>