Profile PictureUI Prep

👋 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


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.


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.


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


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”.


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


Current user avatar

👋 Friday Five (Special Edition: Property & Color Style Lessons)

NEW UPDATE - UI Prep 6.0 is here!! 🔥Properties 🔥 Auto Layout 🔥 New Components

👋 Friday Five (Workflows, Subcomponents, Shortcuts, and more)

👋 Friday Five (Rigid Components, Auto Layout, Color Guide, and more)

👋 Friday Five (Component Properties, Widgets, Styles, and more)

See all posts from UI Prep

Powered by