Buninux

We've collected our top-tier best practices for designing faster in Figma. This is an evergrowing list so consider bookmarking and revisiting this page occasionally for new hacks and updated tips.

https://buninux.com/learn/figma-tips-to-design-faster

Tips to Design Faster in Figma Practical techniques for designing faster in Figma and improving your day-to-day workflow.

Validate forms in place. 📍

When validating forms, inputs, and other interactive elements, avoid using popovers.

Instead, display systems information inline, right where it touched the user's fingertips.
.

Align UI with grid steps.

Place elements with a grid. Always apply a 2 to 8px grid to define a consistent spacing across your designs. Use grid steps multiple to 2,4, or 8px to ensure a strong layout and visual hierarchy.
.

Dark Mode UI Best Practices.

What is a dark mode? 🌑

The dark theme is UI mode that reduces the luminance emitted by device screens while still meeting minimum color contrast ratios.

Dark themes help to improve ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in the darker surroundings – all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day.

.

Dark Theme UI Best Practices.

What is a dark theme? 🌑

The dark theme is UI mode that reduces the luminance emitted by device screens while still meeting minimum color contrast ratios.

Dark themes help to improve ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in the darker surroundings – all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day.

.

Accordion UI component best practice. 💡

Set the default state for primary/shorter items to stay expanded.

Don't demand an additional aim & click from your user to just read the stuff. Keep it open at first sight.

Apply color hierarchy for a better reading experience.

Use a subtle & consistent scale from a single gray color ( ) to communicating text importance, making it consecutive to read.

Avoid using pure black over pure white surfaces.

Using #000 and as your primary color will make your content look unprofessional and not "designed."

Apply color hierarchy for a better reading experience.

Use a subtle & consistent scale from a single gray color ( ) to communicating text importance, making it consecutive to read.

Avoid using pure black over pure white surfaces.

Using #000 and as your primary color will make your content look unprofessional and not "designed."

Make hit targets bigger. 🐘

Use bounding boxes to increase the tappable zone of your UI elements.

Place controls at sufficient distance from each other, making it easier ​to reach with a finger.

Use additional separators to help users avoid misclicks.

Shorten distance from a button to the label. ↔️

A right pinned button takes more time to perform the search. Use left buttons to shorten the distance between elements allowing users to recognize & do actions faster.

Inline vs. Multiline Elements.

Group inline elements using whitespace. Make your designs less cluttered by avoiding unnecessary separators for single-line elements.

Group multiline elements with dividers. Use separators to structure multiline or any visual-heavy elements.

Use the layout hierarchy to reduce content overload.

When the content is presented in a formal grid, it can overload the page, making it harder to scan.

To make your content easier to scan, use unique elements differences to make your grid less overwhelming.

As an example: put special and best deals at the top of a grid. This will bring those crucial elements more attention.

To make it easy for users to discover valuable content, give your grid a more robust hierarchy. This will help you make better layouts and, as a result, make the page less boring.
Checkboxes vs. toggle buttons

When offering users multiple options, use toggles instead of checkboxes.

Checkboxes have more visual elements resulting in more visual noise.

Toggles buttons have don’t require a checkmark with the label. As a result, we have less stuff on the screen taking our attention.

Also, toggle buttons have a larger tap zone leading to less chance of miss choosing the option.

Checkboxes vs. toggle buttons

When offering users multiple options, use toggles instead of checkboxes.

Checkboxes have more visual elements resulting in more visual noise.

Toggles buttons have don’t require a checkmark with the label. As a result, we have less stuff on the screen taking our attention.

Also, toggle buttons have a larger tap zone leading to less chance of miss choosing the option.

Tip to help you master images in UI design. 🖼️

UI Forms Best Practises pt.1

Use shorter forms. 🩳

---

UI Forms Best Practises pt.1

Use short forms. 🩳

---

Calls-to-action (CTA's) is the most crucial marketing tool. Whether they are presented in form, text links, images, or buttons, CTAs are interaction points transforming visitors into clients.

So here I want to share CTA's best practices to improve your page conversion.
Separators ✕ Whitespace

Here is a quick UI tip to help you group related elements in narrow space:

Use separators only for heavily detailed elements. In other cases, use the spacing between elements to communicate their relations.

Separators ✕ Whitespace

Here is a quick UI tip to help you group related elements in narrow space:

Use separators only for heavily detailed elements. In other cases, use the spacing between elements to communicate their relations.

Hey, in this series, I want to share my practical tips on working with images on the web. It's a comprehensive set of practices you can employ in your UI to benefit your page or blog UX.

Images are vital to your page perception. Placing them in the right order and with certain tricks can help you improve your content consumption. Swipe to find out more →

Tips & tricks to help you make beautiful gradients.

Learn to use text alignment to improve your UI readability.

Learn how to use typography to control your visual hierarchy.

In this episode, I share my actionable tips to help improve headings and achieve a better comprehension of your text content. ✨

Get the World's First Emoji Set for Figma & Sketch:

gum.co/emoji1997