We built the Design tab specifically for responsive work and to make it possible to create designs completely from scratch in Framer. Use this guide to learn the basics of our design interface and features.
Framer’s Design interface will be familiar to most, with a large canvas, device preview, and full-featured toolkit. Like many of the other graphics tools you already use, Framer Design offers the same insertable shapes and text, all easily styled using the properties panel.
Where Framer Design starts to feel different is in the focus and power of its layout design feature set. Because it has been developed specifically for interactive design work, our graphics tool is able to make smart layout and hierarchy decisions for you. It intuitively guesses relative positioning and alignment making for a much more efficient flow when it comes to responsive design work.
Ground zero for experimenting with concepts and mocking up flows. Draw directly on the canvas or insert device specific frames.
Framer Design offers a blank canvas to explore ideas through quick concepting or one-off mockups. You can draw directly on the canvas, import images and insert icons. Or set up a series of frames to create a multi-screen app flow.
If you do decide to design directly on the canvas, all of the layers you insert will not contain a parent frame. Placing your layer on the x: 0 and y: 0 position values will position the layer to the top left of the preview window when you toggle over to Code. Designing on the canvas works great for smaller interactions, but we recommend using frames for complex and responsive app flows.
When working with the canvas, you can pan out for big picture perspective or zoom in to get your design pixel perfect. No matter how you like to work, the canvas supports your design flow.Learn more ›
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 frame icon on the top left corner of Framer, or press F to insert a frame even faster. On the right side of Framer, 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 frame 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.Learn more ›
Layers & Shapes
Layers automatically adapt to layout and hierarchy, and shapes can be customized completely so you can create super-detailed icons and designs.
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, P for polygon, and S for star. 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.
You can also insert, manipulate, and style text, images, and GIFs using the properties panel. Shortcut: Type T for text to speed up your workflow.
Aside from typical layers, Framer also supports dragging and dropping GIFs directly onto the canvas. GIFs behave exactly like a layer and auto-play within the Framer environment.
To make the layers you designed in Framer usable in the code tab you have to enable targeting. Targeting only the layers you need will keep your document tidy and coding even easier.
Only the layers that have targeting enabled will be targetable in the code and show up in the layer list in the code tab.
To enable targeting click the target icon on the right of a layer in the layer list or right click Rename to Target. Enabling targeting on a layer will activate the input field. If you have already renamed your layer before Framer will automatically correct the name to a format that is readable by the Framer code editor. If you have not renamed the layer before you will be prompted to insert a name. The preview on the right of the layer will show you the what your layer will be called in the code tab.
Targetable layers will have an active target icon next to their name. To delete or rename the target right click the layer in the layer list and choose Delete Target or Rename Target.
Currently only Frames are targetable. If you want to animate shapes in code, wrap them in a Frame by selecting the shape en pressing Enter. Then enable targeting on the Frame.Learn more ›
Layout & Hierarchy
By focusing on automatic hierarchy and relative layout positioning, Framer lives up to the demands of modern day interface design.
When you place a layer on the canvas in Framer, it is smart enough to guess the layer’s hierarchy based on its visual position. This sequencing will also be noted in the order displayed in the layer panel.
In this way, almost everything you place on the canvas will be ordered according to a parent-child relationship. Because we automatically guess hierarchy this way, you won’t have to worry about grouping any longer.
Parent & Child
It is important to understand the concept of this relationship. For example, placing a circle inside of a rectangle makes the rectangle the parent of the circle. The circle then becomes the child of the parent, along with any other layer placed within the rectangle. In this way, a frame is a parent of a navigation bar which is in turn the parent of multiple children, which can include header text, battery icon and menu icon.
Once this parent-child relationship has been established, child layers will always mimic the behavior of its parent layer. If you resize, reposition or move the parent layer, the child layer(s) will follow suit. This is extremely handy when it comes to scaling your design across multiple screen sizes.
Need to check alignment and spacing between your child layers? You can rearrange hierarchy at any time by simply dragging and reordering layers in the layer panel. Or right click and select delete from hierarchy.
Automatic Responsive Layouts
When you place a layer on a frame, Framer automatically guesses its layout rules. Your work will always be responsive and viewable across multiple devices. To learn more about how to set layout rules, navigate to Layer Properties.
Layer List Hierarchy
Unlike traditional graphics tools, the layer list in Framer Design does not group layers. Rather it operates on the basis of linking layers together in parent-child relationships. The hierarchy of the layers in relationship to one another is reflected in the layer list. Child layers will be nested under parent layers. This allows for much more intuitive behavior when it comes to responsive layout design.
Style elements of your layers like size, radius, fill, multiple shadows, gradients and effects. Use the alignment tools and live simulation to accurately position layers for instant responsiveness.
On the right side of the design canvas, you’ll find a properties panel. Much like any other graphics tool, it contains all the tools you need to style the properties of a particular layer. At the top of the panel is a series of align tool options. Use them to smartly position your layers within the frame and in relation to each other.
You can alter the properties of your frame, such as changing its fill color, size or position. To test the responsive nature of your frames, select one or more at a time to bring up its properties, then switch devices. If all your content is correctly aligned, it should automatically adapt to the new dimensions of your frame.
To view the styling properties of your layers, you can select one or more layers in the layer list or highlight them directly on your canvas. Framer contains all of the styling properties you would expect from a modern design tool.
Gradients in Framer are based on the CSS Model. This means our gradients are simple—an angle and two color stops. Resizing a layer will not impact the gradients because it will stay true to its angle and automatically adapt to the layer size. This also means the linear gradients you create will be adaptive by nature in both Design and Code.
Borders lets you add a border around any layer you create in Framer. You can control the color, width, and style of the border. Because Framer is web based, you’ll be able to set border styling and individual border size for the top, right, bottom, and left of the layer.
Multiple Shadows allow you to add more than one shadow to your desired layer. From outer to inner shadows, you can stack a combination of as many shadows as you want. You can even animate individual shadows. The shadow properties in Code allow you to animate the values you have set in Design to add an extra dimension to your prototype.
Effects in Framer adds an extra set of styling capabilites, including blending modes to blend layers and colors, object blur to blur an entire object, or background blur to blur the layers behind it. There are also filters like Contrast, Grayscale, Hue Rotate, Invert, Saturate and Sepia, for enhanced photo editing. All of the blurs and filters translate seamlessly into Code to allow you to build iOS-like prototypes with dynamic blur or instagram-like photo editing with animatable filters.
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.
For example, if you place a menu bar layer (child) on the right side of a tab bar layer (parent), Framer will automatically guess that your menu bar should be right aligned anchored in relation to the tab bar. You can change the anchor points of layers at any time, by using the properties panel. To help you make anchoring decisions quickly and easily, Framer Design also offers a live simulation of how anchoring will work on the selected layer. The simulation will show you the responsiveness of a layer, based on the constraints you have selected.
To increase the efficiency of your workflow, Framer will automatically resize any child layers to mimic how parent layers (including frames) are being resized.
Because Framer layers work within the parent-child relationship rather than grouping, clipping and masking are handled differently. To mask a layer, place the child layer on top of the parent layer, select the parent layer and click on Clip in the properties panel. This will lock the child layer to the boundaries of the parent layer.
Text Alignment Properties
In Framer, text is inputted as a layer with some smart properties of its own. A text layer will align logically based on where it is placed on the parent frame.
For example, a text layer placed on the left side of a navigation bar will immediately left align and anchor there, no matter how the parent layer or frame is resized or scaled. You can alter the constraints of this automatic alignment at any time by selecting the text layer and using the positioning tool in the properties panel.
In Framer, you can change both the size of the text and the layer itself. Resizing the text field will resize the constraints of the layer, perfect for defining the width of a block of text.
This section covers exporting from Framer. Export screens and assets to start developing your designs or copy CSS values for your next web design project.
Exporting works exactly as you’d expect. You can create multiple exports for a single frame or shape to cater to multiple resolutions. Simply select a layer and hit export in the bottom right corner of Framer. Select one of the premade presets or add your own. Adding a suffix to the preset will append this to your file name. Clicking the suffix dropdown allows you to save assets to organized folders.
Framer allows for quick exporting just by right-clicking on a layer. Select
to copy the selected item to your clipboard. You can paste to any app that supports pasting images, easily add your exports to documents, create quick mocks, or gather feedback in chat apps.
CSS & SVG Exporting
Right-click a layer and select Copy CSS to copy the CSS values or Copy SVG to copy the SVG values of the selected layer to your clipboard. Then paste perfectly formatted CSS or SVG code directly in your favorite editor to speed up your development workflow.
Framer has a few pre-loaded exporting presets. The iOS and Android presets contain all of the platform-specific sizes you’ll need for development. You can always add your own custom preset by hitting the
icon in the export panel.
iOS Size Presets
Android Size Presets
In this section we cover all of the additional tools available to you in Framer Design. You can access this set of features by right clicking on your layers in the layer list, on the canvas or the canvas itself.
Forward & Backward
Use this to quickly reorder hierarchy. Selecting a layer and clicking forward will move the layer higher up in the layer list, while backward will move it down. When you move a layer back and forward, its child layers will move with it.
Selecting a frame or shape and right-clicking ‘duplicate’ will copy and paste it onto the canvas, along with all the properties and child layers it contains. Duplicate frames will be placed to the right of the original frame, while duplicate layers will be stacked on top of the original layer.
Selecting a frame or shape and right-clicking delete will immediately remove it, along with all the child layer it contains.
Delete from Hierarchy
To delete only a parent layer while still retaining all its child layers, select the parent layer, right-click and select delete from hierarchy. This will remove the parent layer and return the children to their original hierarchy on the frame or canvas.
Selecting two or more layers and right-clicking add frame will group the two layers together and nest them under an invisible parent layer. Using automatic responsive layout rules, the two layers will now behave as a single entity. Resizing the parent will not affect the children.
2Switch to Code
ArrowsUnits By 10
0 - 9Change Opacity
ASelect all layers
To add animation to designs you have set up in external graphics tools, simply import into Framer. We offer one-click integration with Sketch, Figma and Photoshop.
Working in Sketch, Figma or Photoshop? Framer offers a fully integrated import workflow, so you can go back and forth as many times as you need. Currently, you can only import a design into Code to start animation.
Launch Framer, navigate into the
and open a saved
file. Then, click the
icon in the bottom left sidebar. The popover will recognize the graphics file you have open. Be sure to save any file prior to importing into Framer. In the popover, you will also have the option to choose scale dimensions for your designs.
Framer groups any layer group (containing at least a single layer) as a layer in Framer. Layers should be selected by their name and grouped in Sketch. Ungrouped layers will not be included.
Once you’ve successfully imported a file, the following line of code gets inserted at the very top of your Framer prototype:
# Import file "design"sketch = FramerImporterload"imported/design@1x"
This loads and contains all of the imported layers. By default, the file is named after the app you’ve used to import. You can rename the file for an easier way to reference layers later.
Now, to select a layer group that you’ve renamed layerA, type:
# Import file "design"sketch = FramerImporterload"imported/design@1x"# Set the opacity of layerAsketch.layerA.opacity = 0.5
Layer groups placed within other groups are called children. In the example below, the group has two children. They can be selected directly and there’s no need for you to take the layer hierarchy into account.
If you’re using Sketch and don’t want the children to be selectable in Framer, you can flatten the group. Add
to the end of a group name and it will become a single layer without children. To exclude a group entirely, add a
to its name.
Select Multiple Layers
You can also select multiple layers simultaneously. This comes in handy for when you’d like to animate a couple of layers at once, or hide one of your layer groups.
This can be done with a for-loop. You can choose to select all of your imported layers, or just the layers within a specific group.
How are my layers positioned?
The x and y position of your layers are turned into x and y properties. If you’re not working with Frames, make sure all of your layers are part of a single layer group, positioned at
Layers positioned at
will appear at the top-left corner of the canvas in Framer. Layers with
coordinates are positioned outside the canvas.
Can I design in Artboards?
Yes, you can design in Artboards. The position of the extreme left Artboard on your canvas will be set to
0,0. All other Artboards are positioned relative to the leftmost Artboard. This makes it easier to prototype multi-screen flows.
What happens to hidden layers?
Layers that you’ve hidden in Sketch are also imported, but
will be set to