Marcos en Figma Design

Antes de empezar

Quién puede utilizar esta función

Cualquiera en cualquier equipo o plan puede usar marcos.

Cualquiera con acceso puede editar a un archivo puede crear y editar marcos.

En Figma, puedes añadir capas directamente al lienzo. Si estás diseñando para un dispositivo o tamaño de pantalla específico, es posible que desees crear un contenedor para tus diseños. Aquí es donde entran en juego los marcos.

Si ya has utilizado herramientas de diseño, estarás familiarizado con las mesas de trabajo. Al igual que las mesas de trabajo, los marcos te permiten elegir un área del lienzo para crear tus diseños.

A diferencia de las mesas de trabajo tradicionales, también puedes colocar marcos dentro de otros marcos. Esto permite crear diseños más complejos que funcionan en conjunto.

Los marcos también te ofrecen acceso a funciones adicionales, como cuadrículas de diseño, diseño automático, limitaciones y creación de prototipos.

Crear marcos

Crea marcos en el lienzo con la herramienta marco. Hay varias formas de seleccionar la herramienta marco:

• Utilizar los atajos de teclado F o A
• Seleccionar la herramienta marco en la barra de herramientas.

Luego puedes crear una variedad de tamaños de marcos en el lienzo:

• Haz clic en el lienzo para crear un marco predeterminado con dimensiones de 100 x 100
• Haz clic y arrastra en el lienzo para crear un marco con dimensiones personalizadas
• Utiliza el menú desplegable de la barra lateral derecha para seleccionar un ajuste preestablecido de marco.
  1. Elige ajustes preestablecidos para las plantillas de dispositivos y recursos más populares:
     • Teléfono
     • Tableta
     • Escritorio
     • Presentación
     • Ver
     • Papel
     • Redes sociales
     • Comunidad Figma
     • Archivar
  2. Haz clic en la flecha para expandir la sección y selecciona un ajuste preestablecido de la lista.

Identifica los marcos por el en el panel de capas.

Propiedades del marco

Hay algunas propiedades asociadas con los marcos. Los marcos admiten las siguientes propiedades.

• Radio de redondeo: redondea la esquina de un marco para crear bordes más suaves.
• Recortar contenido: oculta cualquier objeto dentro del marco que se extienda más allá de los límites del marco.
• Cuadrículas de disposición: crea pautas para ayudar con la estructura visual de tus diseños.
• Disposición automática: crea marcos dinámicos que respondan a su contenido
• Relleno: aplica un espaciado sólido, degradado, imágenes (PNG, JPEG, GIF, TIFF y WEBP) a un marco.
• Trazo: añade trazos a un marco para crear un borde o un contorno
• Efectos: añade sombras o desenfoques a un marco

Funcionalidad extra

Los marcos te permiten acceder a funcionalidades adicionales en Figma. Necesitarás usar marcos para utilizar las siguientes características o funciones:

• Cuadrículas de diseño: aplica cuadrículas, columnas y/o filas transparentes a los marcos para proporcionar una estructura visual
• Limitaciones : define cómo responden los objetos secundarios cuando se cambia el tamaño de un marco. Aplicar limitaciones a objetos dentro de un marco.
• Diseño automático: añade diseño automático a los marcos para crear diseños dinámicos que respondan a sus contenidos
• Creación de prototipos: crea prototipos interactivos que se mueven entre marcos en tu lienzo

Un marco es un objeto primario . Esto significa que puede controlar o influir en cualquier objeto secundario que coloques dentro de él.

Obtén más información sobre las relaciones entre elementos principales y secundarios en Figma →

Ajusta las propiedades del marco

En el pasado, era posible ajustar las propiedades de los objetos secundarios cuando se seleccionaba el marco. Ahora puedes ajustar las propiedades del marco en sí.

• Selecciona un objeto secundario mediante el atajo de teclado: Enter o Return.
• Pulsa la tecla Tab para seleccionar el siguiente elemento hermano.
• Pulsa Shift + Tab para seleccionar el elemento hermano anterior.
• Pulsa Shift + Enter para seleccionar el elemento primario

Anida marcos dentro de otros marcos

En Figma, puedes crear marcos dentro de otros marcos. A este proceso lo llamamos anidamiento. Esto te permite combinar marcos con diferentes propiedades para crear interfaces complejas.

Esto crea nuevas jerarquías o relaciones:

• Marcos de nivel superior: cualquier marco que esté directamente sobre el lienzo. Para que un marco sea un marco de nivel superior, no se puede anidar dentro de otro marco, grupo u objeto
• Marco anidado: cualquier marco que se coloca dentro de otro marco. Puedes situar marcos dentro de marcos de nivel superior o dentro de otros marcos anidados. Los marcos anidados son a la vez primario y secundario
• Secundario: cualquier objeto que esté dentro de un marco

Más información sobre las relaciones entre elementos principales, secundarios y hermanos →

Marcos de nivel superior

Figma pone en negrita los marcos de nivel superior en el panel de capas y muestra el nombre de los marcos de nivel superior en el lienzo.

Marcos anidados

Los marcos anidados son marcos que se colocan dentro de otro marco u objeto. Esto los convierte tanto en principales como secundarios. Puedes colocar marcos dentro de:

• Marcos de nivel superior
• Otros marcos anidados
• En grupos

En nuestro ejemplo a continuación, cada uno de nuestros elementos está en su propio marco. Tenemos una barra de estado en la parte superior y un menú de navegación en la parte inferior. También tenemos una tarjeta que incluye los detalles de nuestras próximas entradas.

Con uno de los ajustes preestablecidos de nuestro dispositivo, podemos crear un marco de nivel superior para nuestros elementos. Podemos añadir nuestros elementos al marco de nivel superior para crear una sola pantalla en nuestra aplicación móvil.

Cambiar el tamaño de los marcos

Puedes interactuar con los marcos como cualquier otro objeto en el lienzo, incluso cambiar el tamaño o la escala de los marcos. Hay algunas formas de cambiar el tamaño de un marco:

Arrastra el marco

Arrastra para cambiar el tamaño de un marco manualmente.

1. Selecciona el marco en el lienzo o en el panel de capas en la barra lateral izquierda.
2. Haz clic en el control de una de las esquinas y arrastra para cambiar el tamaño. O bien, haz clic en uno de los bordes y arrastra.

Cambiar el marco preestablecido

Selecciona otro ajuste preestablecido de marco para cambiar el tamaño del marco. 

1. Selecciona el marco.
2. En el panel de propiedades en la barra lateral derecha, selecciona el campo de marco.
3. Selecciona un ajuste preestablecido de la lista. 
4. Elige ajustes preestablecidos para las plantillas de dispositivos y recursos más populares:
   • Teléfono
   • Tableta
   • Escritorio
   • Presentación
   • Ver
   • Papel
   • Redes sociales
   • Comunidad Figma
   • Archivar
5. Figma actualizará las dimensiones de tu marco para que coincidan con el ajuste preestablecido.

Panel de propiedades

Actualiza la anchura y la altura del marco utilizando la barra lateral derecha.

Introduce un nuevo número en los campos W y H, o pasa el ratón sobre el icono para limpiar el campo. Arrastra hacia la izquierda para disminuir y hacia la derecha para aumentar.

Activa el botón de enlace situado junto a la Anchura y la Altura para limitar el cambio de tamaño a las proporciones actuales.

Cambiar el tamaño para que se ajuste

Puedes redimensionar un marco para que se ajuste a sus objetos secundarios. Esto volverá a dibujar el marco alrededor de los límites exteriores de los objetos que contiene.

• Utilizar el atajo de teclado:
  • Mac: ⌥ Option Shift ⌘ Command R
  • Windows: Alt Shift Control R
• Haz clic en la sección Diseño de la barra lateral derecha

Desagrupar un marco

Para desagrupar un marco, selecciona el marco y pulsa:

• Mac: ⌘ CommandShiftG o ⌘ CommandDelete
• Windows: ControlShiftG or ControlBackspace