Light and Dark Themes in Figma: A Variable-Powered Design Guide

Designing for both light and dark themes used to be a painstaking process, requiring the creation of multiple versions of each screen. Imagine designing a user interface for a mobile app that needs to seamlessly switch between a bright daytime look and a sleek, dark mode for nighttime users. In the past, this would involve duplicating screens, changing colors, and painstakingly maintaining consistency.

Fortunately, Figma‘s variables come to the rescue, making this process remarkably more straightforward. That means no more redundant designs or manual color tweaks. We’ll explore how to harness the power of Figma’s variables to effortlessly switch between light and dark themes within a single frame.

We’ll start by defining a set of tonal ranges for various colors. Think of these tonal ranges as the building blocks for your design palette. You can choose to create ranges for an array of colors — blue, green, yellow, orange, red, and more — to suit your project’s specific needs.

Setting Up the Basics

There’s no one-size-fits-all approach to establishing tonal ranges since designers have unique preferences and requirements. Here, we’ll focus on creating tonal ranges for blue and gray, serving as a foundation for our light and dark themes. We’ll set the darkest shade as 0 and the lightest as 100. This leads to a 12-step gradient that includes increments of 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, and 100. This spectrum allows you to play with subtlety and contrast in your designs.

If you’re not sure how to create these tonal ranges manually, online tools and builders can generate these gradients from a selected color. That will enable you to focus on the creative aspect of your project.

Once you’ve established tonal ranges for each color, create two distinct themes. In this example, we’ll focus on light and dark themes, showcasing the power of Figmas variables. However, this technique can extend beyond light and dark. You can also apply it to solutions like white labeling or offering a variety of themes for a product.

To start, navigate to Figma’s local variable menu. Here, you’ll create a new collection and give it a theme name. Within this collection, you’ll define a set of variables to apply to elements on the screen.

Let’s begin crafting our light theme. We’ll create a set of variables to define the core visual elements of this theme. These variables include primary, on-primary, surface, on-surface, and on-surface-variant. Before assigning values to these variables, we’ll set up the framework for light and dark themes. To do so, click the plus button to add a new variable mode. Next, we’ll rename Mode 1 to light and Mode 2 to dark. These theme names will serve as a reference point when we apply them to our designs.

Defining the Themes

Now that we’ve set the stage for our themes, it’s time to bring them to life by assigning values to our variables. Here, you have the flexibility to choose between two options: you can either use the tonal ranges defined earlier or opt for specific Hex color codes that align with your design vision.

When selecting a variable as your value, you’ll notice that the name of the variable appears as a gray pill, making it easy to identify and apply. Let’s take a quick tour of the variables we’ve created and understand their intended usage:

• primary: This variable represents the primary color that defines its identity.
• on-primary: Use this variable for elements like text or other items displayed on a primary background. It ensures readability with your theme’s primary color.
• surface: Think of this as the canvas or background for containers within your design. It forms the foundational backdrop for various elements.
• on-surface: When you need text or graphics to stand out against the background, this variable comes in handy. It defines the color for these foreground elements, ensuring they are easily distinguishable.
• on-surface-variant: For situations where you require a lighter version of ‘on-surface,’ perhaps for subtle highlights or accents.

Understanding how each variable functions is essential for crafting a cohesive and visually appealing design. With these variables in place, you’ll have control over the color scheme and aesthetics of your themes.

Basics Example

Let’s put these concepts into practice with a basic example to demonstrate how these variables can be applied effectively in your designs. In this example, we’ll showcase the use of ‘surface’ and ‘on-surface’ variables, as well as ‘primary’ and ‘on-primary’ variables.

Surface Example

1. Begin by creating a rectangle element within your design canvas. To establish the background or container for this element, assign it a fill color using the ‘surface’ variable. This sets the stage for your design element.
2. Next, add a text layer on top of this rectangle. To ensure that the text complements the surface color, apply the ‘on-surface’ variable as the text color. This ensures legibility and maintains a consistent aesthetic.
3. To complete the visual harmony, create another text layer and give the text layer a fill color using the ‘on-surface-variant’ variable. This step ensures that the text seamlessly integrates with the chosen background, while separating itself from the text above it, creating a balanced composition.

Primary Example

1. In a similar manner, let’s create a background element for a different section of your design. This time, use the ‘primary’ variable to fill the background.
2. Now, add text to this section. To maintain consistency and ensure that the text is easily readable on the primary background, apply the ‘on-primary’ variable as the text color.

What makes this approach powerful is Figma’s capability to assign frames to specific modes. This feature allows you to seamlessly toggle between different themes with ease. Here’s how it works:

1. Begin by naming the frame you’ve created to ‘Light’.
2. In the Layer options menu, you’ll find the option to assign your frame to a particular mode. In this case, we’ll assign the ‘Light’ frame to the ‘light’ theme that we defined earlier. This simple step links the frame to the light theme.
3. Now, duplicate the ‘Light’ frame, and give it a new name, ‘Dark’. After renaming the frame, change the mode it’s assigned to ‘dark’. This action will adapt the design to the dark theme you’ve defined.

The magic here lies in the fact that both the ‘Light’ and ‘Dark’ frames utilize the same variables for their layouts. However, by switching the source of the layout values from the ‘light’ set to the ‘dark’ set, you can witness an instant change in the colors of your design.

A useful tip to remember is that when you assign a mode to a frame, the mode’s name will appear in the layer’s panel next to the frame’s name, offering a clear visual indicator of the theme currently applied.

Creating the Introduction Screen

Let’s put theory into practice by creating a basic introduction screen for a mobile app. We’ll design a header, subheader, body text, and a button, all while using the power of the variables we defined earlier. Afterward, we’ll duplicate the frame and seamlessly switch between light and dark modes.

Header and Subheader

Begin by adding a header and a subheader to your canvas. To maintain consistency with your chosen theme, apply the ‘on-surface’ variable as the text color for the title and ‘on-surface-variant’ for the subheader. This ensures that your text is visually appealing and easy to read on the background.

Frame Background

Now, let’s work on the background of the frame itself. Assign the ‘surface’ variable as the fill color for the frame’s background. This creates the  backdrop for your the introduction screen.

Button Styling

For the app’s action button, apply the ‘primary’ variable as the fill color for the button background. This ensures that the button stands out as a key element of your design. Additionally, use the ‘on-primary’ variable as the text color for the button’s text, maintaining readability.

Now comes the exciting part— Duplicate the frame you’ve just created, and give it a new name, such as ‘Dark’. In the layer options menu, change the mode assigned to ‘Dark’ to ‘dark’. As you do this, watch as the colors within your introduction screen transform to match the dark theme you’ve defined.

Finishing Up

This process demonstrates the power of Figma’s variables in action. You can now toggle between light and dark themes with ease, allowing you to fine-tune your design for different user preferences or specific contexts.  By following these steps and experimenting with your designs, you’ll gain a deeper understanding of how Figma’s variables can streamline your design process and make it easy to maintain consistency across various themes.