Alright, alright, you've been working on your design and prototyping in Figma for months, and due to the nature of your project, a dark mode wasn't planned from the beginning. It's okay, it happens to all of us sometimes. Come on, you already had enough problems on your plate.
Don't worry, it's time to buckle up and get to work.
How can we do it in the most organized and clean way possible?
Here are my 3 key tips.
1-Define your primary color palette. It's obvious, right? But sometimes due to lack of time or poor team organization, our project ends up with an overwhelming number of colors, making our work more complicated and causing developers to hate us more than necessary.
2- Create your palette. Once our exercise of personal redemption is done and everything is in order, we assign a palette equivalent to the one already created in light mode. ⭐Here comes the magic⭐: create palettes that preserve the brand identity of the app. Be original; dark mode doesn't have to be black. In the example case, the brand has a very soft light aesthetic with pastel pink tones. Dark mode was quite a challenge.
Hey! Remember colors shouldn't just be pretty, create a color palette with contrast to make your design accessible, remember you have tools like https://www.w3.org/WAI/standards-guidelines/wcag/glance/es to help you with this task.
If you work with Figma, you also have plugins that can help you automate the process, such as A11y, Able etc.
Alright, this is an example of how we can structure the use of the color palette in our project. Personally, I think it's a way to organize and streamline the whole process that we are going to undertake afterwards.
This part is tedious, but trust me, it will save you a ton of work in the future.
Okay, everything is set. Now let's focus on the two elements that will make our lives easier when creating a dark mode, or simply speeding up any design changes in our project.
1-Components: Always work with components. Seriously, if you're a junior UI designer, you might still be working with groups. It may seem obvious, but if you're just starting out, I highly recommend getting the hang of components as soon as possible.
- Advantages of using components: You can apply changes in all the design in seconds. You can create variables, to make dynamic components, create variations of the same component, to be able to create a functional UI Kit and to be able to reuse it in different projects.
Remember, these components can help us in creating the dark mode in the sense that sometimes we need to be prepared for the issues we can encounter with dark mode shades. In the example case, product cards need a small white border, which is not typical of dark mode, but it's what the project required.
- Disadvantages, NONE, don't be lazy and work with components, you will take a little time at the beginning but really you will thank yourself.
2-Variants: are not really necessary for a UI but also facilitate a lot of work and are a crucial tool to generate the dark mode in a dynamic way.
In this way, we will be able to assign color variants from our original palette (light) to our variant or variants of palettes. It is important that the colors of the variants are assigned. That is to say, if we have a button with a color that we have called X, that button has to have the color X, not its hexadecimal tone, so when we assign the dark variable, the color will change automatically. This allows us to also create eventual design changes or automatically change a color throughout the project.
That's all.
Today's hard work will be tomorrow's rest. If you follow these tips, the changes in the project will be very pleasant.
Top comments (0)