Framer – Medium | Framer Team

Level up with our official tips, tricks and shortcuts | Framer.com

With the launch of Framer Design, you can now start your designs from scratch directly in Framer. Skip the back and forth of importing files and start with a blank canvas in our new Design tab. Draw, insert shapes, add text and artboards, then switch to Code once you’re ready to add interactions.

The Framer Design interface should be familiar and intuitive to designers, but here are a few tips and tricks that can help speed up your workflow even more.

Targeting

How to activate a layer you designed in Code.

To activate the layers you designed in Framer, click the target icon to the right of a layer name in the layer list. If you want to keep things even more tidy, right click “Rename to Target” and edit any layer name. Whether you name your layers beforehand or do so later, Framer will automatically convert the name to a readable format for the Framer code editor.

Right click to delete or rename the target.

Learn more about Targeting

Clipping

How to quickly lock a layer to the boundaries of another.

Rather than grouping layers, Framer works within the parent-child relationship. To lock a child layer to the boundaries of a parent layer, simply place the child layer on top of the parent layer and click “Clip” on the properties panel.

Still confused about the parent-child relationship? This is how it works:

Place a circle inside of a rectangle. This makes the rectangle the parent and the circle the child. The same goes for any other layer placed within the rectangle. Think of it this way: the artboard is the parent of the home button, which is in turn the parent of an icon.

More about parent & child relationship

Automatic Hierarchy

How Framer can help with automatic hierarchy and relative positioning.

Framer lives up to the demands and expectations of today’s interface design by automatically guessing hierarchy. When you place a layer on the canvas, Framer guesses the hierarchy based on its visual position. You’ll notice the same sequencing and hierarchy in the layer panel.

Learn more about layout and hierarchy

Auto Resizing

How Framer’s responsive design feature works.

Instead of creating separate prototypes for every device, Framer makes it possible to design a responsive prototype that adapts to any metric demand. Landscape or portrait, iPhone 5s or 7 — just style the elements of your design once. Whether its alignment, artboard, or layer properties, when it’s time to switch devices or resize, Framer adapts automatically.

Learn more about auto resizing

Gifs

How to drag and drop directly into your Framer artboard.

Insert, manipulate, and style elements like rectangles, ovals, text, and images. You can also drag and drop gifs directly onto the canvas. Gifs behave like regular layers and can be manipulated like any other shape. They also auto-play within the Framer environment.

Learn more about gif support

Shortcuts

How to do things faster.

Master some easy Framer shortcuts and you’ll be able to move around the canvas in just a few clicks. Edit designs, arrange layers and switch tools using just your keyboard.

Use Space and Drag to pan across the Canvas, ⌘ and D to duplicate selected artboards or ⌥⌘C to copy styling. For even more handy shortcuts, view the full list here.

These shortcuts should allow for a speedier and more efficient workflow from start to finish. Because we ship as soon as features are built, you can expect ongoing additions. Got feedback or a feature request? Tweet us or leave a comment on Facebook, we’re all ears.

How to Master Framer Design was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.