The difference between variables and styles
In Figma, Styles and Variables are powerful tools that help designers create and maintain consistent and dynamic user interfaces. Styles in Figma are predefined specifications for design elements. They might include specifications for colour, typography, layout, and more. Once a style is created, it can be applied to any number of elements, thereby ensuring that these elements all adhere to the same design specifications. This feature is crucial for maintaining visual consistency across a design.
Variables in Figma, on the other hand, are used to store specific values that can be reused across the design. These could be colour codes, font sizes, or even complex data such as user inputs. The utility of variables lies in their capacity to make designs more dynamic and interactive. The combination of Styles and Variables in Figma allows for a consistent design, simplifies the process of making global changes, and facilitates the creation of more intricate and interactive designs.
I began creating styles and variables based on my mid-fi’s. I created styles for my type scale and main UI colours. I mainly focused on colours for the creation of my variables.
BRAND COLOURS
UI COLOURS
SECONDARY COLOURS
COMPONENT COLOURS