Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Support
  • Using Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
  • Support
  • Using Framer

Related Articles

  • Screens
  • Code Components
  • Components
  • 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.

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

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

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement