Lección 2 de 12 · Lectura y práctica
Crear frame en Figma: frames, formas y capas
Crear frame en Figma: frames, formas y capas Los frames son la base de todo diseño en Figma. A diferencia de los artboards de otras herramientas, los frames en Figma pueden anidarse, tienen propiedades de layout y se comportan.
Del concepto a la práctica
Taller de esta lección
Un frame no es solo el borde de una pantalla: define qué elementos pertenecen a un contenedor y permite cambiar su tamaño sin perder la relación entre contenido y fondo. Para una pantalla de disponibilidad, separar frame, tarjeta y controles evita que una modificación del encabezado mueva accidentalmente la lista.
Ejemplo resuelto
Construye “Mobile / Horarios”. Dentro coloca “Header”, “FilterBar”, “ScheduleList” y “BottomNav”. En “ScheduleList” crea dos tarjetas con rectángulos, textos y una línea divisoria. La capa de fondo debe estar dentro del frame y detrás del contenido; no la dejes como objeto suelto en el lienzo.
Pruébalo
Crea un frame móvil de 390 por 844.
Añade un rectángulo de fondo y renómbralo “Surface”.
Crea dos tarjetas con hora, profesional y botón.
Duplica el frame y cambia la lista a un estado vacío.
Error frecuente: agrupar una pantalla completa en lugar de anidar contenedores. Corrígelo usando frames para pantalla, lista y tarjeta; reserva los grupos para elementos que no necesitan reglas de layout.
Diseña el estado sin disponibilidad. Resultado esperado: el segundo frame conserva el encabezado y navegación, pero muestra un mensaje centrado, una acción alternativa y ninguna tarjeta residual.
Comprueba tu resultado
Oculta “ScheduleList” y confirma que el mensaje vacío aparece sin mover el resto de la pantalla.
Mapa de prácticaEl frame delimita un área de diseño; un grupo organiza objetos para moverlos juntos. El orden de capas decide qué objeto queda delante cuando se superponen. Las medidas son ejemplos del dibujo.
Ver la infografía en tamaño completo ↗Crear frame en Figma: frames, formas y capas
Los frames son la base de todo diseño en Figma. A diferencia de los artboards de otras herramientas, los frames en Figma pueden anidarse, tienen propiedades de layout y se comportan como contenedores inteligentes.
Trabajando con Frames
- Presioná F y arrastra para crear un frame personalizado, o elige un preset (iPhone 15, Desktop 1440px, etc.)
- Los frames pueden contener otros frames — esto es clave para estructurar tu diseño por secciones
- Un frame puede recortar (clip) su contenido: activa 'Clip content' en el panel derecho
- Renombra tus frames siempre: 'Frame 47' no le dice nada a nadie — usa nombres como 'Hero / Desktop' o 'Card / Producto'
- Los frames son la base para componentes, auto layout y prototipos
Formas básicas y edición
- Rectángulo (R): la forma más usada — ajustá el border radius para redondear esquinas
- Elipse (O): para círculos, avatares e iconos — mantené Shift mientras arrastras para un círculo perfecto
- Línea (L): para separadores y decoraciones — ajustá el grosor en el panel derecho
- Polígono y estrella: desde el menú de formas — ajustá los lados y el radio interior
- Operaciones booleanas: une, resta, intersecta o excluye formas para crear figuras complejas
Frame, forma y capa: diferencias rápidas
Cuando empezás en Figma, es normal mezclar frame, forma, capa y grupo. Esta tabla te ayuda a decidir qué usar.
| Elemento | Qué es | Cuándo usarlo |
|---|---|---|
| Frame | Contenedor con tamaño propio. | Para pantallas, secciones, cards, componentes, prototipos y Auto Layout. |
| Forma | Rectángulo, elipse, línea, polígono o estrella. | Para fondos, botones, avatares, separadores, iconos simples y estructura visual. |
| Capa | Cualquier objeto visible en el panel izquierdo. | Para ordenar, renombrar, bloquear, ocultar o agrupar partes del diseño. |
| Grupo | Conjunto simple de capas. | Para mover elementos juntos cuando no necesitás layout responsive. |
Gestión de capas
- Las capas se apilan de abajo hacia arriba — la capa superior tapa a la inferior
- Arrastra capas en el panel izquierdo para reordenarlas o moverlas dentro de frames
- Ctrl/Cmd + ] sube una capa / Ctrl/Cmd + [ baja una capa
- Bloquea capas que no querés mover accidentalmente (clic derecho → Lock)
- Oculta capas temporalmente con el ícono del ojo — útil para trabajar en elementos solapados
Consejo: Siempre diseña dentro de frames, nunca directamente en el canvas. Esto te preparará para usar Auto Layout y crear componentes reutilizables.
Práctica guiada: crear una pantalla con frames
Hacé esta práctica corta para transformar la teoría en una primera pantalla visible.
- Presioná F y creá un frame Desktop 1440.
- Renombralo como Home / Desktop, no lo dejes como Frame 1.
- Usá R para crear un rectángulo de fondo en la sección hero.
- Agregá un texto principal, un texto secundario y un botón simple.
- Usá O para crear un avatar o imagen circular de referencia.
- Ordená las capas en el panel izquierdo: fondo, contenido, botón, imagen.
- Duplicá el frame y adaptalo a mobile para practicar responsive básico.
Atajos básicos: F crea frames, R crea rectángulos, O crea elipses, L crea líneas y Cmd/Ctrl + G agrupa capas. Si el contenido tiene que adaptarse, preferí frame con Auto Layout antes que grupo.
Fuente oficial: Frames in Figma Design.
Sigue con Figma desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.