#Figma responsive resize how to
#Figma responsive resize plus

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.

#Figma responsive resize plus

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.

The icon has got usually resizing options set to “fixed”, but the text label is set to “hug contents”.Jeremy Osborn: Creating complex responsive interfaces in Figma can be done very quickly using Auto Layout. It should also stretch if the icon appears inside of it. The button should adapt its size to the text label width. Now, let’s see how real design system components use Auto Layout to adapt the size to their content. You will notice smart guidelines that will highlight the drop area. All you have to do is to select the component you want to move and drag it inside the container frame. Add Layout grids to the frame with AutoLayoutĮditing the order of objects in Auto Layout Frame is superfast.Use Smart selection on any objects within that frame.Add Constraints to any elements within an Auto Layout frame.You can’t do the following things to Auto Layout frames: It is worth mentioning that Auto Layout has got some limits. You may do it by clicking the plus button in the Auto Layout Section of the right panel or by clicking the “Shift + A” shortcut. You may add Auto layout to a frame or a selection of objects (that will be turned into a frame with the Auto layout). If may be positioned in the Center, or even scale proportionally to the frame size changes. The object may stick to the Left, Right, Left and Right, Top, Bottom, Top, and Bottom. You may choose multiple options when working with Constraints.

#Figma responsive resize how to

Thanks to constraints, Figma knows how to modify the size and position of the specific element when its frame is resized. Use it every time when you need to prepare designs that have to be resized for multiple platforms or breakpoints (responsive websites) and share the same UI elements. With Constraints, you may build components that adapt size and position to their environment (frame). In this article, I would like to present you not only the features but also samples - how components benefit from sizing behaviors. That is why it is essential to master Constraints and Auto Layout in Figma. They also let us think more like a developer that has to implement the real application. Creating components with automated sizing behavior saves a lot of time during the process.