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
Смотрите видео Master Figma Variants (Ultimate Tutorial) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Boroji Design Inc. 14 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 547 раз и оно понравилось 22 людям.