UI Colors Tips for Figma

May 17, 2022 - Reading time: 35 minutes

Intro

When designing systems in Figma, reshaping and recycling your previous ideas is always a necessary and ongoing process. So various scenarios are encountered around working with project colors. These include: updating your colors globally, sorting, naming your brand assets, using styles in multiple files, and sharing design props with your team.

How you communicate your color decisions and translate them into development will affect your projects. Beneficial or sometimes maybe not. So being flexible and continually attempting to uncover a "better" approach is rewarding. And I appreciate that a design tool like Figma allows us to do it.

Figma has a few approaches that are beneficial to these scenarios. Let's look at them and methods to better operate your project colors with the help of the Frames X — A headless design system for Figma.

Use colors from a library

When starting a new project, you could add Frames X or any other UI kit as your Team library and save yourself colossal time manually adding colors or using any third-party tools to generate them. Using an extant color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors.

Note that the team library feature will require you to have a proffesional Figma plan.

Is it worth it? Absolutely. A color library will help you communicate your stylistic decisions while staying consistent across more significant projects and teams. Colors and typography could be partitioned into separate libraries your team access without cracking your ongoing work, letting everyone be on the same page regarding the project/file they are currently working on.

Tag styles to find them faster

Tagging styles is a great practice to speed up your overall workflow in Figma. Not only when working with styles, but this also applies to components. Tagging your styles will allow you to quickly find the needed text, color, or component through Figma menus by typing a name containing a symbol or an included "tag" name.

Frames X, by default, uses the following tags:

$ — Is used throughout the system to prioritize some styles with a primary, secondary, or tertiary role. $ helps to prioritize some style groups, such as the "$Base" palette, marked because it is a system's primary palette.

[light], [dark] — Used throughout the system to describe if a color has an alternative color convertible from light to dark mode. Also, enclosing brackets tags ensure styles name identification in plugins, such as the Appearance plugin, which helps to generate a light/dark theme from your selection.

Update colors globally (Batch replace colors)

Global color replacement could help you achieve the needed contrast and unique visual style. You could create an entirely new UI color theme by tweaking global primary, secondary, and tertiary color values. Figma allows you to edit styles and propagate multiple color changes throughout your file. Global color replacement could also help you achieve the proper contrast ratio when working in a more detailed-component level (aka zoom 200%).

You could use Batch Styler Plugin or Figma Tokens plugin to speed up the global color replacement process. You could start tweaking your design system files by selecting multiple color or text values and then batch replace them with new ones without breaking any connections between styles.

Use a proper naming convention

