Frames help keep your design organized and responsive. Unlike sections that stretch full-width, and are pre-defined to work within the safe zone of the canvas (set at 1024 px width).
Tip: Not sure what is a section vs. an element? Check out the lesson on the Anatomy of a project.
How to Add a Frame
Select your elements.
Right-click and choose “Group” or use the shortcut Command + G.
Your elements are now inside a frame!
Styling a Frame
In the Styles Panel, you can customize your frame:
Size – Set the width and height
Background – Add a color, gradient, or image
Padding – Space inside the frame
Border – Adjust color, thickness, and opacity
Border Radius – Round the corners
Effects – Add shadows or blur
You can use Shared Styles to apply the same look to multiple frames easily.
Making Frames Responsive
Frames can adjust based on screen size (desktop, tablet, mobile):
Design each frame for a specific screen size
Resize and reposition elements as needed
Use constraints to keep things aligned
Use pixels, percentages, or viewport sizing (like setting an image to 100% width) for flexible layouts
You can also take a look at the best practices articles that help you understand how the editor works and reacts.