Build a Figma Design System | Part 4!

Welcome to Episode 4 of our design system series! In this episode, we’re taking a deep dive into navigation 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 where we build form componentry!

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

UI Collective Academy + Community: https://uicollective.co/

NEW – Purchase our official design system: https://collectivekit.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
Part 2: https://youtu.be/RWobowuQx6o
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:43 Build a Tab Bar Components
9:22 Building a Tab Bar
11:17 Building a Keyline Component
12:37 Adding the Keyline to the Tab Bar
15:12 Building a Button Group Component
25:32 Building a Pagination Component
44:48 Building a Carousel Component
57:02 Building an Anchor / Inpage Navigation Component
01:09:59 Building a Navigation Bar Component
01:18:14 Building a Link Component
01:25:12 Building a Breadcrumb Component

#uxdesign #design #figma