Layout & Design

Interacting with Layers in Framer (Fundamentals Lesson 3)

Joseph

6:02

85K views

Aug 23, 2024

About this lesson

Whether you’re a Framer newbie or a seasoned pro, mastering the mechanics (and tricks) of interacting with layers and navigating the canvas will speed up your work tremendously.

Let’s start with the basic mechanics of selecting layers on the canvas.

https://www.youtube.com/watch?v=AAhQd56msrQ&t=0s Intro

https://www.youtube.com/watch?v=AAhQd56msrQ&t=11s Basic layer selection mechanics

https://www.youtube.com/watch?v=AAhQd56msrQ&t=29s Selecting parents and adjusting preferences

https://www.youtube.com/watch?v=AAhQd56msrQ&t=45s Multiple selection techniques

https://www.youtube.com/watch?v=AAhQd56msrQ&t=70s Selecting from the layers panel

https://www.youtube.com/watch?v=AAhQd56msrQ&t=98s Moving layers with absolute positioning

https://www.youtube.com/watch?v=AAhQd56msrQ&t=123s Using keyboard nudging and alignment tools

https://www.youtube.com/watch?v=AAhQd56msrQ&t=146s Nesting layers inside frames

https://www.youtube.com/watch?v=AAhQd56msrQ&t=172s Preventing automatic nesting

https://www.youtube.com/watch?v=AAhQd56msrQ&t=210s Navigating the canvas

https://www.youtube.com/watch?v=AAhQd56msrQ&t=226s Zooming techniques and shortcuts

https://www.youtube.com/watch?v=AAhQd56msrQ&t=335s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00whether you're a framer newbie or a 0:02seasoned Pro mastering the mechanics and 0:05tricks of interacting with layers and 0:07navigating the canvas will speed up your 0:09work 0:11[Music]0:13tremendously let's start with the basic 0:15mechanics of selecting layers on the 0:17canvas if you're a figma or sketch user 0:20you're probably used to clicking once to 0:22select something that's at the top of 0:24the layer hierarchy then double clicking 0:27again and again to drill down or holding 0:29command land on a Mac control on a PC to 0:32directly select layers regardless of how 0:34deeply they're nested in framer you can 0:37think of this as being sort of reversed 0:40in that you can directly select any 0:42layer by simply clicking on it without 0:44having to hold any modifier key might 0:47take a little getting used to but once 0:48you adjust it's actually really nice 0:50that the layer hierarchy doesn't get in 0:52the way and you can work your way back 0:55up by pressing the Escape key if you 0:57think about it each layer only has one 0:59parent but can have many children so 1:02drilling up with the Escape key is much 1:04more predictable than drilling down by 1:06double clicking or pressing return and 1:09when you have a layer selected you'll 1:10see a dashed box around the direct 1:12parent frame which is exactly what will 1:14become selected if you press the Escape 1:17key it can take some time to develop the 1:19new muscle memory but if you find 1:21yourself holding command on a Mac 1:22control on a PC out of habit when 1:24clicking you'll find in framer this is 1:27our shortcut to select the direct parent 1:29of the layer you're clicking on which 1:31may come in handy if you just can't seem 1:34to get used to all this you can always 1:36switch this to a more figma likee 1:38selection Behavior by navigating to the 1:40preferences and turning off used direct 1:44selection to select multiple layers you 1:47can hold shift when clicking on each 1:49layer or you can click and drag a box 1:51around the layers you'd like to select 1:53normally any layer even touched by the 1:56Box you're dragging will become selected 1:58but you can also hold the alt or option 2:00key to limit the selection to only 2:02layers that are entirely contained 2:05within the selection box very useful 2:08when things are getting crowded when 2:10things start getting a bit more complex 2:11on the design canvas you can always head 2:13to the layers panel and select things 2:15directly from there when a frame has any 2:18child layers nested inside the icon will 2:20be blue instead of gray and have a 2:23disclosure triangle you can click to 2:25expand or collapse its contents holding 2:27the alt or option key when clicking will 2:30expand or collapse all the way down the 2:32hierarchy to which is super handy if 2:34you're juggling a lot of deeply nested 2:37layers now on to moving layers around in 2:41several of the coming lessons we're 2:42going to dive much more deeply into 2:44layout and the different types of 2:45positioning but for now let's keep 2:48things free form and ignore everything 2:50but absolute positioning which will feel 2:53a lot like positioning regular layers in 2:55figma or sketch when a layer's position 2:58type is absolute you can can click and 3:00drag to move it around freely and one of 3:03my favorite little tricks if you hold 3:05the option and command key on a Mac or 3:07alt and control on a PC you can click 3:10and drag anywhere on the canvas to move 3:12your selection without losing it or 3:14accidentally selecting something else 3:17and as you might expect you can also use 3:19the arrow keys to nudge the position of 3:21a layer one pixel at a time or hold 3:24shift to nudge 10 pixels at a time both 3:26nudge amounts are actually customizable 3:28too just click the zoom Lev near the 3:30bottom of the canvas and choose nudge 3:33amount when you have multiple layers 3:35selected you'll also find familiar align 3:38and distribute buttons at the top of the 3:40properties 3:41panel in the previous lesson I stressed 3:43the importance and flexibility of frames 3:47need a rectangle use a frame need to 3:49group up a set of elements use a frame 3:52so inevitably Your Design canvas is 3:54going to be full of frames and Frames 3:56within frames so when you're dragging to 3:58move layers around you'll find that when 4:01you drag a layer completely within the 4:03bounds of another frame it'll 4:05automatically become nested within that 4:07frame the same goes for using the frame 4:09tool to draw a new frame within an 4:12existing frame a little trick if you 4:14want things to overlap but prevent the 4:16automatic nesting behavior is to hold 4:18the space bar while dropping the layer 4:20where you want it this can be super 4:22handy later when you're animating things 4:24and want to move a layer outside the 4:26bounds of its parent without having it 4:28pop out navigating the canvas is just as 4:31important as selecting and moving layers 4:33around depending on the mouse or 4:35trackpad you're using you can scroll to 4:38pan around the 4:39canvas or you can hold the space bar to 4:41switch to the pan tool and click and 4:44drag to pan around you'll probably do a 4:47lot of your work at a zoom level of 100%4:49but naturally you'll want to zoom in to 4:51work on details and zoom out to navigate 4:54large projects there are quite a few 4:56tricks for zooming around and you'll 4:58find the most important command and 5:00their shortcuts by clicking on the zoom 5:02level near the bottom of the canvas here 5:04you can see that Z will activate the 5:06zoom tool which lets you click to zoom 5:09in option or alt click to zoom out or 5:13click and drag around the area you'd 5:15like to zoom 5:16into you'll often catch me using these 5:18shortcuts for zoom in andout as well as 5:21Zoom to fit so I can see everything 5:23that's on my canvas and zoom to 5:26selection to zoom and pan to whichever 5:28layer or layers I have selected and then 5:31of course Zoom to 100% to go back to 5:33seeing everything at its true size 5:36that's it for this one but don't 5:37hesitate to watch it a few times then 5:41head to framer practice these techniques 5:42and shortcuts and start developing that 5:45muscle memory and you'll be zipping 5:46around your projects like a pro in no 5:49time I'll see you in the next one

TeachesFrames Keyboard Shortcuts

Also coversAbsolute Positioning

Watch on YouTube ↗

‹ Thinking in Frames (Fundamentals Lesson 4)

Form Input Variants and Validation in Framer ›