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 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
Видео Figma Tutorial: Variants канала Figma
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 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
Видео Figma Tutorial: Variants канала Figma
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Office hours: Get started with VariantsFigma in 5: Tricks on Fire 🔥Build it in Figma: Create a Design System — FoundationsFigma tutorial: MasksFigma Tutorial: Creating StylesCreating and Using VARIANTS in FigmaFigma UI Design Tutorial: Get Started in Just 24 Minutes! (2021)Figma For Beginners: Explore ideas (1/4)Figma Dropdown Menu with Variants | Figma Prototype TutorialFigma Tutorial: Smart Animate and Drag TriggersOffice Hours: Complex Component ArchitectureOffice Hours: 30 time-saving tricks from Figma experts10 tips to work 10x faster in FigmaFigma tutorial: Auto layout navigation menuFigma Auto Layout | Getting Started with Auto LayoutInteractive Components in FigmaNeumorphic Animations in Figma | Smart Animate | Figma TutorialFigma Tutorial: Components - The BasicsFigma Tips & Tricks - UI Designer's Superpower