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 marco para lograr una mejor estructura y adaptabilidad.

Crea vídeos y documentación de producto impactantes con IA

Este tutorial se creó con Trupeer en menos de 5 minutos

Crea gratis

Pasos detallados:

1. Selecciona la herramienta Marco: haz clic en el icono de la herramienta Marco en la barra de herramientas o presiona la tecla 'F'.
2. Elige un método de creación: Clic y arrastrar: haz clic y arrastra en el lienzo para crear un marco con dimensiones personalizadas.
Tamaño preestablecido del dispositivo: selecciona un tamaño de marco preestablecido desde 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 presiona 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 "Frames" 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 "Frames", toca cualquier parte 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 hagas clic, el marco aparecerá en la plantilla. Luego podrás 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
Presiona F en tu teclado para activar la herramienta Marco. Luego haz clic y arrastra sobre el lienzo para dibujar un marco. Este es el método más rápido y 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 un símbolo de almohadilla o un rectángulo). Luego selecciona un tamaño de marco predefinido (como iPhone, Escritorio o Tableta) 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 con el botón derecho y elige “Seleccionar marco” en el menú contextual. Esto encapsula 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 que sea adaptable. 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 interfaz de usuario y componentes como ventanas 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 capacidad de respuesta.
No establecer restricciones
Al diseñar componentes responsivos, olvidar definir restricciones dentro de un marco puede hacer que los elementos se comporten de forma inesperada al cambiar de tamaño. Revisa siempre las restricciones en el panel derecho.
Abusar de los marcos
Usar demasiados marcos innecesarios puede desordenar tu panel de capas y dificultar la edición. Usa los marcos de forma estratégica, solo cuando se necesite control del diseño.
Anidación incorrecta
Evita colocar accidentalmente marcos dentro de los marcos padres equivocados. Puede romper la jerarquía de tu diseño. Usa el panel de capas para seguir 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 sobre la creación de marcos en Figma

¿Cuál es la diferencia entre un marco y una mesa de trabajo?
En Figma, un marco funciona como una mesa de trabajo en otras herramientas, pero con más funciones de diseño adaptable y de disposición. 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 activas la herramienta Marco, verás una lista de ajustes preestablecidos a la derecha, como pantallas de teléfono, tamaños de escritorio, tabletas y dimensiones para redes sociales.
¿Puedo crear marcos dentro de componentes?
Por supuesto. Los marcos pueden formar parte de componentes o instancias, lo que te permite estructurar y reutilizar elementos de diseño de forma 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 funciones de IA como añadir avatares de IA, añadir narración y hacer zoom de entrada y salida en el vídeo. Con la función de traducción de vídeo con IA de Trupeer, puedes traducir el vídeo 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 vídeos con varios avatares; además, te ayuda a crear tu propio avatar para el vídeo.
¿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, traducción, etc.
¿Cómo añadir narración a un vídeo?
Para añadir narración a los vídeos, descarga la extensión de Chrome de Trupeer AI. Una vez registrado, sube tu vídeo con voz, elige la narración deseada de Trupeer y exporta tu vídeo editado.
¿Cómo hago zoom en una grabación de pantalla?
Para hacer zoom en una grabación de pantalla, usa los efectos de zoom de Trupeer AI, que te permiten acercar y alejar la imagen en momentos específicos, mejorando el impacto visual del contenido de tu vídeo.