Figma Variables

Stored and reusable values, applied to all kinds of design properties and prototyping actions.

What are variables in Figma?

Since the beta launch of Figma variables in 2023, loads of tutorials, guides, and examples have been made available. Figma provides a great introduction to Variables in this article and for a more elaborate walkthrough, this article includes general examples and applications.

Coloplast variables

We use collections to group related variables to make it easier finding the right ones. Another benefit is that we can exclude collections from being published which reduces the amount of variables designers have to filter.

_core – Contains all core variables and is not exported out of the library. Variables in this collection may not be used directly, and only by other variables. (Not exported)

foundation – This is the collection with all basic variables designers use to create interfaces.

platform – The platform collection makes it possible to handle states and values that change between platforms (e.g mobile, tablet, and desktop).

themes – All colour variables are contained in this collection, making it easy to switch modes and themes.

web-components – Reserved for components, this collection should not be used for anything else. (Not exported)

Working with variables

Variables provide an efficient way to design interfaces consistently. By applying our variables anywhere the hexagonal shape is available, it becomes easier to quickly create designs for different screen sizes and modes with just a few clicks.

Variables have been scoped, meaning that only relevant ones are available in any given context, making it easier to filter and find the right ones.

Colour In any space where it’s possible to input a colour value, it should be possible to find a relevant variable through the theme collection. Select a variable, then use modes to change themes while the variable remains the same.
Spaces and gaps There are variables for spaces and gaps in the foundation collection. Use these to create consistent components and sections.
Borders Variables for border-colour (themes collection) and radius (foundation collection) can be set where border properties normally are set.
Layout These variables are great for enabling responsive designs. While some (‘grid’) are reserved for Figma’s grid helpers, ‘viewport’ variables help with defining min and max frame sizes to represent various screen sizes.

Working with modes

Modes are part of collections and make it possible to change values in variables depending on a mode. At Coloplast, we use modes to handle colour themes and responsive layouts on platforms.

Themes and dark mode

A theme consists a set of token values, carefully chosen to create a specific visual appearance or style. Themes enable us to seamlessly switch between colour schemes and styles by using a single set of variables. Light mode, dark mode, and high-contrast are examples of themes.

Example of a design in light and dark modes

Platform

We use platform modes to control layouts on mobile, tablet, and desktop. UI components can be set up to adapt, moving elements around or adjusting space and size depending on platform.