Sheets to Variables

About this plugin

Unleash the power of collaboration between your design and content teams with Sheets to Variables! Now supporting both Google Sheets and CSV, this Figma plugin transforms your spreadsheet data into Figma variables, making your designs dynamic and easy to update.

🚀 Features:

1. Import Variables from Google Sheets & CSV: Got a spreadsheet full of design variables? Simply paste the Google Sheets URL or upload a CSV file, and watch as your design variables come to life in Figma.
2. Multiple Variable Modes: Need to have different modes for variables? We got you covered. Just add additional columns and name the rename the sheet header to create new modes.
3. Multiple Variable Types: Create STRING, FLOAT (number), BOOLEAN and COLOR type variables straight from your Google Sheet.
4. Variable Descriptions: Add descriptions to your variables directly from Google Sheet. Just add $Description column in the sheet.
5. Support for Code Syntax: Add code Syntax for iOS, Android and Web directly from the Google Sheet. Just add $iOS, $Android and $Web columns in the sheet and start adding your code syntax for the variables.
6. Easy to Use: We believe in simplicity. Simply provide the Google Sheet URL and the collection name, and you're good to go.
7. Overwrite Existing Variables: If a variable already exists, don't worry! Our plugin will simply update the existing variable with the new value from the Google Sheet.
8. One-Click Template Access: Not sure how to structure your Google Sheet? Access to our pre-made template with a click of a button.
9. Ignore Columns from importing: Have some columns that you don't want to import? Exclude columns by adding a $ before the column header (e.g., rename internal to $internal).

👀 How it works:

1. Prepare your Google Sheet or CSV file with columns - one for the variable name, one for type and the others for values for different modes. We recommend using the template to get started.
2. Open the Sheets to Variables plugin in Figma.
3. Enter your Google Sheets URL or upload a CSV file, then specify the collection name.
4. Hit Import and watch as your spreadsheet transforms into design variables in Figma.

💡 Useful Tips:

1. Name and Type are reserved by the plugin to identify the name and type of variable
2. Type column should have only one for the following Values - STRING, FLOAT (for numbers), BOOLEAN and COLOR.
3. $Description is reserved by the plugin to add description to the variables.
4. $iOS, $Android and $Web are reserved by the plugin to add code syntax to the variables.
5. If there are any columns in your Google Sheet that you'd like the plugin to ignore, just add $ symbol to the beginning of the column name. E.g. If the column header is internal, rename it to $internal and the plugin will not import it.