Profile PictureUI Prep

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

Hi Friends!

I’m back with the 38th issue of Friday Five, a twice-monthly email with my best design tips. Each one picked to help you level up your design skills.

This week is a special edition! Breaking down a few things I learned about Component Properties and Color Styles while building the newest version of the UI Prep Design System.

🎉 ICYMI: UI Prep 6.0 is live! This is a huge update that includes all ConFig2022 updates, component properties, auto layout, 10+ new components, and more! If you haven’t purchased the system yet, you can get it here.

Get the UI Prep Design System

#1. Some Components are Better Off NOT as Variants

Tip from @molly_hellmuth

Sometimes it's better to not combine related components as variants. Especially ones destined to be nested inside bigger components. This allows them to be more easily updated with the Instance Swap property

For example, stateful badges..

Keep multiple states of a badge as individual components (don’t combine as variants). Then, nest them inside of an avatar and add a Boolean property and an Instance Swap property. The naming hierarchy (Avatar/.Atom/Online) will make them easy to find in the Instance Swap Menu.

#2. Optimize Properties for the Designer, Not the Design System Editor

Tip from @molly_hellmuth

Every component added from the Assets panel should arrive in its simplest, default form. That means setting all/most Boolean properties to “False” in the design system. Allowing the designer to add complexity, rather than remove it.

For example, Inputs..

Hide all non-essential elements (e.g., hint, info, error) in an input by default. Designers can then choose to include them as needed.

#3. Make Color Pallets Small Yet Scalable

Tip from @molly_hellmuth

Start every design system with a small number of cohesive color styles. And an easy way to scale them as your product grows and evolves. This is best done by creating a color key to generate your palette.

How to create a color key..

Create a color key that includes a wide range of tints and shades (~10) for each color. Making them all accessible starting at the 7th (contrast with white/black above 4.5). Then, choose 4 variants to add to your palette. For example -

  • 100 = Background
  • 700 = Default
  • 800 = Hover
  • 900 = Pressed

#4. Give Text Colors VIP Status

Tip from @molly_hellmuth

Colors used for text are the most important and most frequently used styles. Finding the right one needs to be foolproof. And they all need to look good and be accessible on any background.

How to roll out the red carpet for text styles..

Create separate color styles for each supported state (white and black). Then move them to the top of the color styes list for quick & easy access.

  • Black/Primary
  • Black/Secondary
  • Black/Disabled
  • White/Primary
  • White/Secondary
  • White/Disabled

#5. Basic Dark Theme Support Goes a Long Way

Tip from @molly_hellmuth

Most products need light theme colors 95% of the time. But what about the occasional dark component (e.g., menu, tooltip, button, footer)? Add some dark theme styles to provide full support and avoid misuse.

How to add basic dark theme support..

Include the following color styles for basic/local dark theme support in a light or neutral library.

  • Backgrounds: ~4 dark neutral colors (accounting for hover/active states)
  • Text: ~3 white colors at varying opacities (primary, secondary, disabled)

Have a great weekend! 🍻

Molly at UI Prep

😉 Join the Design System Bootcamp waitlist for a special discount

👋 Friday Five (New Beta Features, Adobe, Height Variables, and More)

Design System Bootcamp details are HERE 👩‍💻 🥾✨

👋 Friday Five (Big News, Icons, Change Logs, Breakpoints, and more )

🤓 UI Prep Course Waitlist - Join now for early bird pricing! 💸💸💸

See all posts from UI Prep

Powered by