title
Figma Tutorial: Auto Layout | Master Auto Layout in 15 Minutes

description
In this video, I'm going to show you how to design responsive elements using Figma Auto Layout. You will learn everything you need to know about Figma Auto Layout. We will go over the basics of Auto Layout all the way to creating advanced responsive layouts. Try Figma for free: https://bit.ly/3LiRVEF 📂 Get the Starter File from the link below: https://bit.ly/3S8DJyk 0:00 Intro 0:39 What's Auto Layout? 01:14 Auto Layout Basics 04:18 Advanced Settings 08:13 Resizing Property 09:25 Create a Responsive Card 👉 Become a UI Designer with my UI Design & Figma Mastery course: https://bit.ly/43v79vX 👉 Get my FREE UI/UX Design e-book here: https://bit.ly/48rmDVc 📸 Instagram: https://www.instagram.com/uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

detail
{'title': 'Figma Tutorial: Auto Layout | Master Auto Layout in 15 Minutes', 'heatmap': [{'end': 624.498, 'start': 559.506, 'weight': 0.735}, {'end': 711.32, 'start': 684.919, 'weight': 0.714}, {'end': 744.45, 'start': 730.416, 'weight': 0.749}, {'end': 917.352, 'start': 835.833, 'weight': 0.77}], 'summary': "Learn about figma's auto layout feature and its recent powerful update, its design features including frame alignment, padding, canvas stacking, strokes, and text baseline alignment, and figma's alignment and resizing options, with practical demonstrations and impact on element spacing and responsiveness.", 'chapters': [{'end': 208.769, 'segs': [{'end': 40.052, 'src': 'embed', 'start': 0.089, 'weight': 0, 'content': [{'end': 5.393, 'text': "In today's video, we are going to talk about one of the best features of Figma, called Auto Layout,", 'start': 0.089, 'duration': 5.304}, {'end': 8.755, 'text': 'which allows you to create responsive elements with ease.', 'start': 5.393, 'duration': 3.362}, {'end': 15.08, 'text': 'And with the latest Figma update, this feature got way more powerful and interesting than before.', 'start': 9.235, 'duration': 5.845}, {'end': 19.323, 'text': "If you have no idea what it is and how you can use it, don't worry,", 'start': 15.52, 'duration': 3.803}, {'end': 24.406, 'text': 'because we are going to start with the basics and then we will move on to more advanced use cases.', 'start': 19.323, 'duration': 5.083}, {'end': 26.928, 'text': "So if you are ready, let's dive in.", 'start': 24.806, 'duration': 2.122}, {'end': 28.5, 'text': 'All right, here we are.', 'start': 27.299, 'duration': 1.201}, {'end': 30.843, 'text': 'I already prepared this design file.', 'start': 28.761, 'duration': 2.082}, {'end': 37.309, 'text': "This is a practice file that you can download from the link in the description below if you wanna practice while you're watching this video.", 'start': 30.883, 'duration': 6.426}, {'end': 38.79, 'text': "All right, let's start.", 'start': 37.529, 'duration': 1.261}, {'end': 40.052, 'text': "What's auto layout??", 'start': 39.011, 'duration': 1.041}], 'summary': "Figma's auto layout feature has become more powerful with the latest update, enabling easy creation of responsive elements.", 'duration': 39.963, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o89.jpg'}, {'end': 208.769, 'src': 'embed', 'start': 99.396, 'weight': 3, 'content': [{'end': 107.581, 'text': 'We have direction, we have space between option, we have horizontal padding, we have vertical padding, and the alignment.', 'start': 99.396, 'duration': 8.185}, {'end': 112.965, 'text': 'We have also this advanced layout settings option, and we will talk about all of them one by one.', 'start': 107.701, 'duration': 5.264}, {'end': 118.21, 'text': 'So once you added the auto layout to your frame or to your element, you need to define its direction.', 'start': 113.085, 'duration': 5.125}, {'end': 120.492, 'text': 'So basically we have two different directions.', 'start': 118.29, 'duration': 2.202}, {'end': 123.675, 'text': 'We have vertical and horizontal directions.', 'start': 120.612, 'duration': 3.063}, {'end': 128.178, 'text': 'The direction defines the flow of your frame and the elements inside.', 'start': 123.795, 'duration': 4.383}, {'end': 134.48, 'text': 'so whether it should grow horizontally or vertically, since these titles were placed next to each other,', 'start': 128.178, 'duration': 6.302}, {'end': 137.92, 'text': 'figma automatically set the direction to horizontal.', 'start': 134.48, 'duration': 3.44}, {'end': 139.201, 'text': 'if i change it to vertical.', 'start': 137.92, 'duration': 1.281}, {'end': 140.401, 'text': 'look what happens now.', 'start': 139.201, 'duration': 1.2}, {'end': 142.781, 'text': 'they stack vertically on top of each other.', 'start': 140.401, 'duration': 2.38}, {'end': 146.262, 'text': 'the next property is this spacing between items.', 'start': 142.781, 'duration': 3.481}, {'end': 150.443, 'text': 'this property allows you to add empty space between your elements.', 'start': 146.262, 'duration': 4.181}, {'end': 155.085, 'text': 'So here, as you can see in the layers list, we have this auto layout frame.', 'start': 150.703, 'duration': 4.382}, {'end': 159.787, 'text': "it's indicated with this icon and inside we have different children.", 'start': 155.085, 'duration': 4.702}, {'end': 168.571, 'text': 'If you consider the auto layout frame as the parent and the elements inside as the children, it would be very easy to work with auto layout.', 'start': 159.907, 'duration': 8.664}, {'end': 173.133, 'text': 'Just keep this concept of parents and children in mind and you will be good to go.', 'start': 168.731, 'duration': 4.402}, {'end': 178.255, 'text': 'All right, so here I can adjust this spacing option just like that.', 'start': 173.373, 'duration': 4.882}, {'end': 179.816, 'text': "Now let's talk about the padding.", 'start': 178.515, 'duration': 1.301}, {'end': 183.218, 'text': 'Here I have a button and I already added the auto layout to it.', 'start': 179.956, 'duration': 3.262}, {'end': 184.498, 'text': 'The direction is fine.', 'start': 183.438, 'duration': 1.06}, {'end': 191.581, 'text': 'If I adjust the spacing between items, nothing happens because I have only one child inside this parent element.', 'start': 184.678, 'duration': 6.903}, {'end': 195.723, 'text': 'However, now I can adjust the horizontal and vertical padding.', 'start': 191.721, 'duration': 4.002}, {'end': 203.627, 'text': "Let's set the vertical padding to 16 pixels and the horizontal padding to 32 pixels, and there it is.", 'start': 195.863, 'duration': 7.764}, {'end': 208.769, 'text': "now we have a responsive button and if you want to check out whether it's responsive or not,", 'start': 203.627, 'duration': 5.142}], 'summary': 'Explains auto layout settings, including direction, spacing, padding, and alignment in figma.', 'duration': 109.373, 'max_score': 99.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o99396.jpg'}], 'start': 0.089, 'title': "Figma's auto layout feature", 'summary': "Introduces figma's auto layout feature, emphasizing its ability to create responsive elements and its recent powerful update, and discusses its features, settings, spacing, and padding, preparing the audience for a detailed exploration of its functionality and use cases.", 'chapters': [{'end': 99.256, 'start': 0.089, 'title': "Figma's auto layout feature", 'summary': "Introduces figma's auto layout feature, emphasizing its ability to create responsive elements and its recent powerful update, preparing the audience for a detailed exploration of its functionality and use cases.", 'duration': 99.167, 'highlights': ["Figma's Auto Layout feature allows creating responsive elements with ease and has become more powerful with the latest update. The Auto Layout feature in Figma enables the creation of responsive elements and has been significantly enhanced with the latest update, making it more powerful and interesting.", 'Introduction to the basics of Auto Layout, followed by more advanced use cases. The chapter starts with an introduction to the basics of Auto Layout and progresses towards exploring more advanced use cases, ensuring comprehensive learning for the audience.', 'Instruction on how to apply Auto Layout using shortcuts and interface options in Figma. The chapter provides clear instructions on applying Auto Layout using shortcuts like Shift + A and interface options in Figma, ensuring ease of learning for the audience.']}, {'end': 142.781, 'start': 99.396, 'title': 'Auto layout in figma', 'summary': 'Discusses the features and settings of auto layout in figma, including direction, space, padding, and alignment, with a focus on defining the flow and positioning of elements, illustrating the impact of changing the direction from horizontal to vertical.', 'duration': 43.385, 'highlights': ['The chapter emphasizes the significance of defining the direction of auto layout, with two options available: vertical and horizontal, impacting the flow and arrangement of elements within the frame.', 'It outlines the impact of changing the direction from horizontal to vertical, demonstrating how elements stack vertically instead of being placed next to each other.']}, {'end': 208.769, 'start': 142.781, 'title': 'Auto layout spacing and padding', 'summary': 'Explains the concept of auto layout, emphasizing the importance of understanding parents and children relationships, and demonstrates adjusting spacing and padding values, resulting in a responsive button with 16 pixels vertical padding and 32 pixels horizontal padding.', 'duration': 65.988, 'highlights': ['The concept of parents and children is crucial for working with auto layout, making it easy to manage elements. (Quantifiable data: None)', 'Adjusting spacing between items allows adding empty space between elements in auto layout. (Quantifiable data: None)', 'Setting vertical padding to 16 pixels and horizontal padding to 32 pixels results in a responsive button. (Quantifiable data: Vertical padding: 16 pixels, Horizontal padding: 32 pixels)']}], 'duration': 208.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o89.jpg', 'highlights': ["Figma's Auto Layout feature enables the creation of responsive elements and has been significantly enhanced with the latest update.", 'The chapter starts with an introduction to the basics of Auto Layout and progresses towards exploring more advanced use cases, ensuring comprehensive learning for the audience.', 'The chapter provides clear instructions on applying Auto Layout using shortcuts like Shift + A and interface options in Figma, ensuring ease of learning for the audience.', 'The chapter emphasizes the significance of defining the direction of auto layout, impacting the flow and arrangement of elements within the frame.', 'It outlines the impact of changing the direction from horizontal to vertical, demonstrating how elements stack vertically instead of being placed next to each other.', 'The concept of parents and children is crucial for working with auto layout, making it easy to manage elements.', 'Adjusting spacing between items allows adding empty space between elements in auto layout.', 'Setting vertical padding to 16 pixels and horizontal padding to 32 pixels results in a responsive button.']}, {'end': 399.355, 'segs': [{'end': 271.671, 'src': 'embed', 'start': 232.369, 'weight': 0, 'content': [{'end': 235.491, 'text': 'And as you can see here, the alignment is set to top left.', 'start': 232.369, 'duration': 3.122}, {'end': 238.973, 'text': 'I can easily change the alignment to whatever I want.', 'start': 235.871, 'duration': 3.102}, {'end': 244.076, 'text': 'If I want them to be aligned to the center, I can simply change the alignment to center.', 'start': 239.133, 'duration': 4.943}, {'end': 246.457, 'text': 'You can easily change it to whatever you want.', 'start': 244.296, 'duration': 2.161}, {'end': 250.64, 'text': 'If you wanna change the padding of your frame individually,', 'start': 246.698, 'duration': 3.942}, {'end': 258.103, 'text': 'here you can click on this independent paddings option and then here you can adjust the left padding, right padding, top and bottom padding.', 'start': 250.64, 'duration': 7.463}, {'end': 260.466, 'text': 'Just keep that in mind, it would be useful.', 'start': 258.385, 'duration': 2.081}, {'end': 263.307, 'text': "Now let's talk about this advanced settings.", 'start': 260.745, 'duration': 2.562}, {'end': 267.049, 'text': 'If you open it up, you will see that you have four different options.', 'start': 263.547, 'duration': 3.502}, {'end': 271.671, 'text': 'We have spacing mode, strokes, canvas stacking, and text baseline alignment.', 'start': 267.129, 'duration': 4.542}], 'summary': 'Demonstrating easy alignment and padding adjustments, and advanced settings options.', 'duration': 39.302, 'max_score': 232.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o232369.jpg'}, {'end': 322.181, 'src': 'embed', 'start': 292.901, 'weight': 2, 'content': [{'end': 296.183, 'text': "And now let's increase the width of this frame and see what happens.", 'start': 292.901, 'duration': 3.282}, {'end': 300.226, 'text': 'You see nothing changed because the spacing mode is set to packed.', 'start': 296.564, 'duration': 3.662}, {'end': 305.149, 'text': 'But if I change this spacing mode to space between, look what happens.', 'start': 300.386, 'duration': 4.763}, {'end': 309.772, 'text': 'Now they are distributed within the frame with an even spacing between them.', 'start': 305.549, 'duration': 4.223}, {'end': 314.135, 'text': 'As you can see now, the space between these elements is set to auto.', 'start': 309.972, 'duration': 4.163}, {'end': 317.317, 'text': 'And if I change the width of my frame, look what happens.', 'start': 314.315, 'duration': 3.002}, {'end': 322.181, 'text': 'You see, they are responsive and they are distributed evenly within the frame.', 'start': 317.577, 'duration': 4.604}], 'summary': 'Changing spacing mode to space between evenly distributes elements within frame.', 'duration': 29.28, 'max_score': 292.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o292901.jpg'}, {'end': 360.572, 'src': 'embed', 'start': 332.77, 'weight': 3, 'content': [{'end': 338.735, 'text': 'If I go to the auto layout settings here, you will see that the strokes option is set to excluded.', 'start': 332.77, 'duration': 5.965}, {'end': 343.799, 'text': "It means that it doesn't take into account the space this stroke occupied here.", 'start': 338.835, 'duration': 4.964}, {'end': 349.183, 'text': 'So if I just select one of these titles and I hold down the Alt key on my keyboard or Option key,', 'start': 343.939, 'duration': 5.244}, {'end': 353.967, 'text': 'you will see that this padding is measured against the boundary of this frame.', 'start': 349.183, 'duration': 4.784}, {'end': 360.572, 'text': 'But if I select this frame and change the strokes option to included in layout, now look what happens.', 'start': 354.147, 'duration': 6.425}], 'summary': 'Auto layout settings: strokes excluded vs included, impact on padding and layout', 'duration': 27.802, 'max_score': 332.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o332770.jpg'}, {'end': 404.18, 'src': 'embed', 'start': 377.284, 'weight': 4, 'content': [{'end': 381.805, 'text': 'okay, i already added auto layout to them and i want them to overlap each other.', 'start': 377.284, 'duration': 4.521}, {'end': 386.726, 'text': "so here i'm gonna set the spacing between items to a negative value.", 'start': 381.805, 'duration': 4.921}, {'end': 388.067, 'text': 'yes, you can do it.', 'start': 386.726, 'duration': 1.341}, {'end': 391.948, 'text': 'you can just decrease this value to something like that, nice.', 'start': 388.067, 'duration': 3.881}, {'end': 399.355, 'text': 'And then, if you take a look at this advanced layout and go to canvas stacking, here we have a drop menu.', 'start': 392.668, 'duration': 6.687}, {'end': 404.18, 'text': 'We have two different options, last on top or first on top.', 'start': 399.775, 'duration': 4.405}], 'summary': 'Implemented auto layout with overlapping items and set negative spacing for advanced layout.', 'duration': 26.896, 'max_score': 377.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o377284.jpg'}], 'start': 208.769, 'title': 'Figma design features', 'summary': 'Covers figma design features including frame alignment, padding, auto layout, canvas stacking, spacing modes, strokes, and text baseline alignment, with practical demonstrations and impact on element spacing and responsiveness.', 'chapters': [{'end': 271.671, 'start': 208.769, 'title': 'Figma: frame alignment and padding', 'summary': 'Discusses frame alignment and padding in figma, including adjusting alignment, adding auto layout, changing padding, and exploring advanced settings, such as spacing mode, strokes, canvas stacking, and text baseline alignment.', 'duration': 62.902, 'highlights': ['The chapter explains how to adjust alignment and add auto layout to elements, demonstrating the flexibility to change alignment as needed.', 'It also covers changing individual frame padding by adjusting left, right, top, and bottom padding separately.', 'Furthermore, the chapter delves into advanced settings in Figma, including spacing mode, strokes, canvas stacking, and text baseline alignment.']}, {'end': 399.355, 'start': 272.091, 'title': 'Figma auto layout and canvas stacking', 'summary': "Explains how to use figma's spacing modes, strokes options, and canvas stacking, demonstrating the impact of settings on element spacing and responsiveness within a frame, and also revealing the functionality of overlapping elements using negative spacing values.", 'duration': 127.264, 'highlights': ["Spacing Modes and Frame Responsiveness The spacing mode 'packed' removes additional space around elements, while changing to 'space between' distributes elements evenly within the frame, showcasing responsive behavior as the frame width changes.", "Strokes Options and Measurement Inclusion The default 'excluded' strokes option doesn't account for space occupied, but changing to 'included in layout' ensures strokes are measured as part of the frame, impacting the layout and padding measurements.", 'Canvas Stacking and Negative Spacing Demonstrates the ability to overlap elements by setting negative spacing values, showcasing how canvas stacking and the advanced layout menu enable manipulation of element positioning and overlap.']}], 'duration': 190.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o208769.jpg', 'highlights': ['Covers figma design features including frame alignment, padding, auto layout, canvas stacking, spacing modes, strokes, and text baseline alignment, with practical demonstrations and impact on element spacing and responsiveness.', 'Demonstrates the flexibility to change alignment as needed and adjust individual frame padding separately.', "Explains spacing modes 'packed' and 'space between' showcasing responsive behavior as the frame width changes.", "Illustrates the impact of strokes option 'excluded' and 'included in layout' on layout and padding measurements.", 'Showcases the manipulation of element positioning and overlap through canvas stacking and negative spacing values.']}, {'end': 938.715, 'segs': [{'end': 448.046, 'src': 'embed', 'start': 421.352, 'weight': 4, 'content': [{'end': 428.415, 'text': "Okay And sometimes it's going to be problematic, especially if you try to align an icon with a text baseline.", 'start': 421.352, 'duration': 7.063}, {'end': 435.019, 'text': 'And this option allows you to align your text and your elements based on the text baseline.', 'start': 428.536, 'duration': 6.483}, {'end': 436.34, 'text': 'So let me show you how it works.', 'start': 435.079, 'duration': 1.261}, {'end': 438.781, 'text': "I'm going to select these three text layers.", 'start': 436.52, 'duration': 2.261}, {'end': 441.642, 'text': "and I'm gonna align them vertically.", 'start': 439.661, 'duration': 1.981}, {'end': 442.743, 'text': 'Look what happens.', 'start': 441.942, 'duration': 0.801}, {'end': 448.046, 'text': 'You see, now they are aligned from their center, just like that.', 'start': 443.223, 'duration': 4.823}], 'summary': 'Align text and elements based on text baseline for better visual coherence.', 'duration': 26.694, 'max_score': 421.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o421352.jpg'}, {'end': 494.333, 'src': 'embed', 'start': 466.775, 'weight': 1, 'content': [{'end': 471.138, 'text': 'Well, as you know, your elements in Figma have something called constraints,', 'start': 466.775, 'duration': 4.363}, {'end': 476.702, 'text': 'and the constraints allow you to define how your elements should react when their size changes.', 'start': 471.138, 'duration': 5.564}, {'end': 481.806, 'text': "But when you add auto layout to a frame or a component, you can't use constraints anymore.", 'start': 476.862, 'duration': 4.944}, {'end': 484.507, 'text': 'Instead, you can use the resizing properties.', 'start': 482.026, 'duration': 2.481}, {'end': 486.289, 'text': 'Let me show you how they work.', 'start': 484.868, 'duration': 1.421}, {'end': 488.51, 'text': 'Here I have a frame.', 'start': 486.829, 'duration': 1.681}, {'end': 490.591, 'text': 'I already added the auto layout to it.', 'start': 488.83, 'duration': 1.761}, {'end': 494.333, 'text': "And here I'm gonna adjust the width of this card.", 'start': 490.831, 'duration': 3.502}], 'summary': "Figma's constraints define element reactions; auto layout uses resizing properties.", 'duration': 27.558, 'max_score': 466.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o466775.jpg'}, {'end': 567.05, 'src': 'embed', 'start': 539.977, 'weight': 0, 'content': [{'end': 543.239, 'text': 'in this case, its parent, Now it will be responsive.', 'start': 539.977, 'duration': 3.262}, {'end': 543.999, 'text': 'look what happens.', 'start': 543.239, 'duration': 0.76}, {'end': 552.163, 'text': 'You see? So basically the resizing options are the constraints that we are using for other elements.', 'start': 545.68, 'duration': 6.483}, {'end': 559.146, 'text': 'So they allow us to define how we want our content within a frame respond to any changes in size.', 'start': 552.343, 'duration': 6.803}, {'end': 567.05, 'text': "All right, now that you've learned about auto layout, let's create a responsive card together, shall we? So here I already prepared a few elements.", 'start': 559.506, 'duration': 7.544}], 'summary': 'Auto layout enables responsive design, defining constraints for elements to adapt to changes in size.', 'duration': 27.073, 'max_score': 539.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o539977.jpg'}, {'end': 624.498, 'src': 'heatmap', 'start': 559.506, 'weight': 0.735, 'content': [{'end': 567.05, 'text': "All right, now that you've learned about auto layout, let's create a responsive card together, shall we? So here I already prepared a few elements.", 'start': 559.506, 'duration': 7.544}, {'end': 568.851, 'text': 'I have a photo here.', 'start': 567.67, 'duration': 1.181}, {'end': 572.872, 'text': 'I have a tag, a title, a price.', 'start': 569.551, 'duration': 3.321}, {'end': 577.054, 'text': 'Here I have this cart icon and a CTA.', 'start': 573.453, 'duration': 3.601}, {'end': 585.457, 'text': "So how can we make it responsive? Well, let's start with these contents right here, okay? I'm gonna put this cart icon somewhere around here.", 'start': 577.214, 'duration': 8.243}, {'end': 586.378, 'text': "I don't need it now.", 'start': 585.577, 'duration': 0.801}, {'end': 591.48, 'text': "I'm gonna select them all, these elements, and I'm gonna hit Shift and A to add auto layout to them.", 'start': 586.598, 'duration': 4.882}, {'end': 592.28, 'text': 'All right.', 'start': 591.92, 'duration': 0.36}, {'end': 594.301, 'text': "Then I'm going to add a field to it.", 'start': 592.5, 'duration': 1.801}, {'end': 596.383, 'text': 'So hit the plus button right here.', 'start': 594.462, 'duration': 1.921}, {'end': 597.703, 'text': "I'm going to set it to white.", 'start': 596.503, 'duration': 1.2}, {'end': 598.444, 'text': "That's fine.", 'start': 597.844, 'duration': 0.6}, {'end': 605.088, 'text': "Now I'm going to select this frame and this photo and I'm going to add auto layout to these elements now,", 'start': 598.864, 'duration': 6.224}, {'end': 608.21, 'text': "because we can combine auto layout frames and it's awesome.", 'start': 605.088, 'duration': 3.122}, {'end': 610.851, 'text': 'You can have auto layouts with multiple directions.', 'start': 608.29, 'duration': 2.561}, {'end': 612.752, 'text': "And in fact, that's what we are going to do.", 'start': 610.991, 'duration': 1.761}, {'end': 615.474, 'text': "So while they are selected, I'm going to hit shift and A.", 'start': 612.852, 'duration': 2.622}, {'end': 617.315, 'text': "I'm going to change the alignment to left.", 'start': 615.474, 'duration': 1.841}, {'end': 619.756, 'text': 'and here we have the space between.', 'start': 617.575, 'duration': 2.181}, {'end': 624.498, 'text': 'if i extend this frame in the layers list, you will see that this frame 14.', 'start': 619.756, 'duration': 4.742}], 'summary': 'Creating a responsive card using auto layout for photo, tag, title, price, cart icon, and cta.', 'duration': 64.992, 'max_score': 559.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o559506.jpg'}, {'end': 718.325, 'src': 'heatmap', 'start': 684.919, 'weight': 3, 'content': [{'end': 693.585, 'text': "now i'm gonna select my card frame and i'm gonna increase the corner radius amount to something like eight pixels and make sure to enable this clip content.", 'start': 684.919, 'duration': 8.666}, {'end': 696.407, 'text': "otherwise you won't see rounded corners here.", 'start': 693.585, 'duration': 2.822}, {'end': 697.868, 'text': 'just check this checkbox.', 'start': 696.407, 'duration': 1.461}, {'end': 698.409, 'text': "what's next?", 'start': 697.868, 'duration': 0.541}, {'end': 704.994, 'text': 'Well, what I wanna do is this I want this Buy Now button and this price to sit in one line, okay?', 'start': 698.669, 'duration': 6.325}, {'end': 711.32, 'text': 'So what we can do is select these two, hold down the Shift key and select them, add Auto Layout to them,', 'start': 705.134, 'duration': 6.186}, {'end': 715.263, 'text': 'hit Shift and A and change the direction to horizontal.', 'start': 711.32, 'duration': 3.943}, {'end': 718.325, 'text': 'Just like that, now they are sitting next to each other.', 'start': 715.523, 'duration': 2.802}], 'summary': 'Designing a card frame with 8px corner radius and enabling clip content, then aligning buy now button and price in one line using auto layout.', 'duration': 21.918, 'max_score': 684.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o684919.jpg'}, {'end': 759.32, 'src': 'heatmap', 'start': 730.416, 'weight': 0.749, 'content': [{'end': 736.422, 'text': "So while it's selected, I'm gonna change the spacing mode to space between and nothing happened.", 'start': 730.416, 'duration': 6.006}, {'end': 741.447, 'text': "Why? That's because the resizing property of this frame is set to fixed.", 'start': 736.703, 'duration': 4.744}, {'end': 744.45, 'text': 'if i change it to fill container.', 'start': 742.168, 'duration': 2.282}, {'end': 746.351, 'text': 'now it works as expected.', 'start': 744.45, 'duration': 1.901}, {'end': 753.796, 'text': "so whenever you change something here and it's not reflected in your design, make sure to take a look at the resizing properties as well.", 'start': 746.351, 'duration': 7.445}, {'end': 759.32, 'text': "now i want to select this content frame and i'm going to change its padding.", 'start': 753.796, 'duration': 5.524}], 'summary': 'Changing frame properties resolves spacing issue, check resizing properties for reflection in design.', 'duration': 28.904, 'max_score': 730.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o730416.jpg'}, {'end': 917.352, 'src': 'heatmap', 'start': 835.833, 'weight': 0.77, 'content': [{'end': 837.054, 'text': 'Let me show you how it works.', 'start': 835.833, 'duration': 1.221}, {'end': 839.936, 'text': "While it's selected, I'm gonna click on this icon.", 'start': 837.254, 'duration': 2.682}, {'end': 841.817, 'text': 'Okay, it says absolute position.', 'start': 840.096, 'duration': 1.721}, {'end': 847.282, 'text': "And as soon as I do that, it doesn't take up any space anymore, and it's just floating.", 'start': 841.938, 'duration': 5.344}, {'end': 852.445, 'text': 'i can easily adjust its position without affecting the elements around it.', 'start': 847.762, 'duration': 4.683}, {'end': 858.148, 'text': "now i'm going to hold down the alt key or option key on my keyboard to set the top and right padding to 16 pixels.", 'start': 852.445, 'duration': 5.703}, {'end': 864.951, 'text': "and here's the thing when you use absolute position, you can again use constraints instead of resizing option.", 'start': 858.148, 'duration': 6.803}, {'end': 873.676, 'text': 'so since i want this icon to stay where it is, i want to set its constraints to top and right, and if i select this card and adjust its width,', 'start': 864.951, 'duration': 8.725}, {'end': 877.658, 'text': "you will see that i'll get my desired result.", 'start': 874.116, 'duration': 3.542}, {'end': 880.979, 'text': 'however, my image is not responding.', 'start': 877.658, 'duration': 3.321}, {'end': 882.119, 'text': 'how can we fix that?', 'start': 880.979, 'duration': 1.14}, {'end': 883.12, 'text': "it's very simple.", 'start': 882.119, 'duration': 1.001}, {'end': 895.185, 'text': "i'm going to select this photo and i'm going to change this resizing option from fixed width to field container and also here from fixed height to field container.", 'start': 883.12, 'duration': 12.065}, {'end': 907.769, 'text': "now i can set the width to something like 290 pixels and i'm gonna bring my cart icon right here and if i select my card, it should be responsive now,", 'start': 895.185, 'duration': 12.584}, {'end': 909.33, 'text': 'just like that.', 'start': 907.769, 'duration': 1.561}, {'end': 912.53, 'text': 'can you see how easy it is to use auto layout in figma?', 'start': 909.33, 'duration': 3.2}, {'end': 917.352, 'text': "and don't forget to change the alignment for this frame to center all right.", 'start': 912.53, 'duration': 4.822}], 'summary': 'Demonstration of using absolute position and auto layout in figma for responsive design.', 'duration': 81.519, 'max_score': 835.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o835833.jpg'}, {'end': 883.12, 'src': 'embed', 'start': 858.148, 'weight': 5, 'content': [{'end': 864.951, 'text': "and here's the thing when you use absolute position, you can again use constraints instead of resizing option.", 'start': 858.148, 'duration': 6.803}, {'end': 873.676, 'text': 'so since i want this icon to stay where it is, i want to set its constraints to top and right, and if i select this card and adjust its width,', 'start': 864.951, 'duration': 8.725}, {'end': 877.658, 'text': "you will see that i'll get my desired result.", 'start': 874.116, 'duration': 3.542}, {'end': 880.979, 'text': 'however, my image is not responding.', 'start': 877.658, 'duration': 3.321}, {'end': 882.119, 'text': 'how can we fix that?', 'start': 880.979, 'duration': 1.14}, {'end': 883.12, 'text': "it's very simple.", 'start': 882.119, 'duration': 1.001}], 'summary': 'Using constraints in absolute positioning fixes image responsiveness.', 'duration': 24.972, 'max_score': 858.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o858148.jpg'}], 'start': 399.775, 'title': 'Figma design principles', 'summary': 'Covers figma alignment and resizing options, emphasizing benefits and functionality, and demonstrates creating a responsive card using auto layout, alignment, padding, absolute positioning, and achieving responsiveness, resulting in a beautiful and responsive card design.', 'chapters': [{'end': 559.146, 'start': 399.775, 'title': 'Figma alignment and resizing', 'summary': 'Explains the options for aligning elements based on text baseline and the resizing properties in figma, highlighting the benefits and functionality of each feature.', 'duration': 159.371, 'highlights': ['The resizing options allow users to define how they want the content within a frame to respond to changes in size, providing flexibility and responsiveness to elements within Figma.', 'The text baseline alignment feature enables alignment of text and elements based on the text baseline, providing a helpful solution for aligning icons with text.', "The chapter illustrates how changing the resizing property of text inside a frame to 'fill container' allows it to be responsive and adapt to changes in size, showcasing the practical application of resizing properties in Figma."]}, {'end': 938.715, 'start': 559.506, 'title': 'Creating a responsive card in figma', 'summary': 'Demonstrates creating a responsive card in figma using auto layout, including adding elements, setting alignment, applying padding, utilizing absolute position, and achieving responsiveness through resizing options, resulting in a beautiful and responsive card.', 'duration': 379.209, 'highlights': ['Demonstrating the use of absolute position for the card icon The speaker explains the use of absolute position for the card icon, allowing precise placement without taking up space, and sets top and right padding to 16 pixels, ensuring the icon stays in place.', "Utilizing auto layout to create Buy Now button and price alignment The tutorial illustrates using auto layout to place the Buy Now button and the price in one line, changing the spacing mode to 'space between' and adjusting the resizing property to 'fill container' to achieve the desired layout.", "Applying resizing options to achieve responsiveness The speaker demonstrates changing the resizing options of the photo and the card to 'fill container' to ensure responsiveness, resulting in a beautiful and responsive card."]}], 'duration': 538.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/42uQGucQA9o/pics/42uQGucQA9o399775.jpg', 'highlights': ['The resizing options allow users to define how they want the content within a frame to respond to changes in size, providing flexibility and responsiveness to elements within Figma.', "The chapter illustrates how changing the resizing property of text inside a frame to 'fill container' allows it to be responsive and adapt to changes in size, showcasing the practical application of resizing properties in Figma.", "Applying resizing options to achieve responsiveness The speaker demonstrates changing the resizing options of the photo and the card to 'fill container' to ensure responsiveness, resulting in a beautiful and responsive card.", "Utilizing auto layout to create Buy Now button and price alignment The tutorial illustrates using auto layout to place the Buy Now button and the price in one line, changing the spacing mode to 'space between' and adjusting the resizing property to 'fill container' to achieve the desired layout.", 'The text baseline alignment feature enables alignment of text and elements based on the text baseline, providing a helpful solution for aligning icons with text.', 'Demonstrating the use of absolute position for the card icon The speaker explains the use of absolute position for the card icon, allowing precise placement without taking up space, and sets top and right padding to 16 pixels, ensuring the icon stays in place.']}], 'highlights': ["Figma's Auto Layout feature enables the creation of responsive elements and has been significantly enhanced with the latest update.", 'The chapter starts with an introduction to the basics of Auto Layout and progresses towards exploring more advanced use cases, ensuring comprehensive learning for the audience.', 'The chapter provides clear instructions on applying Auto Layout using shortcuts like Shift + A and interface options in Figma, ensuring ease of learning for the audience.', 'The chapter emphasizes the significance of defining the direction of auto layout, impacting the flow and arrangement of elements within the frame.', 'Covers figma design features including frame alignment, padding, auto layout, canvas stacking, spacing modes, strokes, and text baseline alignment, with practical demonstrations and impact on element spacing and responsiveness.', 'The resizing options allow users to define how they want the content within a frame to respond to changes in size, providing flexibility and responsiveness to elements within Figma.', "The chapter illustrates how changing the resizing property of text inside a frame to 'fill container' allows it to be responsive and adapt to changes in size, showcasing the practical application of resizing properties in Figma.", "Applying resizing options to achieve responsiveness The speaker demonstrates changing the resizing options of the photo and the card to 'fill container' to ensure responsiveness, resulting in a beautiful and responsive card.", "Utilizing auto layout to create Buy Now button and price alignment The tutorial illustrates using auto layout to place the Buy Now button and the price in one line, changing the spacing mode to 'space between' and adjusting the resizing property to 'fill container' to achieve the desired layout.", 'The text baseline alignment feature enables alignment of text and elements based on the text baseline, providing a helpful solution for aligning icons with text.']}