Design

In this section, we’ll give you an overview of the Design tab in Framer, the perfect complement to the Code part of our product. Engineered specifically for responsive design work, it’s possible to dream up an idea and create a mockup in Design before turning it into a high-fidelity prototype in Code.

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. In this regard, it is a tool that has been optimized to feel familiar.

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.

You can use the Design tab independently, or in conjunction with the Code tab and Cloud collaboration, for a complete design workflow.

Canvas

Ground zero for experimenting with concepts and mocking up flows. Draw directly on the canvas or insert device specific artboards.

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 artboards 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 artboard. 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 artboards 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 about Canvas to Code

Artboards

Adaptive artboards that fit your responsive layout needs. Design each screen in sequence and in relation to its dimensions.

In Framer, artboards are no longer limited to a fixed width and height but instead, are dependent on the device you select. Because of Framer’s automatic layout rules, artboards can still be resized at any time, with content adapting accordingly.

To insert an artboard, simply click the artboard icon in the top-left corner of Framer. Pro-tip: Press A for a shortcut to insert an artboard. Framer offers a list of preset artboards on the right that correspond with the most popular device screen dimensions. You can also create a custom artboard by selecting the artboard tool and click-dragging on the Canvas.

To speed up your design workflow we also guess where your next artboard should be placed. When one or more artboards are already placed on your canvas, Framer will use predictive sequencing technology to suggest the placement of your next artboard.

Learn about Artboards to Code

Layers

The building blocks of Framer come in all shapes and sizes. Even better, layers in Framer respond to the environment around them, adapting to layout and hierarchy intuitively.

You can insert, manipulate and style rectangles, oval, text, images and gifs using the sidebar toolkit. Or use shortcuts like R for rectangle and T for text to speed up your workflow.

But layers in Framer are far from basic. To meet the demands of a responsive layout design, they have been programmed to auto-size or lock to boundaries and hierarchy. We dive deeper into this smart behaviour flow in the section on Layout & Hierarchy.

Aside from typical layers, Framer also supports drag and drop .gif files directly onto the canvas. The .gif behaves exactly as any layer and will auto-play within the Framer environment.

Learn about Layers to Code

Targeting

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'

Learn more about targeting in Code

Layout & Hierarchy

By focusing on automatic hierarchy and relative layout positioning, Framer lives up to the demands of modern day interface design.
Automatic Hierarchy

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, an artboard 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 an artboard, 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.

Properties

Style elements of your layers, from size, radius and position to fill, shadow and opacity. Use the alignment tools and live simulation to accurately lock and unlock layers.
Alignment Properties

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 artboard and in relation to each other.

Artboard Properties

You can alter the properties of your artboard, such as changing its fill color, size or position. To test the responsive nature of your artboards, 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 artboard.

Layer Properties

To view the properties of layers, you can select one or more layers in the layer list or highlight them directly on your canvas. Framer offers almost all of the layer properties you expect, as well as some additional ones, like individual border radius.

In Framer Design, we give you the ability to control the behavior of your layers, down the most granular aspects of size and positioning. In the following sections, we go into detail about each advanced feature, which when used correctly, can be powerful beyond imagination.

Layer Positioning

When you place a new layer (child) on top of another layer (parent), Framer recognizes its placement and uses smart positioning to determine its anchoring in relation to the parent layer and the artboard. 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.

Layer Sizing

To increase the efficiency of your workflow, Framer will automatically resize any child layers to mimic how parent layers (including artboards) are being resized.

Layer Clipping

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 layer (or artboard).

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 artboard 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.

Resizing Text 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.

Additional Features

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.

Duplicate

Selecting a layer or an artboard and right-clicking ‘duplicate’ will copy and paste it onto the canvas, along with all the properties and child layers it contains. Duplicate artboards will be placed to the right of the original artboard, while duplicate layers will be stacked on top of the original layer.

Delete

Selecting a layer or artboard 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 artboard or canvas.

Add Parent

Selecting two or more layers and right-clicking ‘add parent’ 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.

Shortcuts

Tools

AArtboard

RRectangle

OOval

TText

ZZoom

Canvas

2Switch to Code

+Zoom In

-Zoom Out

0Actual Size

1Center Canvas

SpaceDragPan Canvas

Editing

ArrowsObjects Size

ArrowsUnits By 10

0 - 9Change Opacity

Show Distance

DDuplicate

DragDuplicate

CCopy Style

VPaste Style

CColor Picker

ASelect all layers

Arranging

Bring Forward

Send Backward

;Hide

LLock Selection

EnterInsert Parent (Group)

DeleteDelete From Hierarchy

Type

BBold

IItalic

UUnderline

TChange Font

Importing

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.
Get Started

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 Code tab and open a saved .sketch, Figma or .psd file. Then, click the Import 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.

Select Layers

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 = Framer.Importer.load("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 = Framer.Importer.load("imported/design@1x")
 
# Set the opacity of layerA 
sketch.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.

FAQ

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 Artboards, make sure all of your layers are part of a single layer group, positioned at 0,0.

Layers positioned at 0,0 will appear at the top-left corner of the canvas in Framer. Layers with negative coordinates are positioned outside the canvas.

Can I design in Artboards?

Yes, your Artboards also get imported. The position of the extreme left artboard on your canvas will be set to 0,0. All other Artboards are positioned relative to the most left 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 visibility will be set to false by default.