Hi Friends!

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

DESIGN SYSTEM TIP

#1. Templatize your Figma files

Tip from Darshan Gajara

Create a template of your feature files. This will save time when starting new design work. But more importantly, it will help establish a strong, consistent workflow for the entire team.

Feature File template pages

Cover: Thumbnail describing what the file includes and its status
Research: Specs, notes, competitor references, design mood boards, etc
Scratchpad: A place to brainstorm and iterate on possible solutions (the messy page)
UI: Source of truth for final designs/user flows (the neat page)
Prototype (optional): Prototypes for complex interactions
QA: Screenshots of the design in production with comments for engineers

FIGMA TIP

#2. Use multiple base components for large variant sets

Tip from UI Prep

Using base components is a great way to create and manage a large set of variants. If you’re not familiar, check out this resource. Although, using one component to define the structure of every possible variant can lead to some usability issues for both designers and developers. Keep reading to see how using multiple base components for one set of variants offers the most advantages.

One Base Component

This method was originally suggested by Figma when variants were introduced. Eg., nesting one button base component inside every button variant.

Pros: Bulk edits can be made by updating only one component.
Cons: Many overrides need to be made to each variant. This often includes hiding/showing layers inside the base components which can become confusing for both designers and developers.

Zero Base Components

A few designers (like Joey Banks) have pointed out that some components might be better off not using a base at all. Eg., every button variant is a standalone component without a nested base.

Pros: Using and inspecting components is very straightforward.
Cons: Maintaining components is more difficult. Any future edits need to be made to each and every variant. Which there can be a lot of!

Multiple Base Components

This is a hybrid approach that UI Prep uses. Instead of one base to rule them all, create a specific base component for each button structure. This way, no layers need to be hidden. Eg., create separate base components for each icon placement (none, left, right, double, combo).

Pros: Best of both worlds! Bulk edits can be made by making changes to a few bases. And, using and inspecting components is very straightforward.
Cons: None!

FIGMA TIP

#3. Use only what you need from a UI Kit

Tip from UI Prep

Most teams don’t need EVERY component or style that came with the UI kit they bought (like the UI Prep Design System). Make it clear to the team what is in use, and what is not in use. This will keep everything organized and avoid potential confusion or misuse.

How to establish what is in use

Only publish the components that are currently needed to the Team Library. To do this, deselect the checkboxes next to the components that are not needed in the “Publish Library” modal. Only once there is a need for a certain component, publish to the library so it will be available in other design files.
Delete the components you don’t need and are confident you won't need in the future. Note: Be careful you don’t delete a component that is nested inside of another component you do need.

TOOL TIP

#4. Add styles in bulk with the Styler plugin

Tip from Styler

Adding styles one-by-one to your file can be a tedious task. Instead, use the Styler plugin to add styles to your file in bulk.

Add color styles

Create multiple colors samples (shapes or frames with the desired style colors)
Name each sample layer its future style name. The easiest way to do this is to rename them all at once (CMD + R) using the formula “Category/$N00”.
Select every sample and run the plugin. Every sample will be added as a color style.