Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Screens
  • Code Component
  • Design Component
  • Graphic
  • Custom SVG’s

Frame

A Frame is a layer that can contain other layers. Frames can have child layers and can optionally manage the position of those layers using a stack layout.

To create a Frame layer, click the Frame tool in the Toolbar or press F, then click and drag to draw the Frame.

You can also create a Frame around any selected layer(s) by right clicking and selecting Add Frame, or by pressing ⌘ + Enter for Mac or Ctrl + Enter for Windows..

Devices

When a Frame is directly on the canvas, you can assign the Frame a Device. A Frame's device will set the Frame's size and allow you to choose an orientation.

Select the Device on the Properties Panel.

To set or change a Frame's device, select the Device on the Properties Panel.

Stack Layout

You can automatically position a Frame's child layers by enabling its stack layout. In Framer, the capitalized word Stack refers to a Frame with its stack layout enabled.

To enable the stack layout for a selected Frame, click on the Stack heading in the Properties Panel. Click this heading again to disable the stack layout.

When you enable a Frame's stack layout, any existing child layers will be positioned automatically according to the Frame's Stack properties. When you disable a Frame's stack layout, all of the Frame's child layers will remain in their stacked positions.

Stack refers to a Frame with its stack layout enabled

To learn more about the stack layout, see our Stack article.

Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement