# Diseñar pantallas con marcos

> Un marco (frame) representa los límites de una pantalla. Su contenido forma una interfaz, como una página de aplicación o sitio web. El diseño se realiza en el mismo tablero que la investigación y el…

Source: https://docs.vectorboard.app/es/diseno-de-interfaces/disenar-pantallas-con-marcos/ · DISEÑO DE INTERFACES

Un marco (frame) representa los límites de una pantalla. Su contenido forma una interfaz, como una página de aplicación o sitio web. El diseño se realiza en el mismo tablero que la investigación y el plan, sin cambiar a otro modo de documento.

1. Abre **Insertar** y elige un marco de diseño de interfaz. Selecciona un tamaño de iPhone, Android, iPad, escritorio, web o personalizado.

![Tamaños de marco predefinidos](https://assets.vectorboard.app/docs/fig/fig-915.webp)
*Diseñar para distintos tamaños de pantalla*

2. Añade rectángulos, texto, imágenes, iconos y líneas. Nombra el marco según la función de la pantalla.
3. Utiliza distribución automática (auto layout) para organizar contenido en filas o con ajuste. Elige si un elemento se adapta a su contenido o ocupa el espacio disponible.

![Marcos de diseño de interfaces](https://assets.vectorboard.app/docs/fig/fig-916.webp)
*Diseñar una pantalla*

4. Mantén las anotaciones vinculadas al marco: notas, trazos, flechas y comentarios lo acompañan al moverlo.
5. Utiliza versiones de pantalla para comparar alternativas o contraer las que no estás utilizando.

![Versiones de pantalla](https://assets.vectorboard.app/docs/fig/fig-917.webp)
*Comparar alternativas*

> **Resultado esperado:** La pantalla es editable y conserva su distribución y sus anotaciones.

> **Importante:** Un rectángulo con forma de pantalla no es necesariamente un marco de diseño. Utiliza el elemento Marco para tamaños de dispositivo, organización de pantallas y prototipos.