This video is embedded from Youtube and here’s the original one.
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.
Timestamp:
00:00 Introduction
00:30 Define component sets, variants, properties, and values
00:58 Multi-dimension component sets, and map to code
01:47 Combine components as variants
02:05 Publish component sets to a library
02:19 Using and configuring variants
02:41 Step-by-step demo (checkbox component set from scratch)
03:22 Adding variants to a single Component
03:46 Naming syntax (property=value)
05:05 Rename values
05:29 Non-unique combination errors and how to fix it
05:40 Rename properties
06:23 Using and configuring variants from Assets panel
07:14 Add new variants to a component set
07:56 Boolean values, binary toggle switch
08: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