Summary
Keywords
Full Transcript
Want to streamline your UX design, UI design, and Product design workflow? Design tokens are the key to building scalable, consistent designs across products and teams. In this video, we’ll break down: ✅ What are design tokens? (Explained simply) ✅ The different types of tokens you need (Colors, typography, spacing & more) ✅ How to set up design tokens in Figma for a smooth workflow Whether you're a beginner or looking to refine your design system, this guide will help you master design tokens with ease! LINKS: UI Collective Academy: https://uicollective.co/ NEW - Our Official Design System: https://collectivekit.co/ All Resources: https://uicollective.co/designer-tools-and-resources Work with me on your design system: https://designsystemlabs.co/ Build a Design System Episode 1: https://youtu.be/HNJmWKndUA4 My design workflow: https://youtu.be/3MBITu8qf4I Responsive design breakdown: https://youtu.be/ZI1UsJhmZzw 0:00 An Introduction 0:19 Types of Design Tokens 15:33 Organizing Your Design Tokens 19:59 Design Token Setup Demo (Brand, Alias, Mapped) 25:09 Design Token Setup Demo (Primitive, Semantic) 45:25 Adding Different Modes 47:14 Responsive Collection Introduction #UXDesign #UIDesign #ProductDesign #DesignTokens #Figma #DesignSystem
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
