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

Hi Friends!

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

🔥 ICYMI: UI Prep 5.0 was launched last week! See what’s new and get the system on the UI Prep website



DESIGN SYSTEM TIP

Get specific with your design principles

Tip from Jared M. Spool

General design principles like “innovative” sound nice but aren’t very helpful in practice. Instead, work with your team to create specific design principles. Each project or initiative should have a design principle that helps guide decisions and improve the product.

Marks of a great design principle

  1. Looking at the research, it should be clear how the new principle will improve the experience.

  2. It helps you say “no” to anything that’s not directly impacting the team’s goal.

  3. It distinguishes your design from your competitors.

  4. It’s useful in the present and considers ways it might be changed or reversed in the future.

  5. It’s specific to one project, release, or initiative.

  6. Its meaning is constantly questioned and tested by the team.



DESIGN SYSTEM TIP

Treat your design system like a workbench

Tip from Brad frost

Add new components to your design system the same way you’d add tools to a workbench. You wouldn’t go on a shopping spree and buy every tool you might need in the future. You’d add them one-by-one as they’re needed. Only when a project calls for it, is a tool added.

The same goes for adding components to a design system. Only build components once there’s a clear need for them. This greatly improves the long-term usability and maintenance for both the design system and product.



FIGMA TIP

Establish clear and predictable spacing methods early

Tip from UI Prep

Sizing and spacing methods are foundational to any design system. They impact nearly every decision in the design process (eg. height, width, padding, placement, ect.). Establish these methods early to reduce decision-making and refactoring work in the long run.

Spacing and sizing checklist

  • Adopt the 8px grid and apply to all sizing and spacing (eg. 8px, 16px, 24px, 32px, 40px).

  • Round text line-heights to the 4px grid.

  • Determine your layout grid margins and gutter sizes (eg. 12 columns, 40px margin, 24px gutter).

  • Choose a “fixed” or “fluid” layout behavior.

  • Determine your product’s breakpoints (eg. 600px, 900px, 1200px).



FIGMA TIP

Add a thumbnail to each of your Figma files

Tip from UI Prep

Make it easy to find files on your Figma project page with thumbnails. Each thumbnail should describe the purpose of the file for easy scanning. This is especially useful for larger teams with many different files and editors.

How to add a thumbnail

  1. Create a frame inside your Figma file.

  2. Add text or an image to the frame.

  3. Right-click the frame and select “Set as Thumbnail”.



TOOL TIP

Use the Contrast plugin to test accessibility

Trip from Contrast

Use the contrast plugin to test every text layer with its background to ensure it has a high enough contrast ratio to be seen by all users (minimum of 4.5 : 1).

How to use the plugin

  1. Install the Contrast Plugin

  2. Open Contrast in your Figma file

  3. Select the layer you want to test (eg. text layer)

  4. Edit layer or background until it passes all ratio tests




Have a great weekend!

Molly & Jake at UI Prep

0 comments

Current user avatar

Recent posts

🥳 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)

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

See all posts from UI Prep