Frames are a great way to keep your elements organized within a section. They are also a great way to implement responsive designs to your projects. While sections extend to the full width of the design, frames 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.
Adding a Frame to elements
Select your elements
Right-click on them and select Group or alternatively, you can use the shortcut Command + G
The elements are now wrapped in a frame.
Styling a frame
Choose from a variety of options to style and customize a frame. You'll find these options in the styles panel as listed below.
Size: Set your desired dimensions for your frame, make sure to also set the size of the elements that live within the frame
Background: Choose a fill color, gradient color, or background image
Padding: add padding to your frame evenly on all sides or mix them
Border: Set a border color, opacity, and line weight
Border Radius: Curve the radius of the border, make sure to also set the border radius of elements
Effects: Add different types of shadows or blur effects.
Note: You can go even further and use Shared Styles for one-click updates.
Using Frames for responsive design
In order to design your frame to be responsive per breakpoint and device type, you will need to adapt the design of the frame and elements to desktop, tablet, and mobile.
Believe it or not, it's easier to adapt the design of your frame per breakpoint before duplicating it since the frame will carry over the adaptive design.
To adapt your frame:
Design and reposition the elements within your frame and adjust them to the specific breakpoint or device type. For example, the desktop frame (shown above) is set at 330px width by 400px height. On a tablet, the frame is reduced to 280px by 350px
Use constraints to ensure the frames stay aligned within certain breakpoints
Pixels and percentages can be used effectively for frames and elements. For instance, the desktop frame (shown above) is set at 330px width by 400px height but the image and text element inside are set at 100% width and 50% height
Desktop
Tablet
Mobile
FAQs
How can I make the elements inside my frame responsive? In this case, we recommend making the elements % based. They will adapt much better to each layout.