Master Figma Variants (Ultimate Tutorial)
Join our gaming channel:
/ @borojipixel
Join our channel today and become a member:
/ @borojidesign
Download your Figma community file:
https://www.figma.com/community/file/...
Hire us for 1-1 tutoring:
https://www.upwork.com/freelancers/~0...
Our courses on Udemy:
https://www.udemy.com/user/boroji-des...
Get a special discount on our Udemy courses:
https://boroji.com/courses
#figmatutorial #figmacomponents #figmaautolayout
0:00 Intro
0:40 Step 1 - Designing progress bar in Figma
1:05 Step 2 - Duplicate the bar chart using the options shortcut
1:39 Step 3 - Create an auto layout for the progress bar
1:58 Step 4 - Set the children auto layout frames to fill the container
2:53 Step 5 - Auto layout frame re-sizing
3:16 Step 6 - Duplicate frames in Figma inside auto layout
3:40 Step 7 - Figma plugin to check layer count
4:11 Step 8 - Shortcut to select all children elements in Figma
4:51 Step 9 - Re-color each bar inside auto layout
5:12 Step 10 - Create color styles in Figma
6:40 Step 11 - Rename color styles to create folders
9:40 Step 12 - Create multiple components in Figma
11:20 Step 13 - Create variant set from multiple components in Figma
14:11 Step 14 - Re-order variant values in Figma
14:58 Step 15 - Boolean variant values in Figma
17:03 Step 16 - How boolean variants work in Figma
17:44 Step 17 - Creating all boolean variant properties in Figma
18:03 Step 18 - How true and false work in variants properties in Figma
19:46 Step 19 - Bulk update variants properties in Figma
21:29 Step 20 - Comparing the difference between dropdown and boolean variants
22:37 Step 21 - Clean up variant sets
23:08 Step 22 - Nest variants with auto layout
23:50 Step 23 - How to scale elements in Figma
24:43 Step 24 - Rename auto layout layer in Figma
25:04 Step 25 - Add background color to local styles in Figma
26:24 Step 26 - Fill container in Figma
27:03 Step 27 - Duplicate elements inside Auto layout
28:11 Step 28 - Nest auto layout in auto layout in Figma
29:26 Step 29 - Auto layout fix and hug properties
30:59 Step 30 - Duplicating Figma variant
31:21 Step 31 - Detach Figma variant
31:36 Step 32 - Add auto layout to variant
32:03 Step 33 - Fix auto layout children fill container
32:36 Step 34 - Auto layout fix width
33:15 Step 35 - Comparing variants with other variants
33:41 Step 36 - Typography vertical trim
34:16 Step 37 - Variants and name of the layers
35:14 Step 38 - Automatically create variants using layer names
36:25 Step 39 - Swap instance with newly created variant
37:43 Step 40 - Create text component property
38:52 Step 41 - Expose nested instances
40:07 Step 42 - Add round corner and auto layout padding in Figma
41:14 Step 43 - Add dark mode variant property in Figma
42:07 Step 44 - Add dark mode color styles in Figma
45:22 Step 45 - Dark mode variant not switching properly
46:00 Step 46 - Add light variant property
46:56 Step 47 - Fix and replace the dark mode variant
48:22 Step 48 - Fix dark color styles in Figma
50:23 Step 49 - Add blue color variant to the light and dark mode
54:49 Step 50 - Don't forget to like and subscribe
Watch video Master Figma Variants (Ultimate Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Boroji Design Inc. 14 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 547 once and liked it 22 people.