👋 Friday Five (Pilot Projects, File Organization, Dynamic Components, and more)

Hi Friends!

We’re back with the 20th issue of Friday Five. But first, a quick update on the Friday Five format.

We’re testing a new format for this newsletter. Instead of sharing 5 general design links, each issue is now focused on in-depth design insights and Figma tips. You’ll learn something new and useful each issue! We’re also planning to send Friday Five twice a month vs weekly. Enjoy the new format below.

Like or hate the new format? Let us know by replying to the email.




DESIGN SYSTEM TIP

1) When creating a new design system, start small with a "pilot project"

Tip from Super Friendly

Creating a design system for a product that already exists is a daunting task. Take things slow and start by creating a design system for a "pilot project". Similar to a TV show pilot, this pilot project can prove the design system is valuable without significant resources.

How to start building your design system

  • Choose a pilot project that scores well on the scorecard below.

  • Add to the design system only what is needed for the pilot project.

  • Use the design system to build the pilot project.

  • Rinse and repeat with another project, then another, and another..




DESIGN SYSTEM TIP

2) Have separate systems for each client

Tip from Luis Ouriach

When working with many clients it's important to keep their systems separate. Give each client its own team with two projects: "Design System" and "Design Work". This will keep things organized and make team member permissions easier.

For example, Client A would have this file structure

  • Project: Design System Project

    • Style Guide (optional)

    • Components

    • Assets

  • Project: Design Files

    • Design File 1

    • Design File 1

    • Design File 1




FIGMA TIP

3) Build components with their own specific atoms for dynamic use

Tip from UI Prep

Build components with nested atom instances that can be swapped while designing. This makes designing faster as you can quickly update different types and states with ready-built options. It also makes long-term maintenance easier because fewer overrides will need to be made while designing.

For example, create a dropdown menu with atoms

  1. Create every possible row item.

  2. Turn each row item into a main component & combine as variants.

  3. Nest several instances of the atoms into a new menu main component.

  4. Design with instances of the menu and update individual atom values to create unique types and states rather than overriding properties.




FIGMA TIP

4) Add organization to your styles with collapsable categories

Tip from UI Prep

Group styles together by nesting similar ones under the same category name (eg. "Headline", or "Primary"). This makes finding and using the right style much easier while designing.

How to add a style with nested hierarchy

  1. Select an object with the color you want to save as a style

  2. Select the "Style" icon in the Fill or Stroke section of the Design Panel

  3. Select the "Add" icon in the Style Menu

  4. Name the style using the "Category / Name"

The forward-slash ("/") tells Figma to use the first part as the category, and the second part as the individual style's name.




TOOL TIP

5) Use the Style Organizer plugin to catch missing styles

Tip from Style Organizer

We've been using this plugin more and more recently to keep our designs 100% synced with our styles. This is so important for long-term design maintenance!

How to use the plugin

  1. Go to the Figma community to install the plugin

  2. Open the plugin and select "scan this page"

  3. Find all "unlinked" fills and strokes

  4. Apply the correct style




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