Marcos en Figma Design

Antes de empezar

Quién puede utilizar esta función

Toda persona en cualquier equipo o plan puede usar marcos.

Toda persona con acceso de puede editar en un archivo puede crear y editar marcos.

En Figma, puedes agregar capas directamente al lienzo. Si tu diseño es 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 has usado herramientas de diseño antes, 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 anidar marcos dentro de otros marcos. Esto permite crear diseños más complejos que funcionan en conjunto.

Los marcos también te brindan acceso a funciones adicionales, como cuadrículas de disposición, disposición automática, restricciones y prototipado.

Crear marcos

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

• Usa los atajos de teclado F o A.
• Selecciona la herramienta de marcos 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
• Usa el menú desplegable de la barra lateral derecha para seleccionar un ajuste preestablecido de marco.
  1. Elige ajustes preestablecidos para plantillas de dispositivos y activos populares:
     • Teléfono
     • Tableta
     • Escritorio
     • Presentación
     • Ver
     • Papel
     • Redes sociales
     • Comunidad de Figma
     • Archivo
  2. Haz clic en la flecha para expandir la sección y selecciona un ajuste preestablecido de la lista.

Identifica los marcos por el símbolo en el panel de capas.

Propiedades del marco

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

• Radio de esquina: 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 relleno uniforme, degradado, imágenes (PNG, JPEG, GIF, TIFF y WEBP) a un marco.
• Trazo: agrega trazos a un marco para crear un borde o un contorno.
• Efectos: agrega una sombra o desenfoques a un marco.

Funcionalidad extra

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

• Cuadrículas de disposición: aplica cuadrículas, columnas o filas transparentes a los marcos para proporcionar una estructura visual.
• Restricciones: define cómo responden los objetos hijos cuando se cambia el tamaño de un marco. Aplica restricciones a objetos dentro de un marco.
• Disposición automática: agrega disposición automática a los marcos para crear disposiciones automáticas que respondan a sus contenidos.
• Prototipado: crea prototipos interactivos que se muevan entre marcos en tu lienzo.

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

Obtén más información sobre las relaciones entre objetos padres/hijos en Figma →

Ajustar las propiedades del marco

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

• Selecciona un objeto hijo con el atajo de teclado: Enter o Return.
• Presiona la tecla Tab para seleccionar el siguiente objeto hermano.
• Presiona Shift + Tab para seleccionar el objeto hermano anterior.
• Toca Shift + Enter para seleccionar el objeto padre.

Anidar 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 en 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 colocar marcos dentro de marcos de nivel superior, o dentro de otros marcos anidados. Los marcos anidados son tanto un objeto padre como un objeto hijo.
• Objetos hijos: cualquier objeto que esté dentro de un marco.

Obtén más información sobre las relaciones entre objetos padres, hijos 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 cualquier marco 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 objetos padres como en hijos. Puedes colocar marcos dentro de lo siguiente:

• 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 disponemos de una tarjeta que incluye los detalles de nuestros Próximos tickets.

Con uno de nuestros ajustes preestablecidos de dispositivo, podemos crear un marco de nivel superior para nuestros elementos. Podemos agregar nuestros elementos al marco de nivel superior para construir 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 punto de 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 ajuste preestablecido del marco

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 marco.
3. Selecciona un ajuste preestablecido de la lista. 
4. Elige ajustes preestablecidos para plantillas de dispositivos y activos populares:
   • Teléfono
   • Tableta
   • Escritorio
   • Presentación
   • Ver
   • Papel
   • Redes sociales
   • Comunidad de Figma
   • Archivo
5. Figma actualizará las dimensiones de tu marco para que coincidan con el ajuste preestablecido.

Panel de propiedades

Actualiza el ancho y el alto del marco con la barra lateral derecha.

Ingresa un nuevo número en los campos W y H, o pasa el cursor sobre el ícono para ajustar el campo. Arrastra hacia la izquierda para disminuir el tamaño y hacia la derecha para aumentar el tamaño.

Activa el botón de enlace junto a W(ancho) y H(alto) para restringir el cambio de tamaño a las proporciones actuales.

Ajustar al tamaño

Puedes cambiar el tamaño de un marco para que se ajuste a sus objetos hijos. Esto volverá a dibujar el marco alrededor de los límites exteriores de los objetos dentro de él.

• Utilice los atajos de teclado:
  • Mac: ⌥ Option Shift ⌘ Command R
  • Windows: Alt Shift Control R
• Haz clic en la sección Disposición de la barra lateral derecha.

Desagrupar un marco

Para desagrupar un marco, selecciona el marco y presiona:

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