# Design screens with frames

> A frame represents the boundaries of a screen. Its content forms an interface, such as an app page or a website page. You design on the same board as the research and the plan, without switching to…

Source: https://docs.vectorboard.app/en/interface-design/design-screens-with-frames/ · INTERFACE DESIGN

A frame represents the boundaries of a screen. Its content forms an interface, such as an app page or a website page. You design on the same board as the research and the plan, without switching to another document mode.

1. Open **Insert** and choose an interface design frame. Select an iPhone, Android, iPad, desktop, web or custom size.

![Preset frame sizes](https://assets.vectorboard.app/docs/fig/fig-915.webp)
*Design for different screen sizes*

2. Add rectangles, text, images, icons and lines. Name the frame after the function of the screen.
3. Use auto layout to organize content in rows or with wrapping. Choose whether an element fits its content or fills the available space.

![Interface design frames](https://assets.vectorboard.app/docs/fig/fig-916.webp)
*Design a screen*

4. Keep annotations linked to the frame: notes, strokes, arrows and comments go with it when you move it.
5. Use screen versions to compare alternatives or to collapse the ones you are not using.

![Screen versions](https://assets.vectorboard.app/docs/fig/fig-917.webp)
*Compare alternatives*

> **Expected result:** The screen is editable and keeps its layout and its annotations.

> **Important:** A screen-shaped rectangle is not necessarily a design frame. Use the Frame element for device sizes, screen organization and prototypes.