Dark Mode Variables

What is a Dark Mode Variable in Figma?

A dark mode variable in Figma is a predefined setting that allows designers to specify color values that automatically adjust when switching between light and dark themes. These variables are part of Figma’s broader capabilities for creating design systems that are both flexible and consistent.

Why Use Dark Mode Variables?

Utilizing dark mode variables offers several advantages that can significantly enhance the design process. First, they provide consistency, maintaining uniformity in design across different themes without the need to manually adjust each component. This leads to greater efficiency, as it reduces the time and effort required to create and update user interface components across different modes. Lastly, scalability is greatly improved; as your design system grows, variables make it easier to manage and update large-scale projects, ensuring smooth updates and modifications.

Designing Dark Mode

• Begin by duplicating your existing light mode design. This initial setup is a one-time effort—once your variables are in place, any additions or changes in light mode will automatically reflect in dark mode.
• Set the background color of your design to black with an opacity of 55%. This will ensure that your design has a soothing background that's easy on the eyes in low light conditions.
• Next, move on to the text elements. Change the text color to white with a 70% opacity to maintain readability against the dark background.
• For the icons and the title text, set their color to full white. This will make them stand out crisply against the darker background, ensuring they catch the user's attention effectively.
• We’ll set the paragraph text with the same setting as the previous text, using a white color at 70% opacity.
• Now, let's style the buttons. For the bottom left button, set the text color to full white and the background color to black with the same 55% opacity as the main background. This consistency helps maintain a cohesive look throughout the interface.
• For the bottom right button, set the content color to white again. However, for this button, add an outline with a white color at 10% opacity. This subtle detailing will distinguish the button slightly from the others while keeping the design sleek and minimal.

Creating Variables

Now that our dark mode design is done, the next step is to create the variables. To define your color variables, start by deselecting all active elements in your design. You can press 'Escape' to ensure no elements are selected, then navigate to the 'Designs' tab and access the local variables section.

• First, let's rename our existing collection of colors to make it more descriptive and easy to reference. For the purposes of this tutorial, we'll rename our collection to "Colors."
• Click on the button and choose “color” to create our first variable.
• Now, we'll use the Light mode design as our reference point to ensure our colors are well adjusted for visibility and aesthetics in a lighter environment.
• Our first color variable will be for the card’s background. Set this variable to white with a 55% opacity. This specific setting will help maintain text readability while keeping the background subtle and not too stark.
• As we add more variables, it’s crucial to name each one clearly for better organization. Naming our variables systematically will save us time when we need to make adjustments or when applying these colors to different components in our design.
• Next, create a color variable named “Primary” and set this to a solid black. This will be used for text and other elements that require a strong contrast against lighter backgrounds.
• Following that, as we can see in our design, we need a “Secondary” variable with black at 70% opacity. This choice is ideal for less dominant elements that still need to maintain visibility without overpowering the primary content.
• For the buttons, let’s set up two more variables: one for the button background and another for the button outline. Name the first variable "Button Background" and set it to white with 55% opacity, mirroring our card background for consistency. Then, create the "Button Outline" variable and set it to black with 10% opacity. This subtle outline will help define the button's edges without making it too prominent, ensuring it blends seamlessly with the rest of the design.

Dark Mode

Having completed the light mode design, it's time to shift our focus to dark mode. We can now add the dark mode and rename it accordingly. Rename the existing mode to "Light" to reflect the design settings we've applied so far.

• Now, we'll begin setting up the dark mode by matching the design elements to their appropriate color variables, which will be adjusted to suit a darker theme. Start with the most fundamental element: the background.
• For dark mode, set the background color to black. This will serve as the base for all other components and ensure that everything contrasts well against a dark setting.
• Next, proceed to adjust and match the rest of your variable colors to align with our dark mode design.
• Set the primary and secondary color to white, maintaining the same opacity to ensure that every element stands out against the darker backdrop. Each variable should be carefully adjusted to maintain legibility and visual harmony across the interface.
• The button’s background will be black and the outline white. This maintains clarity and adds a stylish touch.

Apply Variables to Components

The variables are now set, we can proceed with the next step which is to replace the direct color selections (hex codes) with our variable names.

• For each component, start by clicking the four dots icon. This will open up a menu where you can select the appropriate color variable.
• Begin by assigning the first variable to the background.
• Next, for the top content, set the text to the secondary color variable, ensuring it complements the background while remaining legible. For the logo, we’ll make it stand out by applying the primary color variable.
• Moving on, set the title below to the primary color as well, drawing attention and maintaining consistency with the logo. Then, assign the secondary color to the text paragraphs, enhancing readability and creating a visually balanced hierarchy.
• Lastly, set the text color of the bottom left button to primary and assign the button’s background variable. For the bottom right button, set its content to a primary color and apply the variable for the outline.

And just like that, all variables have now been assigned, and the project beautifully reflects the chosen color scheme.

Test and Adjust

In the layer menu in the right sidebar, we can now choose a specific mode, and an indicator will appear in the layer menu on the left, showing its actual mode. A toggle at the bottom of the layer menu will also let us choose between the modes and we can now effortlessly switch between light and dark mode. Now that our dark mode variables are set, let’s take advantage of this setup. We can duplicate the design and create a dark mode version of it with just one click. This feature saves time and ensures consistency across different themes.

• Let’s now build a slightly bigger frame to test and demonstrate the effectiveness of our dark mode variables.
• For this tutorial, we need to assign the frame to dark mode. Click on the four dots icon in the layer menu and add a variable from the colors collection.
• Name it 'local.' Now, with this setup, you have the option to set the frame to dark mode. Simply click on the icon and choose 'dark.'
• Now, drag the design into the frame, and you’ll see that nothing changes. That's because our design is manually set and locked to light mode.
• You also have the option to set your design to 'auto,' which will allow it to adapt to the environment.

You can see that now, we can drag it in and out of the frame, and it will automatically switch between the two modes, showcasing the versatility of our design in different conditions.

Integration

Integrating system-wide dark mode variables becomes especially beneficial when dealing with interactive elements like buttons. For instance, a button can have predefined styles for both light and dark modes that include text color, background color, and border styles. When these buttons are used within components like cards, switching from light to dark mode—or vice versa—can be accomplished swiftly and seamlessly. This not only speeds up the design process but also reduces the potential for errors, ensuring that every element behaves consistently under different visual conditions.

Furthermore, the ability to implement these styles easily and quickly across various components means that projects can scale more effectively. As the number of components grows, maintaining uniformity and implementing theme changes can be managed with just a few clicks rather than adjusting each element manually. This makes Figma’s dark mode variables an indispensable tool in modern digital design, catering to the growing demand for adaptable and user-friendly interfaces that respect users’ preferences and environmental conditions.

Conclusion

The use of dark mode variables in Figma is a powerful feature that significantly enhances the design process, particularly when creating interfaces that need to adapt across different themes like light and dark modes. By defining and applying these variables to elements such as text, backgrounds, and buttons, designers can ensure consistency and efficiency throughout their projects.