Build a Figma Design System | Part 6!

Welcome to Episode 6 of our design system series! In this episode, we're taking a deep dive into data display components.

We'll walk you through the best practices for designing flexible and adaptable navigation components, all while staying aligned with your design system principles and leveraging the design tokens we established in the previous episodes. If you missed it, be sure to catch Episode 1 for an introduction to setting up your design tokens and Figma variables, and Episodes 2, 3, 4, and 5 where we build form componentry!

Make sure to like, comment, and subscribe for more insights on building effective design systems!

*Apologies for lighting throughout and audio issues in the avatar section while I work on my recording setup!

NEW - Purchase our official design system: https://collectivekit.co/

Ask UI Collective a question: https://uicollective.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tool...

Downloads & Links
Part 1:    • Build a Design System! Ep. 1: Figma Tokens...  
Central Icon System: https://iconists.co/central?aff=bdzGd
Token organization map: https://resources.uicollective.co/buy...

0:00 An introduction
0:20 Building an Avatar
12:16 Building an Interactive Tag
21:59 Building a Category Tag
26:20 Building a Loader
30:31 Building a List
38:42 Building a Badge
43:55 Building a Tree
58:46 Building Progress Barr
1:04:30 Building a Progress Circle
1:06:20 Building a Snackbar

#uxdesign #design #figma