Lección 1 de 12 · Lectura y práctica
La Interfaz de Figma
Conociendo Figma por Primera Vez Figma es una herramienta de diseño basada en el navegador que ha revolucionado la industria. A diferencia de Photoshop o Sketch, Figma funciona completamente en la nube, lo que permite.
Del concepto a la práctica
Taller de esta lección
En una aplicación de turnos, la interfaz de Figma se entiende mejor si cada zona responde a una tarea: las páginas separan exploración y entrega, el panel de capas revela la estructura y el lienzo permite comparar estados. No conviene dejar todo en una sola página, porque una revisión rápida se vuelve lenta.
Ejemplo resuelto
Crea las páginas “00 Referencias”, “01 Wireframes” y “02 Componentes”. En “01 Wireframes”, nombra el frame “Mobile / Buscar especialidad” y sus capas “Header”, “SearchField”, “SpecialtyList” y “BottomNav”. Así, otra persona puede localizar el campo sin inspeccionar cada rectángulo.
Pruébalo
Duplica el archivo de práctica.
Crea las tres páginas con ese orden.
Selecciona el frame móvil y renombra cuatro capas principales.
Usa el zoom para comprobar la pantalla completa y después el detalle del campo.
Error frecuente: trabajar con capas llamadas “Rectangle 23” y “Group 8”. Corrígelo asignando nombres por función y no por apariencia.
Crea una pantalla de “Mis turnos” con seis capas principales. Resultado esperado: el panel muestra nombres funcionales, el frame está dentro de “01 Wireframes” y la navegación entre páginas permite encontrarlo en menos de un minuto.
Comprueba tu resultado
Verifica que ninguna capa principal conserve un nombre automático y registra qué zona de la interfaz usaste para corregir cada nombre.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗Conociendo Figma por Primera Vez
Figma es una herramienta de diseño basada en el navegador que ha revolucionado la industria. A diferencia de Photoshop o Sketch, Figma funciona completamente en la nube, lo que permite colaboración en tiempo real con tu equipo. Es gratuito para uso individual.
Áreas principales de la interfaz
- Barra de herramientas (arriba): acceso rápido a formas, texto, comentarios, frames y plugins
- Panel de capas (izquierda): estructura jerárquica de todos los elementos de tu diseño
- Canvas (centro): el lienzo infinito donde diseñas — usa scroll para moverte y Ctrl/Cmd + scroll para zoom
- Panel de propiedades (derecha): controles de posición, tamaño, color, tipografía y efectos del elemento seleccionado
- Barra inferior: zoom actual, vista de cuadrícula y opciones de presentación
Atajos esenciales que debes memorizar
- V: herramienta de selección (la que más usarás)
- F: crear un Frame (el contenedor fundamental en Figma)
- R: rectángulo / O: elipse / L: línea
- T: herramienta de texto
- Ctrl/Cmd + D: duplicar elemento seleccionado
- Ctrl/Cmd + G: agrupar elementos / Ctrl/Cmd + Shift + G: desagrupar
- Ctrl/Cmd + Z: deshacer (tu mejor amigo al empezar)
Conceptos fundamentales
- Frame: el contenedor principal — piensa en él como una pantalla o una sección. Todo diseño empieza con un Frame
- Grupo: une elementos visualmente pero sin propiedades de layout avanzadas
- Componente: un elemento reutilizable que puedes instanciar y actualizar globalmente
- Auto Layout: el superpoder de Figma para crear diseños flexibles y responsivos
- Variables y estilos: para mantener consistencia de colores, tipografía y espaciado
Consejo: Figma funciona en el navegador pero también tiene app de escritorio. La versión de escritorio es idéntica pero ligeramente más rápida. Descárgala desde figma.com/downloads.
Práctica acompañada: Interfaces que se pueden probar
Un flujo, sus estados y un prototipo en Figma. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.
Práctica: prueba sin explicar
Conecta tres pantallas y un estado de error. Pide a alguien: «Reserva una clase el martes y cambia la fecha antes de confirmar». Observa dónde toca primero, qué lee y si sabe cuándo terminó. No digas el nombre del botón que esperas que use.
Registra los problemas por consecuencia: impide terminar, provoca una elección equivocada o solo añade esfuerzo. Corrige primero los dos primeros. Repite con textos largos y una pantalla estrecha. Si el prototipo no representa el comportamiento del teclado, anota esa limitación para la implementación en lugar de afirmar que ya verificaste la accesibilidad completa.
Comprueba tu entrega
Entrega el flujo, una hoja de componentes y un registro de cambios. Para cada cambio explica el problema observado y la modificación elegida. Por ejemplo: «Dos personas confundieron guardar con confirmar; cambié el texto y mostré un resumen antes de la acción».
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.