How Our Designer Deals with Light/Dark Mode on Figma

Imagine you’re browsing your favorite app late at night. The screen is stark white, and you wince as the brightness pierces through the darkness of your room. Now, imagine switching to a sleek dark mode, the bright glare instantly replaced by soothing, darker tones that make reading and navigation easier on your eyes. This simple switch is the magic of modern UI design, a user-friendly feature we’ve all come to appreciate: dark and light modes.

Designing for both light and dark modes isn’t just about making things look good in different lighting conditions—it’s about enhancing the user experience. Today’s digital landscape is all about personalization, and giving users the ability to choose their interface’s look and feel based on their preferences is a major leap in UX design. But how do designers make this happen seamlessly? That’s where design tools like Figma come in.

I’m Shima, a UI/UX Designer at DivNotes. In this post, I’ll walk you through implementing dark and light modes in Figma using reusable color variables and intuitive design techniques. Whether you’re a seasoned designer or just starting out, mastering this approach can elevate your designs and make them more adaptable to the needs of modern users.

Understanding the Basics: Designing for Light and Dark Modes

Before we dive into the specifics, let’s talk about why designing for both light and dark modes is crucial. Every day, millions of users interact with digital products on different devices, at different times of the day. Some prefer a brighter interface, while others lean towards darker aesthetics, particularly when using screens in low-light environments. The ability to switch between these two modes gives users flexibility, enhancing both usability and comfort.

For designers, this requires careful planning. It’s not just about inverting colors—it’s about crafting a cohesive and functional experience that looks great in both themes. Figma makes this transition smoother by allowing designers to create reusable variables for colors, text, and other UI elements, which can be easily toggled between light and dark modes.

Let’s break down how to implement this effectively.

Step 1: Setting Up Light and Dark Mode Frames

First, design and create a component (e.g., a card component – so it can cover a lot of elements) in both light and dark modes, then obtain your colors from the ones used in that component distinctively for each color mode

You should see two frames side by side, representing a comparison between dark mode (Frame 1) and light mode (Frame 2). This visual comparison illustrates how a typical UI element, like a card, behaves in both modes. What stands out here is the need to carefully manage contrast, ensuring text remains legible and visuals maintain their integrity across both themes.

When you design for dark mode, the background switches to a dark color, typically black or a shade of gray. Text and buttons, on the other hand, are lightened to maintain contrast. For light mode, the reverse is true—a bright background with darker text elements. This is where Figma’s ability to manage color variables really shines.

Step 2: Managing Color Variables with Figma

This is where the real magic happens. Figma’s color variable system allows you to define reusable colors that can be assigned to different elements in both dark and light modes. Here’s a breakdown of the key features:

• Collections and Groups: On the left-hand side, you’ll notice a list of groups like “surface,” “spacing,” and “text.” These categories help organize variables, making it easy to manage and apply them across your design.
• Variables: Under each group, variables are defined. For instance, in the “surface” group, you have variables like “surface-primary” and “surface-secondary,” each with different color codes for light and dark modes. This approach allows you to create a consistent look across your design by using predefined variables instead of manually assigning colors to each element.
• Modes: Figma’s mode system lets you toggle between light and dark themes. This not only speeds up the design process but ensures that any changes made to the color palette are reflected across the entire design.

By organizing variables in collections and groups, Figma makes it easier for designers to manage complex designs and ensure consistency across different modes.

Step 3: Creating Reusable Variables

Here, you are prompted to create reusable variables for colors, text, and even numerical values. This ensures that your design elements adapt seamlessly between light and dark modes. These variables act as universal placeholders, meaning that once you set them up, you can apply them across multiple components or frames, streamlining the design process.

Now you can dive deeper into the types of variables you can create, such as:

• Color: Assign different colors to be reused across different elements.
• Number: Set numerical values that might change based on user preferences or modes.
• String: Predefine text styles that can be used consistently throughout your design.
• Boolean: This allows for more dynamic changes, such as toggling visibility or states of components.

The power of this system lies in its flexibility. Once your variables are created, making updates or tweaking the theme is easy—just update the variable, and the changes will cascade throughout your design.

Step 4: Assigning and Editing Variables

Here you can see a color variable management panel where you can see how background colors (referred to as “BG”) are assigned to both dark and light modes. The variable “BG” is set to #040404 for dark mode (a deep black) and #FAFAF9 for light mode (a very light gray/white). This ensures that the background adapts perfectly when the user switches between themes.

By leveraging this system, you don’t need to go through every frame and manually adjust the colors. Instead, by simply adjusting the variable values, all connected elements will automatically update, significantly improving efficiency.

Step 5: Applying Variables to Design Components

Now, you see the design properties panel, where variables like “BG” (background), “Button,” and “Title” have been applied. This example shows how these variables are linked to specific UI elements, allowing the design to adapt between dark and light modes seamlessly.

You can take this a step further by showcasing the actual implementation. Here, the card component is displayed in dark mode with all its elements (background, button, text, etc.) adjusted to their appropriate dark mode variables. This results in a cohesive and visually appealing design, with colors specifically chosen to ensure readability and contrast.

Step 6: Previewing the Light Mode Design

In this step, the same card component is shown in light mode. Notice how the variables automatically adjust—backgrounds, buttons, and text colors switch to their light-mode counterparts. This is the beauty of using reusable variables: once the system is set up, you can toggle between modes without worrying about inconsistencies.

Figma’s intuitive interface shows that design isn’t just about aesthetics; it’s about adaptability. Dark and light modes present unique challenges in terms of color balance and contrast, but by using variables effectively, designers can overcome these challenges.

Step 7: Switching Between Modes

Finally, you can toggle between dark and light modes in Figma. By selecting the color palette, you can quickly switch between “Default (Dark),” “Dark,” and “Light.” This feature allows you to preview your design in different themes, ensuring that your elements are optimized for both modes.

Conclusion

The process of designing for both dark and light modes in Figma is more than just a stylistic choice—it’s a thoughtful approach to enhancing user experience. By utilizing variables, reusable components, and an intuitive design environment, you can create flexible, adaptable designs that suit any user’s preference. Figma’s tools simplify what could otherwise be a time-consuming process, allowing designers to focus on crafting beautiful, functional interfaces that look great in both the brightness of day and the calm of night..

Incorporating dark and light modes into your design projects will not only make your users happier but also demonstrate your attention to detail and understanding of modern design trends. So, next time you sit down to design, don’t just think about how it looks—think about how it feels in both light and dark.