Optimizing Figma variables and components

Learn how to build a flexible and responsive design system in Figma using tokens and components.

Our goal is to build a design library that represents our code components as closely as possible. We also want users to be able to change between themes and viewport sizes without having to manually set the properties on every component.

Approach

Using a Card component, I will demonstrate some ideas, techniques and conventions that help us achieve our goal.

The focus is first on a combination of achieving a close match to code with a great user experience for consumers. The secondary focus is on making it easy to maintain. The best case is to achieve both of course.

We start with a new Figma file and add a basic Card component.

Configuration

Currently the component is static. It does not react to any change in our design system or to a change of mode. If we want to use it in a different context, we have to override all its properties.

This approach is called customization¹ and is enabled for all components in Figma by default. In fact, you can’t even disable it. However, customization is something we hardly ever want…