Build a Design System! Ep. 1: Figma Tokens & Variables Setup
325.1K views · 2024-08-22
UI Design
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
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