Design adaptive interfaces, draw detailed icons and illustrations or build simple multi-screen prototypes.
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, we now have a brand new 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.
The Link tool allows you to create connections between screens. You can activate the tool by hitting "L", while having a Frame selected. This will display an arrow, following your cursor, which you can drop on any other Frame to link the two. Clicking on the first Frame will now trigger a transition to the second.
The Link tool also comes with a wide variety of options that you can choose from. There are different transitions that you can pick from to get your flow working just the way you want it to.
The Scroll tool allows you to create scrollable areas. Once created, you can link this to any Frame, which will mirror the content inside of your scroll area. Make an update in the Frame and it will be reflected in your scrollable area immediately.
The Scroll tool also lets you choose which directions you can use your scrolling: horizontally, vertically or both. When choosing "both", you can also lock the direction to prevent diagonal scrolling. You can also select the mouse wheel to be turned on or off, so that you can perfectly simulate a mobile experience.
The Page tool allows you to create swipeable content areas in your designs. Once you’ve selected Page in the interactive tools panel, drag a swipeable area and use the connector to link to multiple frames, which will mirror the content inside of your swipeable area. Repeat to add multiple pages.
All pages will appear in the Content section of the properties panel, complete with a live preview of each frame. You can even add, remove, or rearrange pages from here if need be.
Width & Height
After you create a paging area it will automatically be set to Width: Stretch and Height: Stretch, which means that the content of the connected Frames will stretch to fill the entire page area. Setting them to Auto will make the page resepct the width and height of the connected Frames.
Setting the Gap will increase the space between connected Frames, which means they’ll have a margin and won’t stick to each other.
Padding will be set on the entire paging area. Just like our border and radius properties, you can set the padding property individually on each side.
If you want to change the page that your paging area currently displays, you can do that by setting Current. This will also set the page you’ve chosen as the starting page when viewing your designs in the preview window.
By default the Momenum propety is disabled, which means every swipe lands exactly on the previous or next page depending on your swiping direction. Enabling the Momentum property allows you to flick through your pages with momentum. Swipe harder to skip a page or two and swipe softer for finer control.
The page tool contains a wide variety of paging effects that will allow you to customize the way you swipe through your pages. Choose from five different effects.
In Framer X, we make a distinction between graphics and interactive tools. To use the Path tool or any Shapes, you will first need to head to the Drawing section in the Tools panel and select Graphic (or hit G at any time). This Graphics tool acts as a container for all your visual artwork. Once you draw a Graphic container on the canvas, you’ll notice that your Drawing toolkit appears in the top left corner of your canvas.
To start using the Path tool, first use the Graphics tool to draw a container on the canvas. You’ll notice that a set of Drawing tools now appear in the top left corner, along with a Path tool. Our Path tool features everything that you want and need. When drawing icons, you’ll often rely on geometric shapes as the foundation of your glyph. The Path tool helps you along the way. While drawing or editing a path, we’ll suggest the calculated center point for you—so you can quickly find and snap to these points along your segment.
Our Path tool also helps you define diagonal lines because continuing along the exact angle of a previous segment is tricky. The tool does the hard work for you—once your cursor comes close enough, we’ll lock your angle for you, so you can draw perfectly aligned icons and illustrations.
Curve Bending uses synchronized anchor points to guide you closer to your desired curvature, allowing for more advanced illustration work. This is especially helpful if you’re departing from geometric shapes and moving toward freeform drawing. Click and drag any anchor point to bend and twist the path into more organic forms.
To find and use Shapes, first use the Graphics tool to draw a container on the canvas. A set of Drawing tools will now appear in the top left corner. Insert rectangles, ovals, polygons, and stars, then use them as a starting point for more advanced shapes. Shortcuts: Type R for rectangle, O for oval, and P for polygon. Double-click to edit and customize completely, and use boolean operations to add, subtract, intersect, and exclude shapes.
If you want shapes to act upon layout rules like any other layer, you can wrap them in a Frame by selecting the shape and pressing Enter. This way the Frame will act like a smart container to the shape.
Our boolean operations support functions to add, subtract, intersect, exclude and join shapes. This will let you create more complex shape with ease. When selecting a shape, you’ll find our Boolean Operations options at the top of the properties panel. Select two shapes, select an option and click again to toggle.