Interacting with Layers in Framer (Fundamentals Lesson 3)

Main ideas / lessons conveyed

• Selecting layers in Framer is more direct than in Figma/Sketch:
  • In Framer, clicking selects the layer directly (no modifier keys required), even if it’s deeply nested.
  • Escape moves selection back up to the parent frame (reliable because each layer has exactly one parent).
• Selection behavior can be customized if the default direct selection feels unfamiliar.
• Working with many layers:
  • Use the Layers panel to select items directly.
  • Frames show nested-state cues (blue icon + disclosure triangle) for child layers.
  • There are shortcuts to expand/collapse nested hierarchies.
• Moving and nudging layers (with absolute positioning):
  • With Absolute positioning, layers can be drag-moved freely.
  • Use modifier shortcuts to move without losing selection / avoid accidental selections.
  • Arrow keys nudge position:
    • 1 pixel per key press normally
    • Shift increases to 10 pixels
    • Nudge amount is configurable in zoom/nudge settings.
• Frame nesting behavior:
  • When you drag a layer inside another frame’s bounds, it automatically nests.
  • Drawing frames inside frames follows the same nesting logic.
  • To prevent auto-nesting while still placing/overlapping, use Spacebar while dropping.
• Navigating (panning/zooming) is essential:
  • Scroll or use Spacebar to pan (toggle pan tool by holding Space).
  • Zoom tools and shortcuts help move between overview and detail:
    • Zoom tool activation via zoom controls
    • Zoom in/out and zoom-to-fit/selection behaviors

---

Detailed methodology / instruction-style points (step-by-step)

A) Selecting layers on the canvas

• Click a layer once to select it directly (even if nested).
• Press Escape to select the direct parent frame of the currently selected layer.
• If you accidentally use habits from other tools:
  • Stop using Command/Control while clicking (in Framer this specifically selects the direct parent, and it can be a habit mismatch).

B) Adjust selection behavior (if you want Figma-like behavior)

• Go to Preferences.
• Turn off “use direct selection” to switch to a more Figma-like selection style.
• To select multiple layers:
  • Hold Shift while clicking each layer, or
  • Click-and-drag a selection box around layers:
    • Any layer touched by the box becomes selected
    • Hold Alt/Option while dragging to select only layers fully contained within the box

C) Using the Layers panel for selection

• When the canvas becomes complex/crowded:
  • Select items directly from the Layers panel.

D) Expanding/collapsing nested frames in the Layers view

• If a frame contains child layers:
  • Its icon is blue (instead of gray) and has a disclosure triangle
• Click the disclosure triangle to expand/collapse.
• Hold Alt/Option while clicking to expand/collapse all the way down the hierarchy.

E) Moving layers (Absolute positioning workflow)

• Ensure a layer’s position type is Absolute.
• Click and drag to move it freely within the canvas.
• If you want to move without losing selection / accidentally selecting other items:
  • Hold Option + Command (Mac) or Alt + Control (PC)
  • Click and drag on the canvas to move the selection.

F) Nudging layers with keyboard precision

• Use arrow keys to nudge position 1 pixel at a time.
• Hold Shift while nudging to move 10 pixels at a time.
• Customize nudge amounts:
  • Click the Zoom level control near the bottom of the canvas
  • Choose the nudge amount setting.

G) Frame-based nesting during layout

• When dragging a layer:
  • If the layer is dragged completely within another frame’s bounds, it automatically nests inside that frame.
• When using the Frame tool:
  • Drawing a new frame inside an existing one nests it automatically.
• To overlap items without triggering automatic nesting:
  • Hold Spacebar while dropping the layer in the target area.

H) Navigating the canvas (pan and zoom)

• Pan around:
  • Use scrolling (mouse/trackpad-dependent), or
  • Hold Spacebar to switch to the pan tool, then click-and-drag to move the view.
• Zoom:
  • Click the Zoom level near the bottom to access the zoom tool.
  • Use zoom interactions:
    • Click to zoom in
    • Alt/Option + click to zoom out
    • Click and drag to zoom into an area
• Common zoom targets mentioned:
  • Zoom to Fit (overview)
  • Zoom to Selection (selected layer(s))
  • Zoom to 100% (true size)

I) Practice recommendation

• Rewatch the lesson if needed.
• Practice in Framer Practice to build muscle memory.
• Continue to apply shortcuts for faster workflow.

---

Sources / speakers featured

• Speaker (narrator/instructor): Not explicitly named in the subtitles (referred to with “let’s start,” “my favorite little tricks,” “you’ll often catch me…”).
• Other sources: None explicitly identified beyond music used in the background (“[Music]” tag).