Back to Plugins
Variables Generator
Generate local Figma variables using JSON
alias tokenstokensvariablesbuildercodejson to variablesaliasingcolorgeneratelocal variablesjsonautomate
Plugin Preview
About this plugin
Automate creating local variables by using JSON and speed up your workflow. Simply use the formats below to generate your variables, colors must be in a hex format and can support alpha channels via 8 digits.
⚠️ NOTE: This plugin only supports color variables, future updates may eventually support all variable types.
Demo
View this video demo of the plugin working with aliasing.
Single Mode
{
"VariableName": "Hex",
"VariableName": "Hex"
}
Multiple Modes
{
"VariableName": {
"Mode": "Hex",
"Mode": "Hex"
},
"VariableName": {
"Mode": "Hex",
"Mode": "Hex"
}
}
Aliasing
You can use aliasing across your local variables as long as their names are unique.
{
"VariableName": "$VariableAlias",
"VariableName": "$VariableAlias",
"VariableName": "$VariableAlias"
}
VariableNameis the name of your variable$VariableAliasis the name of the alias you are aliasing, be sure to include the $ to enable aliasingModeis the name of your mode, each variable must contain the same modesHexis the hex code of your color, supports 8-digit hex codes for transparency
Examples
Single mode that creates a color palette:
{
"black": "#0e1112",
"white": "#d4d7d6",
"grey": "#4d5a5e",
"blue": "#519aba",
"green": "#8dc149",
"orange": "#e37933",
"pink": "#f55385",
"purple": "#a074c4",
"red": "#cc3e44",
"steel": "#7494a3",
"yellow": "#cbcb41"
}
Multiple modes that use 8-digit hex codes:
{
"tab-activeBackground": {
"Dark": "#1f1f1f",
"Light": "#ffffff",
"Monokai": "#272822"
},
"tab-activeBorder": {
"Dark": "#1f1f1f",
"Light": "#f8f8f8",
"Monokai": "#00000000"
},
"tab-activeBorderTop": {
"Dark": "#0078d4",
"Light": "#005fb8",
"Monokai": "#00000000"
},
"tab-activeForeground": {
"Dark": "#ffffff",
"Light": "#3b3b3b",
"Monokai": "#ffffff"
},
"tab-border": {
"Dark": "#2b2b2b",
"Light": "#e5e5e5",
"Monokai": "#1e1f1c"
}
}
Using aliasing across collections:
Colors collection:
{
"black": "#0e1112",
"white": "#d4d7d6",
"grey": "#4d5a5e"
}
Tokens collection that references Colors variables:
{
"button": {
"Dark": "$black",
"Light": "$white",
"Monokai": "$grey"
}
}
Plugin Details
| Version | 4 |
|---|---|
| Created | December 21, 2023 |
| Last Updated | January 6, 2024 |
| Category | design-tools-other |
| Creator | Miguel Solorio |
| Stats | 155 installs, 22 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:src/ui.html
- main:dist/code.js
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the design-tools-other category.