Week 21 - Variables Edition
Five great plugins for managing Figma variables.
Figma launched Variables at their 2023 Config, finally bringing a way to create and manage design tokens in Figma. Variables allow you to create, store and apply reusable values across your Figma designs, with everything from text strings to more subtle things like padding and corner radius. Variables can also be used in team libraries, which means that when you update a variable, it’s changed across all design files accordingly.
In this issue, we’re sharing five, free Figma plugins that will help you dominate your Figma variables!
1. Export/Import Variables
Export variables to import them somewhere else.
Variables, like styles, are only created for a specific Figma file, so they won’t be available in another. Export/Import Variables lets you export a JSON file of a collection of variables so you can later import it using the same plugin into another file. It’s perfect if you need to migrate a library of your design tokens, or if you’ve downloaded a library from Figma Community and want to import variables into your own design system.
🎁 FREE
🦋 Easily migrate variables from one place to another
👍 All variable types supported
2. Sheets to Variables
Turn Google Sheets into variables.
Do you use a spreadsheet to organize your design tokens? Then this Figma plugin is for you! Sheets to Variables transforms your Google Sheets into Figma variables. Paste your spreadsheet’s URL into the plugin and click “Import and Sync Variables”. If you need to create different modes, such as light and dark themes, create a new column in your spreadsheet for your alternate mode, then use the plugin to bring this new mode into Figma. It’s also a great tool for collaborating between content and design: content teams can create a spreadsheet with all reusable text strings and designers can quickly import them.
🎁 FREE
➡️ Take your design tokens from Google Sheets to Figma variables
📋 Start off with their template
3. Styles to Variables
Convert Figma styles into Variables.
Since variables are still relatively new, many designers will likely have a whole bunch of styles defined which now need to be turned into variables. Styles to Variables does just that, although for now it’s only compatible with color styles (solid and transparent). To set up all these color variables by hand takes a lot of time. This plugin does it for you, so you can spend more time designing and less time defining settings for your color palette.
🎁 FREE
🎨 Quickly turn your color styles into variables
⏰ Big time-saver
4. Variables Converter
Transform Figma variables into CSS, Javascript and more.
If you’ve already defined your design tokens as Figma variables, you’ll likely need to hand them over to developers to create the same tokens in code. This Variables Converter Dev Mode plugin transforms your Figma variables into CSS Custom Properties, JavaScript variables, Compose variables and SwiftUI variables. It helps streamline the design-to-code workflow, and helps to improve consistency and collaboration when it comes to Figma variables.
🎁 FREE
🪄 Make your Figma variables dev-ready
👩💻 Converts to CSS, JavaScript, Compose and SwiftUI
5. Variables Translator
Translate the content of your text string variables.
Variables Translator takes any text string variables stored in a collection, translates the content and then creates a new mode of text variables with the translations. This way, you can create a mode for each language available in your app and switch between them to see how the translations appear in-context with your design. It’s a perfect tool for understanding how localization can affect the UI of your product.
🎁 FREE
✏️ Translate your text string variables
⚡️ Switch between languages quickly in your designs
Newsletter brought to you by ‹div›RIOTS.