Domina Figma: La Herramienta Estandar de la Industria
Figma se ha convertido en la herramienta de diseno de interfaces mas utilizada en el mundo, y en LATAM su adopcion es practicamente universal. El 95% de las ofertas laborales de UX/UI en la region mencionan Figma como requisito.
Setup y Conceptos Basicos
- Organizacion: Team, Project, File, Page, Frame. Cada archivo puede tener multiples paginas.
- Frames: Contenedores principales. Un frame puede ser una pantalla mobile (390x844 para iPhone 14).
- Layers: Todo en Figma es una capa. Nombra tus capas de forma descriptiva.
- Auto Layout: La funcionalidad mas poderosa de Figma. Permite que los elementos se reorganicen automaticamente.
Auto Layout: Tu Superpoder en Figma
Auto Layout transforma elementos estaticos en componentes responsivos. Conceptos clave:
- Direction: Horizontal o Vertical
- Spacing: Distancia entre elementos hijos (equivale a gap en CSS)
- Padding: Espacio interno entre el borde del contenedor y sus hijos
- Alignment: Como se alinean los hijos (start, center, end, space-between)
- Fill / Hug / Fixed: Como se comporta el contenedor
Dato Importante
El 80% del tiempo de un disenador profesional en Figma involucra Auto Layout y Componentes. Si dominas estas dos funcionalidades, puedes disenar cualquier interfaz. Las empresas de LATAM frecuentemente piden una prueba tecnica en Figma y lo primero que evaluan es si usas Auto Layout correctamente.
Componentes y Variantes
| Concepto | Que Es | Ejemplo |
|---|---|---|
| Main Component | La fuente de verdad del componente | El boton original que disenas |
| Instance | Copia vinculada al main | Cada uso del boton en tus pantallas |
| Variants | Diferentes estados del componente | Boton primary, secondary, disabled |
Prototipado en Figma
- Connections: Conecta frames entre si para simular navegacion.
- Animations: Dissolve, slide in, smart animate. Smart Animate es especialmente poderoso.
- Scrolling: Configura frames con scroll vertical u horizontal.
- Overlays: Para modals, bottom sheets, menus dropdown.
Tips de Productividad
- Shift + A: Agregar Auto Layout
- Ctrl/Cmd + D: Duplicar elemento
- Ctrl/Cmd + Alt + K: Crear componente
- Alt + drag: Duplicar mientras arrastras
- I: Activar eyedropper para copiar color
