Where Framer X starts to feel different is in the focus and power of its layout design feature set. Our layout tools have been developed specifically for interface design. It intuitively guesses hierarchy and layout constraints, making for a much more efficient flow when it comes to responsive design work.
Create layouts that are responsive to any screen size with our Frames tool, which includes presets for desktop, iOS, and Android.
To insert a Frame, click the Frames icon on the top left corner of Framer X, or press
F to insert a frame even faster. In the properties panel on the right, you’ll notice a list of pre-set Frames that correspond with the most popular devices and screen dimensions. To create a custom Frame, select the Frames tool and then click and drag on the Canvas.
Frames aren’t limited to a fixed width and height, but are instead dependent on the device you select. Draw a frame within a frame to pin it to a side and set hierarchy automatically. Frames even adapt when you resize, all while keeping UI elements like buttons, cards, and tab bars completely intact. When one or more frames are already on your canvas, Framer automatically guesses where your next frame should be placed.
When you place a new frame (child) on top of another frame (parent), Framer recognizes its placement and uses smart positioning to determine its anchoring in relation to the parent frame and the child frame. This vastly increases the efficiency of a typical design workflow. If you do need to change the anchor points at any time, you can manually do so using the positioning tool in the properties panel.
To take layouts a step further, you can use the Stack tool. Stacks are especially good for expressing truly fluid layouts, because it can automate things such as distribution and alignment. You can use the Stack tool by pressing
S and then by making a selection on top of all the items that need to be placed within. Release and voila: Everything is now automatically aligned and distributed. You can further customize your Stack by using the properties panel. If you want to change the way the elements are distributed or if you want to adjust the gap and padding.
Automatic distribution of your items is where the Stack tool really shines. Say you have a menu and you wish to replace the order of the items in there. When your menu is wrapped within a Stack, you can simply click and drag items to move them around.
You can even nest multiple stacks inside of a larger stack. Once grouped, you can re-arrange items within each individual stack but also within the larger grouped stack.