Cómo crear un marco en Figma

Aprende a crear un marco en Figma para organizar tus diseños de interfaz y maquetaciones. Una guía para principiantes sobre cómo usar la herramienta de marcos para lograr una mejor estructura y adaptabilidad.

Vídeos y documentación de producto con IA al instante a partir de grabaciones de pantalla en bruto

Empieza gratis

Pasos detallados:

1. Selecciona la herramienta Marco: Haz clic en el icono de la herramienta Marco en la barra de herramientas o pulsa la tecla "F".
2. Elige un método de creación: Haz clic y arrastra: Haz clic y arrastra sobre el lienzo para crear un marco con dimensiones personalizadas.
Tamaño de dispositivo preestablecido: Selecciona un tamaño de marco preestablecido en el panel de propiedades de la derecha.
Selección de marco: Selecciona elementos existentes y conviértelos en un marco.
3. Crea un marco alrededor de elementos existentes (Selección de marco): Selecciona los elementos deseados y luego pulsa Ctrl + Alt + G (Win) o ⌘ + Opt + G (Mac) para crear un marco que contenga esos elementos.
4. Ajusta las propiedades del marco: Una vez creado, puedes modificar las propiedades del marco (tamaño, color, etc.) en el panel de la derecha.

Guía paso a paso: Cómo crear un marco en Figma

Paso 1

Haz clic en la opción "Marcos" para iniciar el proceso de creación del marco.

Click on the "Frames" option to initiate the frame creation process.

Paso 2

Después de seleccionar la opción "Marcos", toca en cualquier lugar de la plantilla de Figma donde quieras colocar tu nuevo marco.

After selecting the "Frames" option, tap anywhere on the Figma template where you want to place your new frame.

Paso 3

Una vez que hayas hecho clic, el marco aparecerá en la plantilla. Luego puedes ajustar el tamaño y las dimensiones del marco según tus requisitos específicos.

Once you've clicked, the frame will appear on the template. You can then adjust the size and dimensions of the frame according to your specific requirements.

Consejos profesionales para crear marcos en Figma

Usa el atajo de la herramienta Marco
Pulsa F en tu teclado para activar la herramienta Marco. Luego haz clic y arrastra en el lienzo para dibujar un marco. Este es el método más rápido y el más utilizado para crear marcos.
Crea un marco desde la barra de herramientas
Haz clic en el icono de la herramienta Marco en la esquina superior izquierda de la barra de herramientas (parece una almohadilla o un rectángulo). Luego selecciona un tamaño de marco predefinido (como iPhone, Desktop o Tablet) desde el panel derecho o dibuja uno manualmente en el lienzo.
Convierte elementos existentes en un marco
Selecciona los elementos que quieres agrupar, luego haz clic derecho y elige “Crear marco a partir de la selección” en el menú contextual. Esto envuelve los elementos seleccionados en un nuevo marco, útil para organizar tu diseño.
Usa Auto Layout en los marcos
Después de crear un marco, activa Auto Layout para hacerlo responsivo. Esto ayuda al diseñar botones, tarjetas o secciones que necesitan un espaciado y una alineación coherentes.
Anida marcos para una mejor estructura
Puedes colocar un marco dentro de otro. Los marcos anidados son ideales para organizar diseños complejos de UI y componentes como modales, tarjetas y barras de navegación.

Errores comunes y cómo evitarlos

Confundir marcos con grupos
Los grupos solo agrupan elementos, pero los marcos pueden contener reglas de diseño y restricciones. Usa marcos cuando necesites estructura, alineación o adaptabilidad.
No establecer restricciones
Al diseñar componentes responsivos, olvidar establecer restricciones dentro de un marco puede hacer que los elementos se comporten de forma inesperada al cambiar el tamaño. Comprueba siempre las restricciones en el panel derecho.
Abusar de los marcos
Usar demasiados marcos innecesarios puede recargar el panel de capas y dificultar la edición. Usa los marcos de forma estratégica, solo cuando se necesite control del diseño.
Anidado incorrecto
Evita colocar accidentalmente marcos dentro de los marcos principales equivocados. Puede romper la jerarquía de tu diseño. Usa el panel de capas para mantener el control de la estructura.
Omitir los nombres
No poner nombre a tus marcos hace que la colaboración sea confusa. Nombra siempre tus marcos con claridad (como “Navbar”, “Footer” o “Pantalla de iPhone 14”) para mantener todo organizado.

Preguntas frecuentes comunes sobre la creación de marcos en Figma

¿Cuál es la diferencia entre un marco y un tablero de dibujo?
En Figma, un marco funciona como un tablero de dibujo en otras herramientas, pero con más funciones de diseño y capacidad de respuesta. Los marcos pueden actuar como contenedores con restricciones y Auto Layout.
¿Puedo cambiar el tamaño de un marco después de crearlo?
Sí. Selecciona el marco y arrastra sus bordes o introduce dimensiones exactas en el panel de propiedades de la derecha.
¿Se pueden exportar los marcos?
Sí. Los marcos se pueden exportar como PNG, JPG, SVG o PDF. Selecciona el marco y usa la sección de exportación en el panel de propiedades.
¿Hay tamaños de marco predefinidos en Figma?
Sí. Cuando actives la herramienta Marco, verás una lista de ajustes preestablecidos a la derecha, como pantallas de móvil, tamaños de escritorio, tabletas y dimensiones para redes sociales.
¿Puedo crear marcos dentro de componentes?
Absolutamente. Los marcos pueden formar parte de componentes o instancias, lo que te permite estructurar y reutilizar elementos de diseño de manera eficiente.
¿Cómo grabar la pantalla en Mac?
Para grabar la pantalla en un Mac, puedes usar Trupeer AI. Te permite capturar toda la pantalla y ofrece capacidades de IA como añadir avatares de IA, añadir narración de voz, hacer zoom in y zoom out en el video. Con la función de traducción de video con IA de Trupeer, puedes traducir el video a más de 30 idiomas.
¿Cómo añadir un avatar de IA a una grabación de pantalla?
Para añadir un avatar de IA a una grabación de pantalla, necesitarás usar una herramienta de grabación de pantalla con IA. Trupeer AI es una herramienta de grabación de pantalla con IA, que te ayuda a crear videos con múltiples avatares y también te ayuda a crear tu propio avatar para el video.
¿Cómo grabar la pantalla en Windows?
Para grabar la pantalla en Windows, puedes usar la Barra de juegos integrada (Windows + G) o una herramienta avanzada de IA como Trupeer AI para funciones más avanzadas como avatares de IA, narración de voz, traducción, etc.
¿Cómo añadir narración de voz a un video?
Para añadir narración de voz a los videos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu video con voz, elige la narración de voz deseada de Trupeer y exporta tu video editado.
¿Cómo hago zoom in en una grabación de pantalla?
Para hacer zoom in durante una grabación de pantalla, usa los efectos de zoom en Trupeer AI, que te permiten acercar y alejar en momentos específicos, mejorando el impacto visual de tu contenido de video.