How to Create a Dark Mode in Figma and Not Die Trying

Amanda — Sun, 23 Jun 2024 21:42:41 +0000

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.

How to create a solution UX - UI in just 3 hours

Amanda — Sat, 02 Mar 2024 21:22:17 +0000

In my previous studies, our teacher presented a challenge in which we had to create a new functionality for an existing application, specifically WhatsApp. The task was to integrate this new feature seamlessly into the app's functions and aesthetics.

This function was to add a labeling system to the app's messages, so that the user could classify them into folders

Fortunately, since we were already familiar with the application, the challenge was somewhat easier. Nonetheless, it still took us three hours to develop a solution, design it, and create a prototype.

So, after the initial panic, let's analyze what we can do to avoid wasting time.

1- Analyze the app, its design line and structure

Working on an existing app comes with pros and cons. On the plus side, we avoid starting from scratch as colors, fonts, and styles are already established, saving us significant effort. However, the challenge lies in adapting to an existing image, language, and identity within a tight timeframe of less than 3 hours

It's crucial to persist in aligning with the established aesthetic guidelines. Any deviation in design, not in line with the predetermined standards, can lead to user confusion and potential issues in the proper functioning of the app.

2- Search for references

In this case, our references should focus more on functionality than aesthetics. When tackling unfamiliar functions, seeking references becomes crucial for realistic development and adherence to standards.

Remember, seeking references can be time-consuming. With only 3 hours available, allocate a maximum of 20 minutes to this task.

3- Create a wireframe

After establishing standards and outlining our approach, we move on to the enjoyable stage of designing. However, it's crucial not to rush into the final design immediately. While time is limited, creating a preliminary wireframe helps identify and address potential issues before diving into the final design.

Investing a bit more time upfront is worthwhile if it accelerates our work in the long run.

There are some tools that can reduce Wireframe creation time if you are new to the world of design and have not yet created a UI kit to create your wireframes, I have 2 tips for you:

1- If you are working in Figma you can download a multitude of templates to make your wireframes in a comfortable and quick way.

2- If you are not familiar with these templates, I give you my solution. Whimsical is an incredibly fast online tool.
I leave you the link to the solution here:

Whimsical link

Trust the process

4- UI Kit, Foundations and Template

Another crucial investment in our 3-hour challenge is creating a UI Kit, a foundations and finding related templates for the app we're enhancing—WhatsApp, in this case. It's worthwhile to search for free community-offered templates, and though finding the perfect one might be challenging, it saves more time than starting from scratch. If the template doesn't align with our initial design, consider modifications to make it as similar as possible.

For the UI kit and foundation, keep it simple. We're offering a quick and functional solution to a problem, and time is our foe here. Even if you think it's unnecessary, creating a basic kit speeds up assembly and future tweaks. Plus, it's handy if we revisit the project later or repurpose it for other tasks.
Nothing goes to waste!

5- Let's start with the design, finally

Now, we can dive into designing and prototyping our solution. With the dedicated time for each part, assembling everything should be a breeze.

Phew, take a breather, we made it through the stress. In a nutshell, when we put effort into each step, it really speeds up the whole design gig!

Here's the link to the Figma – take a peek at my solution: [Figma link]

Forem: Amanda