Tutorials: Create your design system in Figma - Figma Tutorial: Variants

Figma is free to use. Sign up here: https://bit.ly/3msp0OV Variants reduce the complexity of your design system, makes it easier to find components, and maps your design components more closely to code. In this video we'll teach you how to create and use variants and component sets. Learn how to use interactive components here: https://bit.ly/3mhWRx4 Learn more on our Help Center: Prepare for Variants: https://bit.ly/35IIIPV Create and Use Variants: https://bit.ly/35FVxdH Read the variants blog post: https://www.figma.com/blog/bridging-design-and-code-with-variants/ Watch the Config Europe keynote highlights: https://youtu.be/Jeqyvp-hfmk #Figma #FigmaTutorial #Variants #Components Timestamps: 0:00 Introduction 0:30 Define component sets, variants, properties, and values 0:58 Multi-dimension component sets, and map to code 1:47 Combine components as variants 2:05 Publish component sets to a library 2:19 Using and configuring variants 2:41 Step-by-step demo (checkbox component set from scratch) 3:22 Adding variants to a single Component 3:46 Naming syntax (property=value) 5:05 Rename values 5:29 Non-unique combination errors and how to fix it 5:40 Rename properties 6:23 Using and configuring variants from Assets panel 7:14 Add new variants to a component set 7:56 Boolean values, binary toggle switch 8:40 Adding another property / dimension 10:37 Instance swapping and component sets 11:03 Publish component sets to a library 12:08 The "slash" naming convention to create variants quickly 12:58 Use the "slash naming convention at a large scale 14:01 Outro Fluffy by Smith The Mister https://smiththemister.bandcamp.com Smith The Mister https://bit.ly/Smith-The-Mister-YT Free Download / Stream: https://bit.ly/stm-fluffy Music promoted by Audio Library https://youtu.be/OM9G3nyLT_w