Layout & Design, Quick Tips

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Joseph

·

4:19

·

2.8K views

·

About this lesson

If you've been doing things the long way in Framer, this one's for you.

We're going through eight keyboard shortcuts that help you resize frames without breaking layouts, quickly insert library components, drag overlapping layers without misclicking, toggle visibility, pull layers out of stack flow, prevent accidental reparenting, auto-wrap with stacks, and unwrap frames cleanly.

Once you pick these up, you'll wonder how you worked without them.

00:00 Intro

00:20 Resize frames without breaking layout

00:38 Search and insert library components

01:07 Drag a specific layer without misclicking

01:35 Toggle layer visibility with a shortcut

01:56 Pull a layer out of stack flow

02:18 Prevent accidental reparenting while dragging

02:30 Shift+A to auto-size or wrap in a stack

03:23 Unwrap a frame and keep its children

03:57 Recap

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00There are a lot of keyboard shortcuts in Framer that will speed up your work significantly,0:05but I suspect that if I throw some of my favorites at you, there just might be a few0:10that you're not taking full advantage of. So let's run through eight awesome Framer shortcuts0:15that you might be sleeping on.0:20Shortcut number one. Normally, when you resize a frame, Framer respects the pinning and constraints0:26of the absolute position elements inside. But if you hold command on a Mac or control on a PC0:32while resizing, you can temporarily ignore all of that and resize the parent freely without0:38blowing up your layout. Shortcut number two. Press command or control forward slash and you can0:45instantly search and insert components you've added to your workspace library. To add a component0:50to your workspace library in the first place, just head to the assets panel and click the overflow0:55menu next to the component you want to add and choose library add. Now that component will be1:02available to insert from the command forward slash menu from any project in your workspace.1:07Number three. When layers are small or overlap, it can be tricky to drag the one that you're1:12aiming for to move it around. But once you have your layer selected, if you hold option and command1:18on a Mac or control an alt on a PC, then start dragging. Your cursor will hold onto your selection,1:24no matter where you click and drag. It might sound small, but it's a huge help when things get1:30crowded on the canvas. Number four. When you want to hide a layer, it's easy enough to head to the1:35properties panel and toggle the visible property to no. But if you find yourself doing it a lot,1:41it's a heck of a lot easier to hold the command or control key and press semi-colon to toggle visibility1:47back and forth. Unlike setting opacity to zero, this lets you remove the element from the canvas,1:52which means layers around it will act like it doesn't exist.1:56Number five. Stacks normally set their children to relative positioning so they flow with the stack.2:02But if you drag a layer, then keep the control key held down on your Mac. You can pull that layer2:07out of the flow and position it absolutely, all without having to touch the properties panel.2:13Number six. When you drag layers around the canvas, they often try to reparent themselves into2:19the frame you're hovering over. But if you hold the space bar while dragging, you'll temporarily2:24disable that behavior. No more accidentally dropping a layer out of or into the wrong frame.2:30Next up is number seven, and this shortcut can actually do different things,2:34depending on what you have selected. With one layer selected, the shortcut Shift A sets the width2:41and height to fit. As a bonus, if the frame isn't already a stack, it'll automatically turn into one.2:48Since auto with and height, don't work on regular frames. With multiple layers selected,2:53or if the selected layer is already set to fit, Shift A behaves a little differently.2:59It'll instead wrap the selection in a stack and make it full with, which is the same as pressing3:04command option return on a Mac or control alt enter on a PC. Bonus tip. If you don't want the3:10position of your selection to shift, first press command return or control enter to wrap it in a3:15regular frame, then press Shift A to convert it to fit. And last but not least, number eight.3:23We just talked about a few ways to wrap a layer in a frame or stack, but what about unwrapping3:28them? If you select a frame and press command or control delete, you'll remove the selected frame,3:34but keep all of its children unscathed. It's the fastest way to undo an unnecessary wrapper without3:41manually moving everything out of it first. Just be aware that if the next parent frame up in3:46the hierarchy is a stack, the unparanted layers will shift into the flow of that stack. So don't let3:52that catch you off guard. And there you have it. Eight frame or shortcuts that are easy to miss,3:57but once you know them, they seriously speed up your workflow and give you more control over4:01things like layout, structure, and selection. That's it for this one. I'll see you in the next one.

Watch on YouTube ↗

‹ Framer Update: CMS 3.0

Framer Creators: Lee Black, from print to Best Framer Designer ›

More in this topic

Exporting Assets in Framer3:09
Exporting Assets in Framer
Quick Tips3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.