Interacting with Layers in Framer (Fundamentals Lesson 3)

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

[Music] tremendously let's start with the basic mechanics of selecting layers on the canvas if you're a figma or sketch user you're probably used to clicking once to

select something that's at the top of the layer hierarchy then double clicking again and again to drill down or holding command land on a Mac control on a PC to

directly select layers regardless of how deeply they're nested in framer you can think of this as being sort of reversed in that you can directly select any

layer by simply clicking on it without having to hold any modifier key might take a little getting used to but once you adjust it's actually really nice that the layer hierarchy doesn't get in

the way and you can work your way back up by pressing the Escape key if you think about it each layer only has one parent but can have many children so drilling up with the Escape key is much

more predictable than drilling down by double clicking or pressing return and when you have a layer selected you'll see a dashed box around the direct parent frame which is exactly what will

become selected if you press the Escape key it can take some time to develop the new muscle memory but if you find yourself holding command on a Mac control on a PC out of habit when

clicking you'll find in framer this is our shortcut to select the direct parent of the layer you're clicking on which may come in handy if you just can't seem to get used to all this you can always

switch this to a more figma likee selection Behavior by navigating to the preferences and turning off used direct selection to select multiple layers you

can hold shift when clicking on each layer or you can click and drag a box around the layers you'd like to select normally any layer even touched by the Box you're dragging will become selected

but you can also hold the alt or option key to limit the selection to only layers that are entirely contained within the selection box very useful when things are getting crowded when

things start getting a bit more complex on the design canvas you can always head to the layers panel and select things directly from there when a frame has any child layers nested inside the icon will

be blue instead of gray and have a disclosure triangle you can click to expand or collapse its contents holding the alt or option key when clicking will expand or collapse all the way down the

hierarchy to which is super handy if you're juggling a lot of deeply nested layers now on to moving layers around in several of the coming lessons we're going to dive much more deeply into

layout and the different types of positioning but for now let's keep things free form and ignore everything but absolute positioning which will feel a lot like positioning regular layers in

figma or sketch when a layer's position type is absolute you can can click and drag to move it around freely and one of my favorite little tricks if you hold the option and command key on a Mac or

alt and control on a PC you can click and drag anywhere on the canvas to move your selection without losing it or accidentally selecting something else and as you might expect you can also use

the arrow keys to nudge the position of a layer one pixel at a time or hold shift to nudge 10 pixels at a time both nudge amounts are actually customizable too just click the zoom Lev near the

bottom of the canvas and choose nudge amount when you have multiple layers selected you'll also find familiar align and distribute buttons at the top of the properties

panel in the previous lesson I stressed the importance and flexibility of frames need a rectangle use a frame need to group up a set of elements use a frame

so inevitably Your Design canvas is going to be full of frames and Frames within frames so when you're dragging to move layers around you'll find that when you drag a layer completely within the

bounds of another frame it'll automatically become nested within that frame the same goes for using the frame tool to draw a new frame within an existing frame a little trick if you

want things to overlap but prevent the automatic nesting behavior is to hold the space bar while dropping the layer where you want it this can be super handy later when you're animating things

and want to move a layer outside the bounds of its parent without having it pop out navigating the canvas is just as important as selecting and moving layers around depending on the mouse or

trackpad you're using you can scroll to pan around the canvas or you can hold the space bar to switch to the pan tool and click and drag to pan around you'll probably do a

lot of your work at a zoom level of 100% but naturally you'll want to zoom in to work on details and zoom out to navigate large projects there are quite a few tricks for zooming around and you'll

find the most important command and their shortcuts by clicking on the zoom level near the bottom of the canvas here you can see that Z will activate the zoom tool which lets you click to zoom

in option or alt click to zoom out or click and drag around the area you'd like to zoom into you'll often catch me using these shortcuts for zoom in andout as well as

Zoom to fit so I can see everything that's on my canvas and zoom to selection to zoom and pan to whichever layer or layers I have selected and then

of course Zoom to 100% to go back to seeing everything at its true size that's it for this one but don't hesitate to watch it a few times then head to framer practice these techniques

and shortcuts and start developing that muscle memory and you'll be zipping around your projects like a pro in no time I'll see you in the next one