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.
Práctica de portfolio
Convertí esta lección en evidencia real: armá una entrega pequeña que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabajá con un caso propio o con una empresa ficticia, pero deja claro el problema, la decisión y el resultado.
- Entregable: una captura, documento, repositorio o tablero con el resultado final.
- Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.
- Mini-rubrica: si otra persona lo revisa, debe entender qué hiciste, por qué y cómo repetirlo.
De frames en Figma a portfolio UX/UI
Una persona junior no necesita mostrar un proyecto enorme para demostrar criterio. Con una pantalla simple bien ordenada ya podés probar fundamentos de UI.
- Entregable: una pantalla desktop y una mobile creadas con frames, formas y capas nombradas.
- Checklist: frame con nombre claro, capas ordenadas, formas alineadas, textos legibles y botón visible.
- Explicación: contá por qué usaste un frame como contenedor, qué formas construyen la estructura y cómo ordenaste capas.
- Mejora siguiente: aplicar color, tipografía, estilos y Auto Layout para convertir la pantalla en componente reutilizable.
Conectá esta práctica con la carrera de UI Designer, oportunidades en empleos y servicios iniciales en marketplace.
