Figma Web Design Masterclass (New Auto Layout Tutorial)

Опубликовано: 03 Октябрь 2024
на канале: Boroji Design Inc.

8,950

186

Join our channel today and become a member:
/ @borojidesign

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 #autolayout #figmaforbeginners

0:00 Step 1 - Notion project introduction
0:52 Step 2 - Organize the Figma page
1:43 Step 3 - Create color styles
2:18 Step 4 - Figma layer naming convention for colors
4:15 Step 5 - Automate creating colors using Figma plugins
5:25 Step 6 - Create a link component
7:01 Step 7 - Create link variant and text property
9:33 Step 8 - Create the navigation bar using Figma Auto Layout
12:04 Step 9 - Learn nested auto layout behaviour in Figma
13:37 Step 10 - Automate pasting data using Figma plugins
14:24 Step 11 - Extending link variant to chip variant in Figma
16:03 Step 12 - Instance swap variants in Figma
18:03 Step 13 - Create website body with auto layout
21:09 Step 14 - Nested auto layout layer breakdown
22:22 Step 15 - Figma dev mode to auto layout
23:31 Step 16 - Adding testimonial section using auto layout
25:49 Step 17 - Align the testimonial section with Figma's
26:53 Step 18 - Preview Notion's website in Figma's responsive presentation mode
29:43 Step 19 - Extend chip variant to create toggle component
30:39 Step 20 - Add auto layout and fix toggle colour contrast
32:16 Step 21 - Create active and inactive toggle variant
34:52 Step 22 - Add toggle variant to Notion website
36:44 Step 23 - Reduce the size of the image
38:03 Step 24 - Create image component variants in Figma
39:26 Step 25 - Create a card using the auto layout in Figma
41:23 Step 26 - Extend link variant component
42:45 Step 27 - Create a card component in Figma
44:18 Step 28 - Add expose nested instances and text property
48:13 Step 29 - Add auto layout wrap
50:03 Step 30 - Add responsive behaviour with Figma auto layout

Смотрите видео Figma Web Design Masterclass (New Auto Layout Tutorial) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Boroji Design Inc. 03 Октябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 8,950 раз и оно понравилось 186 людям.