Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

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

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.

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

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

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • 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
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement