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!

Downloads & Links
Ask your design questions on design systems or variables: https://uicollective.co/
Token organization map: https://resources.uicollective.co/buy...
Color documentation & color scales in this video: https://resources.uicollective.co/buy...
We build and code design systems: https://uicollective.co/design-system...
Book a design system audit: https://www.uicollective.co/design-sy...
All resources: https://uicollective.co/designer-tool...

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