UI Prep 8.0 is Live!!! 🎉. The UI Prep Design System has been completely rebuilt to include all updates from Config23! Including. ✨ Color Variables.✨ Light & Dark Mode.✨ Number Variables.✨ Auto Layout (Max/Min/Wrap)

Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!. ✨ Join 25,000+ subscribers.✨ Learn about Figma & Design Systems.✨ Great tips, no fluff.

Surface style names. surface-1 → surface-default.surface-2 → surface-raised.surface-3 → surface-overlay.surface-4 → surface-bold.

Figma Tip: Get descriptive with your surfaces. Give surface styles simple and descriptive names. Rather than using abstracted numbers that are hard to decipher. Who can remember if you’re supposed to use “surface-1” or “surface-2” for a card. Especially if they look the same in

🚨 Only 7 spots left!. Design System Bootcamp kicks off this Monday—if you’ve been thinking about joining, now’s the time to lock in your spot.

Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!. ✨ Join 25,000+ subscribers.✨ Learn about Figma & Design Systems.✨ Great tips, no fluff.

3. Use color consistently. Use colors consistently across each "row" to make colors easier to use, more predictable, and accessible. For example, all buttons might use a 800 color and all subtle alerts might use a 300 color.

2. Keep names simple. Use simple, non-abstract, names to make finding the right color much easier. For example, the color “strawberry” could be any tint or shade. But “pink-100” is guarantied to be a very light tint. ❌ color-strawberry.❌ color-bubblegum.❌ color-flamingo.

1. Add too many colors. Build a full color palette with a wide range of colors and 10+ tints and shades for each. Then use as few colors as possible. This might seems like overkill but it offers a lot of flexibility. Want to add another color, tint, or shade next year? Easy! Just.

Seen in the new @airbnb sizzle reel 👀 🔥. 3 color rules they seem to be following that we should all adopt 👇

Join here 👇.

⏰ Just 12 hours left to get 20% off Design System Bootcamp!. It was just featured as the #1 design course on Maven 🙌. If you've been thinking about joining, now’s the time. Discount ends tonight!

RT @MavenHQ: 7️⃣ Design System Strategy: Your 2025 Blueprint for Success with @molly_hellmuth . Discover 6+ strategic blueprints for design….

The next cohort kicks off July 7th!. Special guests @brad_frost (Atomic Design) and Sukanya Bhattacharya (Uber) will join us for live Q&As. To celebrate being featured by @Maven, the course is 20% off until Sunday. Perfect time to level up for that new role or promotion 💪

My bootcamp was just recognized (again!) as a top course on @Maven 🎉. It’s been the #1-rated course for Figma and/or Design Systems 3 years in a row. but what I’m really proud of are the emails I get from students. Like this one👇

Subscribe to my newsletter, Friday Five, to get tips like this directly in your inbox!. ✨ Join 25,000+ subscribers.✨ Learn about Figma & Design Systems.✨ Great tips, no fluff.

. And makes a clear distinction for what components should be "hidden" from the published library.

The advantage of this?. It keeps your other component pages clutter free.

These small "parts" are important for the building of other components, but are not meant to be used on their own.

Copy @Atlassian and include a "parts" page in your Figma component library. On this page you can store all the small bits and bobs that make up your other, more complex, components.