Frames X uses literal or definitive color naming (like red, blue, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. While this is reasonably functional for most tasks, there are good reasons to use other naming conventions to better communicate on different projects and teams. You could also use semantic or contextual naming conventions instead.

A semantic naming convention uses names that describe the intent of the color ("Primary," "Secondary, "Danger," "Background," etc.). Semantic naming allows underlining the value of the color rather than using a combination of name and numeric scale, making it easy to modify the whole theme to any combination of colors we need. Other examples of Semantic names are Brand, Accent, Warning, Alert, and Success, to name a few more.

A contextual naming instead uses names that define a color for an exact type or category of component ("color-primary-button," "color-default-icon-small," "color-error-modal," etc.)

Contextual naming is good when you have your design system in a final state, at that point where you don't add new things or components to the system. With contextual naming, you'll have your project at your fingertips, with every string responding to a particularly assigned color or group of colors.

But using contextual naming from the start could quickly overwhelm and mess up your design process with hundreds of definitions to keep in mind, making it challenging to find and use colors appropriately. And, because it is challenging to resist the urge to define every color, naming things from a contextual perspective will always grow exponentially. So apply it only if needed (usually for more minor projects from personal experience).

Understanding color models

We tend to feel comfortable with the HEX color model as designers. But HEX values are tough to read. It's unlikely you would be able to imagine the color of an element by reading the hex value, except if you are an expert designer.

RGB (red, green, blue) notation is a better alternative to writing and sharing colors, giving us access to the exact scope of colors as hex values in a much more readable format. Colors on the web are made of three values, meaning the higher the proportion of red, green, and blue, the more saturated the resulting color will be.

RGB is well known and tends to have a better reputation among developers than HEX. So it may be a good idea to explain how to copy a CSS-friendly color code to your fellow developer friend.

In Figma, you can access the color code on the inspect tab. You could select the RGB color model from the Colors section dropdown. This will let you copy/paste this directly into a stylesheet or code editor without additional formatting hassle.

HSL is another helpful and less known color model (hue, saturation, lightness). This model seems to be the far more intuitive way to adjust color values and is easier to understand, even from a non-tech perspective. HSL can be easily explained thoroughly. For example, we can get darker and lighter variants of the same color by adjusting the lightness parameter or a saturated color with saturation value, etc., which is a convenient way to interpret how our eyes perceive colors.

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want and then tweak them. It is also easier to create pallets of matching colors by keeping their hue values the same and varying the lightness/darkness and saturation.

Adjust nested or mixed colors

Figma has a helpful tool you could spot on the right pane under the Selection colors name. Selection Colors allow you to change the appearance of your design without selecting each layer individually and then applying colors to the selected layer. This comes in handy when creating many color variations for your UI. It'st'svealed when you have more than one style in your selection.

You could view, select and alter the Fill/Stroke color if all layers have the same fill or stroke. And you may inspect and alter colors in the Selection colors section if the layers in your selection have different colors applied.

Use the selection colors feature to tidy up styles within a frame or components. Merge duplicated Fill or Stroke and improve the overall consistency of your designs before making the presentation.

Utilize color tokens

Color tokens are a core element of Figma Tokens plugins. A community plugin by @jansix. Color tokens are atoms discreetly connected with styles while also providing choices that Styles don't provide in Figma.

Utilizing Color Tokens will let you access various workflows for updating, creating, and changing Fill/Stroke color globally. You could get more information on using Color Tokens on the official plugin website.

Bonus Tip: Change colors in Figma with keys

You could change the Fill/Stroke colors with the Up/Down on your keyboard and the Shift key for bigger steps between colors. Quite handy when you're looking king for that one color or a particular match for the existing palette.

---

Thank you for scrolling until the end! Senior designers know that it's never too late to learn something new. If you're' wondering where to start or what else to learn, check out our 2022 Handbook and UI kit for Figma — Frames X. With over 4K UI elements and components to learn from.

Dark Mode UI Best Practices

October 28, 2021 - Reading time: 10 minutes

Eight tips for designing dark mode UI

What exactly is a dark theme/mode first?

A dark mode is a night-friendly color theme that mainly focuses on using dimed/grey colors for surface and UI elements. Darker colors reflect less light while still providing a great reading experience. All thanks to the high contrast between sharp elements and subtle surfaces.

As a design pattern, a dark mode is usually living across the user interface as a toggle. The dark mode is designed to be supplemental to the system's default (or light) theme.

Thanks to extra vibrancy, the dark mode has become quite popular, making foreground content stand out against the shaded backgrounds. But besides being fancy, what are the perks?

Dark mode perks

Dark theme is a good marketing move for making your UI stand out among similar brands or products. The deep, heavy backgrounds can become a perfect addition to your brand visuals.

Dark mode as a feature can help reduce eye strain when operating your product. Especially if your product is heavy with text, a dark mode can help enhance your user's retention and focus.

Dark mode can potentially save your phone energy. It's proven that dark mode consumes six times less power on your screen by emitting less light and, as a result, can prolong your app lifespan and usage time.

Please note that energy consumption mostly depends on your phone type and not the colors. So if you want to measure dark mode battery-saving efficiency -- review the developer's guidelines for specific phone types and screens.

The dark mode experts say it is healthier to read against dark surfaces, while other studies arrive at the opposite conclusion. But in my opinion, the dark mode is just a trend that looks sleek and, in theory, can make your brand more comforting.

So without further ado, here are the best practices to help build your dark mode UI.

Plan your color use

Avoid or limit white on pure black colors. You can use pure black (#000) as a background for dark mode, but make sure you dim your text slightly. Just enough not to cause eyes to bleed from cutting-edge contrast.

Pure white makes our eyes need to absorb more light. When this happens, fonts can bleed with the background and cause the text to blur, especially on older monitor models.

Brand your dark color

To make your dark mode more unique, use a much darker version of your primary brand color as the surface.

Combine with colored fonts to make it look even more special. ✨

Combining your surface color with colored fonts is an excellent choice to create a branded dark mode experience. Using just a gradation of black and white is also okay. Just be sure to make your text easy to read instead of being fancy for no reason.

Reduce color saturation

Avoid fully saturated colors in dark mode.

High saturation has a visual "shaking" effect when viewed on darker surfaces. Instead, use low saturation or slightly muted versions of your primary colors for best performance.

Communicate depth

Use a scale of lighter colors to translate the elevation. Avoid using shadows in dark mode. Instead, use border property to emit depth levels for UI elements. Distant elements should still have lower elevation compared to the closer elements. 

Avoid using shadows in dark mode. To better communicate depth -- make sure the objects closer to the user are brighter. This will help to build a better visual hierarchy.

Ensure your dark mode contrast

Dark mode, just as the light should meet the minimum required WCAG standards to ensure all text is legible with enough contrast. You can use plugins to check your contrast design right in place.

Here are our favorite tools to help you double-check the contrast ratio without leaving the tool of your choice:

• Stark (Figma, Sketch, and XD plugin).
• Contrast (Figma plugin).
• A11y (Figma plugin).

Design light mode first

While bringing your designs from light to dark mode, keep all the visual cues in place. Don't ignore or remove some colors for the sake of a dark theme not to confuse users.

Instead, prepare a color pallet that focuses on inverting existing colors without UI losing efficiency. 

There are plenty of plugins that can help you with this. Here are my favorites:

• Appearance (Figma plugin).
• Dark mode magic (Figma plugin).
• Camilo (Sketch plugin).

Use base colors to design dark mode

To make it predictable turning your light-themed UI to the dark side. Use a set of base or "neutral" colors with the same transparency values from the very start of your project.

A set of transparent colors can ease your life a lot. Instead of constantly choosing different shades of gray, you can use a set of transparent colors to convert your designs to dark mode predictably.

Don't overuse dark mode

It's a good idea to use dark mode for most things. Yet using a bright, striking background also can do a great job in conveying your design. Dark mode can be perfect for helping focus on a task, but nothing beats the final flash at 2:00 am when surfing eBay or amazon.

The light mode is great for catching your attention. It's popping up, waking up the user, and instantly transitioning his attention to one of the focal points, like a call-to-action headline, button, or form.

Tip: If you are making a product for Mac/Windows uses. It's good to adapt your product theme to sync with the user's current theme automatically. This can help users to feel at home, making a great first impression.

Conclusion

Follow the listed tips when planning the dark mode for your digital product.

Remember, there should be a strong reason behind implementing it into an existing and perfectly working product. Consider the content, context of use, and the device on which the design will appear.

But no matter what. The dark mode can benefit your product, especially when using your phone at night, saving battery, or viewing memes in a dark atmosphere.

Useful resources

• Material dark theme guidelines.
• Darm mode UI inspiration.
• Figma tokens — a plugin to help customize and adapt your design system to multiple themes.
• Contrast — a plugin to help check the contrast ratio of background and foreground elements.

---

That's all. Thanks for the read! 🙌

Enjoyed? Subscribe and share this article with others!

How to Design Striking CTA

September 21, 2021 - Reading time: 5 minutes

Actionable do’s and don’ts to help improve your call to action.

First of all, what is a CTA Button? Call-to-action (CTA) are the buttons that are meant to guide users towards your goal conversion. It’s a fundamental part of your interface that users need to press to make the action you want them to take.

CTA buttons can vary in style and size depending on your goal. Some common examples of call-to-action buttons are:

• Add to cart button
• Sign in/Register button
• Download button

All CTA buttons have a goal: to get your app or page visitor to click and convert.

So here is my set of tips to help you create better call-to-actions and increase your design conversion rate.

Use valuable and actionable copy

Don’t use “submit” or “send” on your form buttons. Instead, provide a copy that speaks the same language as the user does.

Instantly show users what they will achieve by pressing your button.

Make your CTA’s dead obvious

Use bold, highly contrasting colors for your CTA’s.

Don’t try to blend/mix your primary converting buttons alongside other UI elements or backgrounds.

Ensure your CTA’s have a large tap zone

Don’t make your conversion buttons too small. Do make them prominent and bold.

When working on a web project, it’s a must to use a set of buttons for different resolution breakpoints.

Don’t be afraid to add some spice

Don’t make your buttons look boring. Instead, use both style and interaction to build the urge to smash that pretty & fun thing.

Make your vocabulary dead clear

Ensure your CTA’s vocabulary is clear and actionable.

User attention is precious, so use the momentum to quickly get to the main point with a short but striking copy.

Therefore, it’s crucial to be open to longer text variations when designing your buttons. Just make sure the action behind the text is 100% predictable.

Add keywords to CTA’s

Images that act as buttons, like product cards or galleries, must have “alt” tags.

The attached information helps to rank your page higher and provides helpful context to people with visual disabilities.

Make sure that all clickable elements have <alt> tags included.

Use Me instead of You

Based on the research by Unbounce, a first-person copy like “I” and “my” is more effective than using “you” and “your,” resulting in higher conversion.

Since the primary driver for buying and clicking things our own emotions. Using the first-person pronouns in your CTA’s increases emotional impact by associating a personal benefit with action.

Based on my experience, using this trick and a friendlier tone results in a better response from visitors. ❤

Use descriptive buttons

Add descriptions to promote the idea of pressing your button.

Put extra proof, rating, or your product best feature to create anticipation towards clicking and achieving something.

---

That’s all. Thanks for the read! 🙌

Use these tips and your surveillance to come with new cool buttons ideas.

To help you quickly design & test your CTA, you can use tools like buttonoptimizer.com.

If you enjoyed this article, feel free to subscribe and share these tips with others!