Lecciones

25
1
Fundamentos
Introducción a Figma y flujo de trabajo
Aprende qué es Figma, cómo se usa en proyectos reales y cómo preparar un archivo limpio desde el día uno.
2
Fundamentos
Interfaz, paneles y atajos
Domina la interfaz de Figma y los atajos que más mejoran tu velocidad y precisión.
3
Fundamentos
Frames, formas y estructura visual
Construye pantallas ordenadas desde la base: estructura, jerarquía y consistencia.
4
Fundamentos
Tipografía para interfaces
Define una base tipográfica escalable y legible para producto digital.
5
Diseño y layout
Color y estilos base
Diseña una paleta útil para UI real, con contraste y estados claros.
6
Diseño y layout
Auto Layout a nivel profesional
Aprende a construir interfaces adaptables con Auto Layout sin hacks.
7
Diseño y layout
Grids y composición de layout
Usa rejillas para mantener ritmo visual y alineación consistente.
8
Componentes
Componentes reutilizables
Crea componentes sólidos para escalar producto sin duplicaciones.
9
Componentes
Variantes y estados
Modela estados de interfaz (default, hover, active, disabled) con variantes limpias.
10
Componentes
Herencia, propiedades y overrides
Controla cómo se propagan cambios y cómo evitar overrides que rompan el sistema.
11
Componentes
Estilos globales y librerías
Centraliza color, texto y efectos para acelerar cambios globales con seguridad.
12
Avanzado
Variables y modos
Aplica variables para temas, marcas y modos sin duplicar pantallas.
13
Prototipado
Prototipado funcional
Conecta pantallas y valida flujos completos antes de programar.
14
Prototipado
Smart Animate
Crea animaciones fluidas con intención UX y transiciones comprensibles.
15
Prototipado
Interacciones avanzadas
Modela interacciones complejas con estados y lógica clara.
16
Prototipado
Scroll y navegación contextual
Diseña experiencias con scroll, anclas y comportamiento natural de lectura.
17
Prototipado
Microinteracciones que aportan
Refina feedback visual y estados de interfaz con microinteracciones útiles.
18
Prototipado
Componentes interactivos escalables
Construye componentes interactivos reutilizables para prototipos complejos.
19
Avanzado
Dev Mode y entrega a frontend
Aprende a preparar archivos para desarrollo y reducir dudas en handoff.
20
Avanzado
Sistema de diseño en Figma
Diseña un sistema mantenible con reglas, gobernanza y criterios de evolución.
21
Avanzado
Colaboración y review en equipo
Organiza trabajo colaborativo, reviews y decisiones sin bloquear al equipo.
22
Avanzado
Exportación y handover profesional
Prepara assets, especificaciones y documentación para entregar sin ambigüedades.
23
Avanzado
Plugins y automatización útil
Integra plugins con criterio para acelerar tareas sin comprometer calidad.
24
Avanzado
Proyecto real: UI completa paso a paso
Aplica todo el curso en un proyecto de producto: sistema, prototipo y handoff.
25
Avanzado
Cierre del curso y siguientes pasos
Consolida tu plan de mejora en Figma y define una ruta de práctica para seguir creciendo.
Página 1 de 1
Roadmap

Diseño

Diseño visual, producto, UX y sistemas de información aplicados a trabajo real.

Producto y experiencia

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .