Vev Help Center
Similar to containers and divs in web design, frames are used to group, organize, and position elements
Frames are a great way to keep your elements organized within a section and can also be used to create a responsive component for your design.
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).
Note: Not sure what is a section vs. an element? Check out the lesson on Project Structure.
In this lesson:
  1. 1.
    Adding a Frame
  2. 2.
    Style a Frame
  3. 3.
    Customize a Frame per breakpoint

Adding a Frame to your Canvas

From the Add Menu (M), choose Element > Frame. Then click and drag on your canvas to add the frame at the desired size.
Hot tip: If you already have elements in a section, use the group hotkey Command (⌘) + G to create a frame and group your elements.

Styling a Frame

Choose from a variety of options to style and customize a frame, go further and use Shared Styles for one-click updates.
Design your frame with the available options:
  • 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.
  • 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
  • Shadow: Add and customize a frame's shadow. Adjust the opacity, angle, blur, size, and distance.
Note: Some options like border-radius can only be set at the element level and not the frame level. If you customize or style a frame and don't see your edits, try adding it to the element.

Customizing a Frame per breakpoint

Note: In order to have Elements resize inside the frame accordingly, you need to change the sizing of these Elements from pixel based-values to percentage-based values. Read more about how to Style your Elements​
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.
In order 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 the origin tool 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.
Hot Tip: Easily change between device types by using the hotkeys for Desktop (1), Tablet (2), and Mobile (3).
Last modified 1mo ago