How to create Dark mode for your designs in Figma
How to implement color themes in Figma using native features and with plugins
Currently, most platforms support Dark mode. And, when users switch the mode on their devices they usually expect that all applications will also work in it. In this article, I will show some methods that you can use to create a Dark theme for your designs in Figma.
Dedicated components
Often designers prefer to create separate components for Dark mode. In some ways, this is the simplest approach, in terms of logic. In particular, many novice designers find it easier when there is a dedicated component for each case. Including Dark and Light mode.
However, despite its apparent simplicity, this approach is often the most time-consuming. After all, you will need to create a Dark version for each component, which should also include all the variants and features of the regular one. Also often, focusing too much on how components look, designers tend to forget about the general logic of the color scheme. This leads to developers having to create 2 versions for each component as well. Or even 2 versions of the application…. but of course, these are edge cases…
Dedicated dark/light colors
If you want a scalable solution, it is most reasonable to map each color of the Light theme to its corresponding analog for the Dark theme.
This doesn’t mean, that we can simply, for example, match a “white” color with the appropriate equivalent for Dark mode. Because the same “white” color can be used for different types of elements: text, background, icons, frames, and more.
For some components, we might need a different approach when switching to Dark Mode.
To make it easier to choose colors for Dark and Light themes depending on the type of element or individually for a component, in best we should use Semantic colors: call colors not by how they look (white, blue, light, etc.), but by how and where they are used: background color, text, buttons, etc. This approach gives much more flexibility not only when you need to describe a Dark theme, but also any color themes in general.
And most importantly, it will also help simplify development.
But how to use all this in Figma? That is, how to transform a design from a Light theme to a Dark theme?
There are several options for this in Figma.
Manual color swap in the Properties panel
First of all, you can simply swap colors through the Properties panel. You can do this either for one element or for the entire screen: when you select several elements, Figma collects all the used colors in one list. And then you just need to replace each Light color with a Dark analog.
This approach is handy for many reasons:
- It’s easy to explain, even to a beginner.
- You can change the theme for each element or screen individually.
- Everything is done through the familiar Properties panel.
- It’s very transparent: after selecting a layout, you can understand from the list of colors which theme is used.
However, there are, of course, some disadvantages:
- Manual replacement of colors might be annoying and time-consuming.
- It’s hard to avoid mistakes when choosing colors. Especially when it’s part of a daily routine.
- In some cases this is inefficient.
Library swap
You can split the colors for different themes into different color libraries. This will allow to simplify the process of changing the theme.
Then to swap the theme, you can
- Go to the Team library.
- Select there the main color library (for example, Light).
- Click Swap library.
- Pick the new color library (for example, Dark)
This will only work if the color names in both libraries are 100% the same.
In this case, Figma will replace each color from the Light library with its corresponding color from the Dark library. For the whole file. Meaning it will affect all layouts in the file.
This method is very convenient, because:
- Everything is done with Figma’s built-in features.
- Figma automatically replaces everything for all elements
- Allows to avoid mistakes, that might happen with manual replacement (if both libraries are properly prepared).
But of course, there are disadvantages. Actually, for me it is only one — you can’t change colors for a separately selected screen, because the replacement is done for the entire file.
To solve this we can use a small trick. Actually, when you swap libraries Figma does not replace the color library. It replaces each color used in the file with a corresponding color from the new library (according to their names) while leaving the previous library connected. So if you still need to show designs for both modes in one file, you can copy all the designs to the clipboard, before you swap the color libraries, and paste them right after.
However, this is not always convenient: such a trick is difficult to perform if you have several pages in the file. Or if you will need to add a new design later on.
Plugins
A huge advantage of Figma is that almost any missing functionality can be implemented in the form of a plugin. I write “almost” because for safety reasons Figma has a number of restrictions that do not allow plugins to do absolutely everything. But, even with these restrictions, plugins can do a lot.
Currently, there are many different plugins that you can use to manage the colors in Figma. The only question is what kind of functionality you need and how flexible the plugin’s settings should be.
Most of the time I work within design systems and use external libraries. It is also important for me to be able to adjust the parameters of the plugin, to match the color structure of a particular library. And with these requirements in mind, I can highlight only a few solutions. If you know other plugins or methods — please share them in the comments.
Appearance
The Appearance plugin allows you to switch the color mode for any selected element in Figma. So you can select a screen or a part of it and change the color mode for it from Light to Dark and back again. The plugin is made by Alex Dyakov and he wrote an article that explains how it works its work and even gives some technical details of the implementation.
The plugin works with external libraries (if prepared beforehand) and is easy to use.
During testing, I found only one small drawback — the plugin does not work with text that uses several colors at once.
I think this is more of a bug and if you take it into account the plugin works well for daily routine.
As an alternative, I can mention the Dark Mode Switcher plugin. It works on the same principle as Appearance, but due to the lack of settings is less flexible.
Figma Tokens plugin
Another approach is offered by the Figma Tokens plugin. It allows you to set colors using tokens and combine tokens into sets. So then you can switch token sets for a selection, page, or entire document.
Working with colors is only a small part of what the plugin can do and I have already mentioned it many times. I recommend watching the presentation of the plugin’s creator at Figma Config. Jan Six shows there how you can synchronize colors between Figma and code.
Automatic dark theme generators
There are a number of solutions that offer an alternative approach — automatically generate colors for Dark mode. Meaning not switching between predefined palettes, but creating a Dark theme based on the Light one. A good example is the Dark Mode Magic plugin by Ruslan Humenny.
The plugin is great if you want to create a color palette for Dark mode from scratch and you do not have the opportunity, time, or simply desire to select colors yourself.
Thanks for reading! In this article, I have listed only some of the solutions that allow you to create a Dark theme for your design in Figma. I hope you’ve found some useful tips here that you can put into practice. Please share in the comments what other methods you use.
Let’s stay in touch! Connect with me on LinkedIn and follow me on Dribbble and here on Medium for more design-related content.
