Note the resizing values here switch to Fixed width and Fixed height. To test this, click and drag the bottom right corner of the frame. And it works for both horizontal and vertical space. This behavior is due to a feature in the Resizing section called Hug contents, which removes any extra space around the child objects in a frame. But you’re going to edit now by clicking the plus sign (+) or use that Shift+ A shortcut.
Remember, this does not have Auto Layout. So go ahead and click on the frame below this one ( icons/stars without Auto-Layout). And we’re going to come back to that in a minute. Now, this last property is padding and alignment combined. And you can see that the space is added on all four sides equally. Padding is the space between these items and the surrounding frame. All those objects are as close as possible to each other. Currently, a value of 24 - go ahead and type 0. To build more complex designs that use both directions, like this component, for example, that’s going to require nested frames, something we cover in a different video. (Big Idea) Auto Layout only works in one direction at a time, either horizontally or vertically. And this leads to another important point. And all of the objects are reordered horizontally. Click on the right-facing arrow (→) to apply Horizontal direction. Let’s start with direction, which is currently set to vertical. And then over to the right, in the Auto layout controls, you’ll be examining direction, spacing, and padding. The top one has Auto Layout, and this bottom one does not. In the left side bar, click on the second page. Let’s dig a little deeper and look at how you can control some of the properties of Auto Layout. And that’s exactly what happened with our button. Now, if you happen to apply it to an object not in the frame, Figma will generate one for you.
And that leads us to our big idea, which is Auto Layout only works on frames. But what happened here exactly? Applying Auto Layout to the text layer actually created a parent frame. Notice that the button width expands automatically and the text remains centered. Now, to see Auto Layout in action, double-click on that type layer. Go ahead and click the plus sign (+) in the Fill section to apply a white background for the button. Figma notifies you that Auto Layout has been applied. Then click anywhere in the canvas and use the keyboard shortcut for applying Auto Layout, Shift+ A. Let’s start by creating an Auto Layout button. And you can also find this link in the Resources section for this video. Now, you can follow along with me by going to this URL on Figma Community, where you can duplicate this project. And it’s incredibly useful for prototyping. Jeremy Osborn: Auto Layout in Figma is a feature that allows you to create frames or components that reflow as their contents change. Transcript Working with Auto Layout in Figma
0 kommentar(er)
