Introducing Figma's Variables for Seamless Design-Development Workflows
Introduction to variables
When working with styles in Figma to manage colors, effects, and text styles, grasping the concept of variables becomes much easier.
Variables essentially serve as aliases for your design elements, offering a consistent reference point for specific uses of fills, stroke colors, spacing, and more. For example, rather than using a complex name like "pc.indigo500-base" to represent a color, you can employ a variable like "background-brand" which clearly communicates the color's purpose.
Variables are named based on their function, not their value. They enable you to preset elements such as spacing, text color, or button backgrounds, simplifying the process of adjusting these elements later on.
Unlock the Power of Variables
Shu Ha Ri comes pre-loaded with a meticulously crafted set of variables, designed to supercharge your workflow. From color modes to spacing, radius to widths - everything is neatly organized and ready for action.
Overview of variables
Variables are raw values, such as colors, numbers, and strings, that can change depending on the design context, for example, light and dark modes, or mobile and desktop modes. Just like styles and components, variables can be added to team libraries. When you update a variable's value, you can update designs across files accordingly.
This helps create consistent designs across projects and makes updating design systems more efficient.
Collections and groups
A collection is a set of variables and modes that can be used to group related variables together, making them easier to find. For example, you might use one collection to localize text in different languages and another for spatial values.
Furthermore, within a collection, you can organize variables by adding them to groups. For instance, you could have one group for colors used in text and another for colors used on strokes.
Figma have some great resources on more advanced uses here:
Variable modes
A mode is a way of organizing different settings for a feature in a group. Each setting is linked to a specific use of the feature. When we use the feature in a project, we can easily switch between these different settings to see how it looks in different situations.