Figma Variables - 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-tools-and-resources Downloads & Links Part 1: https://www.youtube.com/watch?v=HNJmWKndUA4&t=1873s Central Icon System: https://iconists.co/central?aff=bdzGd Token organization map: https://resources.uicollective.co/buy/9b718a87-35eb-48bb-b53f-4c23d0a03ec5 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