Designers

Introduction

Philosophy

Using Figma variables and styles is an evolution from painting pictures to building systems. It reframes design as a shared language between disciplines, where we communicate with design tokens that carry intent, not just appearance.

This philosophical shift redefines our role as designers from creators of static visuals to architects of language that bridges design and engineering.

Benefits

Figma variables and styles have established new best practices around how design systems should be structured and managed. These best practices result in the following benefits and impacts.

Benefit	Impact
Adaptability	Existing components and patterns can scale across platforms, devices, etc. without being rebuilt
Consistency	Centralizing values ensures that every component and pattern adheres to the same rules
Developer handoff	Clear and consistent language is created between designers and developers as variable and style names correspond to design tokens used in code
Efficiency	Speeds up the design process by providing a predefined set of styles
Governance	A tiered system (primitive, semantic, etc.) controls which decisions are locked down and which are flexible
Scalability	Easy to update and maintain designs across projects of any size
Theming	New themes, brands, or densities can be added as modes with minimal effort Modes ensure that components and patterns automatically adopt the correct styling

Terminology

What are design tokens?

Design tokens are the single source of truth that represent the small repeatable design choices that construct our visual language. A token is a concept, a named decision, whereas a Figma variable is its direct raw implementation and a Figma style is a bundle of tokens applied to a specific property.

To learn more, go to the Tokens section.

What are Figma variables

Figma variables are reusable values that can be applied to various design properties. Instead of manually changing individual elements, we can update a variable and every element linked to it will automatically change. This is useful for managing design tokens, maintaining consistency, creating different themes, and more.

The following variable types are included in the RHDS library.

What are Figma styles?

Figma styles are reusable bundles of tokens created for specific properties. Think of them as a shortcut for applying a consistent look to components. When we update a style, every object using that style will update across your files, ensuring visual consistency.

The following style types are included in the RHDS library.

• Colors (like gradients)
• Text (bundled tokens like font family, line height, size, weight, and more)
• Effects (like drop shadows)
• Layout grids

Using variables and styles

The introduction and evolution of Figma variables and styles represent a significant shift.

New ways of working

Figma variables and styles usher in a new era of systems thinking. Instead of thinking in terms of individual screens, we are now encouraged to think in terms of a structured hierarchical system of design tokens.

Here are some key workflow shifts for designers:

• Abstracting decisions with tokens
• Designing for themes and modes
• A deeper connection to code and development

Theming

Figma variables and styles create a powerful and efficient system for theming. This capability allows teams to manage multiple design language modes from a single unified source of truth.

The power of theming extends far beyond color schemes. Here are other ways we might leverage modes for advanced theming in the future:

• Accessibility
• Multi-brand systems
• Spacing and density
• Platform- or product-specific

Finding and applying

Helpful tip

All RHDS components and patterns are preloaded with variables and styles that connect to our design tokens.

Fill

To apply a Fill variable, when an element is selected, select the four dots icon next to the Fill title. From here, browse the list of fill variables or search for something specific.

Type

To change a type style, select the current type style under the Typography title. From here, browse the list of type styles or search for something specific.

Drop shadow

Adding or changing a drop shadow style is about the same process as a type style.

Switching between color schemes

Figma variables are organized using modes to enable switching between light and dark schemes. The default color scheme is Light scheme.

To switch color schemes, select the menu in the Appearance panel and choose another scheme. To reset to default, select the — (minus) icon next to the dropdown.

Help text

Every variable and style has help text included. Just hover to see it. If any help text is confusing or needs edits, contact us.

Best practices

Detaching

Do not detach variables or styles, this is the most common way to introduce inconsistencies. Check the library first and if you still think you need something new or edited, contact us.

Primitive variables

Do not use primitive variables because they break the connection to theming and semantic meaning.

Support

For support using Figma variables and styles, you can get answers faster if you connect with us on Slack.

Developers

To get started using our design system as a developer, go to the Developers page.