Figma Variables - Build a Design System! Ep. 1: Figma Tokens & Variables Setup

Welcome to Episode 1 of "Building a Design System"! In this introductory episode, we dive into setting up your figma variables & design tokens to prepare for building your design system components. Together we'll explore each of the different brand, alias, and mapped collections for your variables and tokens, but also look at a new approach leveraging a responsive collection. In the next video, we'll get into the component building! UI Collective Academy + Community: https://uicollective.co/ NEW - Purchase our official design system: https://collectivekit.co/ Downloads & Links Resources: https://uicollective.co/designer-tools-and-resources We build and code design systems: https://designsystemlabs.co/ All resources: https://uicollective.co/designer-tools-and-resources Agenda 0:00 An introduction to the video 1:14 Setting up Color Scales 4:45 Brand Collection Intros 6:31 Building Brand Collection 13:46 Building Alias Collection 23:07 Building Mapped Collection 34:26 Different Approaches to Type Variables 39:17 Intro to Type Scales 41:39 Building Type Scale Variables 44:51 Line Height Variables 50:59 Paragraph Spacing Variables 53:04 Font Family & Weight 55:51 Building Body Type Scales 01:03:09 Building Heading Scales 01:06:09 Building Brand Scale 01:08:54 Border Width & Radius Variables 01:15:18 Spacing Variables 01:22:04 Multi-Brand Intro *Please note that this library may evolve as we build out the design system #figma #designsystems #uidesign #uxdesign