Unlock Design Potential with Shu Ha Ri's Variable Ecosystem
Find Variables
Utilize the variables modal to establish and oversee all your variables and modes:
Deselect everything on the canvas by pressing Esc or clicking the canvas.
From the right sidebar, locate the Local Variables section.
Click on "Open Variables".
Open the Editing Modal
To change a variable alias, such as a color or number value, you can directly click and edit these in the table.
For more advanced editing, open the edit modal:
Hover over a variable’s row.
Click the Edit variable icon to open its edit modal.
From the editing modal, you can:
Change the variable’s name.
Add a description to explain how the variable should be used.
Modify the variable’s value.
Use checkboxes to scope a variable.
Add code syntax.
Hide the variable from publishing.
That's a Wrap!
After making changes to existing variables, they will automatically update wherever the variable is utilized across your designs.
For instance, if you decide to alter the color of text throughout your designs:
With styles, you'd need to manually locate and modify text colors one by one or adjust the style color, potentially impacting other non-text elements.
However, with variables, text colors are linked to individual text variables. Therefore, when adjustments are needed, you can simply modify that specific variable instead.
Figma have some great resources on more advanced uses here: