![]() ![]() So go ahead and delete those two duplicate icons and resize the frame back to approximately 400. The Space between feature simply distributes everything equally, no matter what. And this is actually more obvious if you stretched the width of that frame further. Notice how that space between the duplicates is equal. So using Space between has other effects worth looking at. And if you expand the width of the parent frame now, the content block moves with it, exactly what we want. And you’ll see the activity-content shift to the right. ![]() And as the name suggests, a value of Packed will keep all the objects as close together as possible. Now, the two options in this menu control the distribution of objects within the frame. And let’s examine this menu currently set to Packed. So let’s take care of that.Ĭlick on the alignment option ( Alignment and padding). Now, the fact that this text block doesn’t move as the frame width changes could be a problem if your design calls for a more responsive layout. But try clicking and dragging the width of this frame to somewhere around 500 pixels. Then click on the padding control ( Padding around items) and type 16 to add equal amounts of space between the content and the frame. Next, click on the plus sign (+) in the Fill section to give this frame a white background for a unified look. And of course, you could always change that, if desired, by using this Spacing between items control. And in addition, the spacing between those two frames was calculated as 30. Then click on that frame and rename it activity-list here in the Layers list.Īnd in the controls, notice that Figma figured out that this direction of the frame should be horizontal. To begin, Shift-click both of these frames and then press Shift+ A to create a new Auto Layout frame. Now, if any of the terms I just used seem unfamiliar, you might want to check out another video of ours called Working with Auto Layout in Figma. And finally, the resizing options for both frames are set to Hug contents. ![]() The second frame ( activity-content) has 0 padding, 0 spacing, and a default alignment of top left. But to make sure the icon is centered below the timestamp, I set the alignment to the center over here. And there are 18 pixels of space between the timestamp and the icon. Click on the first frame ( activity-meta). Let’s begin by looking at the Auto Layout properties. You’re going to start with these two frames ( activity-meta and activity-content) and then use nesting and Auto Layout to create a responsive activity feed that looks something like this. This project has two frames, both of which already have Auto Layout. You can also find this link in the Resources section for this video. You can follow along with me by going to this URL on Figma Community, where you can duplicate the project. But it does require a solid understanding of alignment, distribution, resizing, and nesting, all of which I’ll be covering in this video. Jeremy Osborn: Creating complex responsive interfaces in Figma can be done very quickly using Auto Layout. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |