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

Hi Friends!

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

🚀 🚀 🚀 UI PREP 5.0 LAUNCH DATE! The latest version of the UI Prep design system UI kit will be launched on JANUARY 5TH. Check out tips #3, #4, and #5 for a little sneak peek!

DESIGN SYSTEM TIP

Creating a new design system? Start with an interface inventory

Tip from Brad Frost

Before your start building a new design system or overhauling an existing one, take inventory of your existing UI (every type of button, input, tab, card, etc). This will help your team view the product on an atomic level, weed out inconsistencies, and plan for the new system.

How to conduct an interface inventory

1. Open your project/product/website

2. Take screenshots of every UI element type/variant

3. Categorize screenshots and place them on a frame or slide

4. Present findings to your team/boss/client/organization

Other benefits of an interface inventory include convincing decision-makers that a design system IS needed, ensuring all UI components are accounted for, and responsive retrofitting.

DESIGN SYSTEM TIP

Pass ideas quickly between designers and developers like a “hot potato”

Tip from Dan Mall

Ideas should be passed between designers and developers quickly like a “hot potato”. Rather than the designer dumping a large amount of work on the developer like a “waterfall”. Using the “hot potato” method allows for greater collaboration, understanding of processes, and faster progress.

How to “pass” the hot potato

• Sit together: Designers and developers can learn a LOT just by seeing how the other works.

• Hangout on Zoom together: Leave a zoom chat open for a few hours every day to simulate being in an office together.

• Send asynchronous recording: Bridge time zone gaps by sending videos of your questions, comments, and processes.

FIGMA TIP

Use base components with large variant sets

Tip from UI Prep

Make creating and editing large variant sets easier by nesting a base component inside of each one. For example, create a base component for each button type (eg. icon placement, size, resizing behavior). Then nest an instance of the base inside of each variant and apply overrides to create unique versions. This keeps everything consistent and allows for bulk editing.

Base component best practices

• Place a “.” before the base name to keep it from being published in the team library.

• Keep layer names consistent (eg. “icon”, “text”) so their overrides are persistent while designing.

FIGMA TIP

Get specific with color styles

Tip from UI Prep

Create distinct color styles for key use-cases (background, text, outline). Even if their colors are similar or the same. This is especially relevant for different black/white/gray colors which are prone to misuse. The specific names will make choosing colors while designing easy. And the specific use-cases will make editing colors much more flexible.

General colors

• Primary/accent/feedback: 50 - 900

Specific colors

• Background: 100-Primary, 200-Secondary, 300-Tertiary

• Text: 100-Primary, 200-Secondary, 300-Disabled

• Other: 100-Outline, 200-Division, 300-Select, 400-Hover

FIGMA TIP

Combine (some) icons as variants

Tip from UI Prep

Combine related icons together as variants. This makes designing with them easier because you can use the variant dropdown or on/off switch to switch between versions. It also allows you to make the components interactive for faster prototyping.

Icons that should be combined as variants

• Checkboxes

• Radio buttons

• Arrows

• Visibility

• Bookmark

• Flag

• Ect..

Happy New Year!!! 🎉

Molly & Jake at UI Prep