👋 Friday Five (Best Way to Build a Table, Testing Design Systems, Color Systems, and More)

Hi Friends!

We’re back with the 21st issue of Friday Five, a twice-monthly email with our best design tips. Each one picked to help you level up your design skills.

🤩 Heads up: The UI Prep Design System 5.0 will be released just in time for Q1! Check out tips #3 and #4 for a little sneak peek. 👀



DESIGN SYSTEM TIP

Take the time to establish a useful and scalable color system upfront

Tip from Nathan Curtis

Colors are foundational to the entire design process and need to be established early for consistent use. Avoid painful refactoring work by getting them right from the start. Take the time to make them accessible, easy to use, and scalable.

Evergreen color tips

  • Use a few light grays and a few dark grays. Leave the medium grays out as they give a "wireframe" look and make color contrast tricky.

  • Name color styles with 0-100 labels to reflect the lightness range (eg. "$color-gray-500"). This also provides more flexibility to slot new colors in when needed.

  • Make picking a color easy with fewer color options. Instead of 10 variations of orange, try sticking with ~4.



DESIGN SYSTEM TIP

Use a design system to improve developer efficiency and design consistency

Tip from Sparkbox

Getting buy-in for a design system can be hard. There's a lot of upfront work needed and it's difficult to measure success. Lucky for us, Sparkbox ran a little test to prove they're worth the investment. Here's how they did it..

Sparkbox had a designer create a contact form with a well-known design system, IBM’s Carbon design system, in Figma. Then had 8 developers code the form once from scratch, and once using the Carbon design system while timing themselves. The results? Using the design system was a huge advantage!

Summary of results

  • Development time was 47% faster using the design system (2hr vs 4.5hr)

  • Visual consistency for five of the eight developers improved when using the design system.

  • Accessibility was improved for three of the eight developers (note: the Sparkbox team is already very well practiced with accessibility)

Share these results with whoever you need design system buy-in from on your team!



FIGMA TIP

Add a fill to your variant container

Tip from UI Prep 5.0 (coming soon!)

Place your variant container directly on the canvas and add a white or black "fill" as the background. This removes any unnecessary frames from your page and makes your variants easier to see.

Using multiple themes for one component? Take things to the next level with a sharp black/white gradient so you can see every variant clearly.

How to add a sharp gradient background

  • Add a fill to the variant container

  • Update the fill type from "solid" to "linear"

  • Add two new points on the linear line

  • Update the point colors to white, white, black, black

  • Place the middle white and black points as close to one another as possible


FIGMA TIP

Get the best of both worlds, build your tables with columns AND rows

Tip from UI Prep 5.0 (coming soon!)

At last, a solution to the table column vs row debate. Use both! In general, designers prefer building tables with columns for greater flexibility. Despite one major drawback. Updating the row color for hover/selected state or zebra stripes is a pain. You have to update the fill for each individual cell.

The UI Prep solution: create columns with the data, and rows with the background style. Then layer them on top of each other. With this method, you get all the flexibility of columns while being able to quickly update row styles. With interactive components, the row styles can even update automatically in a prototype to show different states. 👉 Click here to see the table in action!

First, create column component variants

  • Use atoms for each cell type (eg. text, text + icon)

  • Use base component for each column row height (eg. regular, condensed)

Second, create row component variants

  • Use atoms for each row style (eg. default, hover)

  • Turn atoms into interactive components for faster prototyping (eg. "while hovering")

Third, create table component variants

  • Place rows beneath columns

  • Create a variant for every possibility (eg. row height, zebra stripe, header contrast)

Fourth, design with table component!

  • Remove columns as needed

  • Update column types

  • Update row height

  • Update row styles



TOOL TIP

Save time and update your styles in bulk

Tip from Batch Styler

Rather than going in 1-by-1 to update text or color styles, use the Batch Styler plugin to update them in bulk. This is a huge help when customizing a new component library or making updates to your branding.

How to update styles

  • Install and open Batch Styler

  • Select multiple styles (eg. text or color)

  • Make bulk change (eg. font family or hue value)

  • Select "update styles"



Have a great weekend!

Molly & Jake at UI Prep

0 comments

Current user avatar

Recent posts

👋 Friday Five (Design Principles, Spacing, Accessibility, and More)

🥳 UI Prep 5.0 is LIVE! Download the latest version today!!!

⏰ UI Prep 5.0 launches tomorrow! Preview the design system in Figma 🔮✨

 🚀 🚀 🚀 UI Prep 5.0 Launch Date and Sneak Peek Video Tour! 👀 

👋 Friday Five (UI Prep 5.0 Release Date, Interface Inventories, Colors Styles, and More)

See all posts from UI Prep