Conviértete en diseñador UI/UX: aprende Figma + IA desde cero
Ver precio en Udemy
Precio base MX$349 MXN · pago único
Udemy puede aplicar ofertas. Consulta el precio final al comprar.
Pago único · acceso de por vida · reembolso 30 días
Garantía de 30 días de Udemy · Acceso de por vida
En español y a tu ritmo: Auto Layout, componentes, prototipos y de Figma a código con IA (Figma Make, Figma Sites, Cursor y VS Code). 77 clases y 18.5 h de video.
- 18.5 hde video en español
- 77clases
- 6 talleresmás de 9 h de práctica guiada
- Desde cerohasta IA y código
- Octubre 2026última actualización
- Certificadode finalización de Udemy
Mira la intro del curso
En menos de 2 minutos, descubre la transformación que te espera y conoce a tu instructor.
Lecciones gratis
Mira cómo explica el instructor antes de inscribirte.
Lección gratis · 03:03Para estudiantes: así activas Figma Education
Lección gratis · 01:58Tu primer recorrido por la interfaz
Flujos de Trabajo Acelerados
Domina la herramienta líder del diseño digital. Este curso integral te lleva desde lo básico hasta técnicas avanzadas de diseño, programación con IA, prototipado interactivo y construcción de sistemas de diseño escalables en Figma. Conecta VS Code con Figma. Usa Cursor para generar Código HTML y CSS con Inteligencia Artificial.
Guiado por Angel Ricardo Espinosa
Diseñador UX/UI con 29 años de experiencia. Profesor en ITESM y Anáhuac.
De Figma a código con IA
Configura el MCP de Figma, conéctalo con Cursor y VS Code, y convierte tus diseños en HTML y CSS. Incluye un taller de 40 minutos para preparar tu archivo y que la IA programe tu diseño.
Convierte tus ideas en productos reales.
Este curso online te guía paso a paso desde tus primeros trazos en Figma hasta la creación de sistemas de diseño completos, prototipos interactivos de alta fidelidad y entregables listos para desarrollo.
Qué vas a aprender
Todo lo que necesitas para diseñar interfaces profesionales en Figma, y lo más nuevo de 2026: IA, Figma Make y Figma Sites.
- Moverte por Figma con fluidez: frames, secciones, capas y paneles.
- Tipografía, composición y grids para interfaces ordenadas.
- Dibujo vectorial con la pluma para iconos y logos.
- Auto Layout para diseños que se adaptan a cualquier pantalla.
- Componentes y variantes para construir sistemas de diseño.
- Variables para colores, medidas y tipografía responsive.
- Prototipos interactivos con Smart Animate y microinteracciones.
- Figma Make: componentes y animaciones generados con IA.
- De Figma a código: VS Code, Locofy, MCP y Cursor.
- Publicar sitios web con Figma Sites, con CMS para un blog.
Temario
18 temas, de la interfaz de Figma a Figma Make, Figma Sites y código con IA. Elige un tema para ver sus lecciones y duración.
Temario completo por tema
Tema 1 Introducción a Figma 2026
- Mensaje del instructor02:42
- Bienvenido a Figma Master02:46
- Para Estudiantes: Así Activas Figma Education03:03
Tema 2 Domina la interfaz de FIGMA
- Tu Primer Recorrido por la Interfaz01:58
- Un Vistazo Profundo a la Estructura de la interfaz04:07
- Los Layers o Capas: El Corazón de la Organización en Figma03:22
- Define y Organiza Tus Pantallas y Artboards03:35
- El Panel de Diseño 1: Controla el Estilo de Tus Elementos06:01
- El Panel de Diseño 2: Ajuste Fino con Tamaño y Alineación02:32
- La Caja de Herramientas: Herramientas de Selección y Forma04:01
- Frames: Los Lienzos Digitales para Tus Diseños de App y Web08:04
- Frames vs. Secciones: Cuándo y Por Qué Usar Cada Uno05:08
- Figma desde Cero: Taller para Conocer la Interfaz y Crear tus primeros elementos1:29:00
Tema 3 Tipografía en Figma
- Bases Tipográficas Esenciales: Fuentes, Jerarquía y Estilos en Figma06:50
- Efectos Tipográficos Avanzados: Dale Personalidad a Tus Textos06:06
- Técnicas de Composición para Diseños Equilibrados06:19
Tema 4 Figma Draw
- Figma Draw: De la Idea al Vector. Introducción a las Herramientas de Creación05:54
- Dibujo Vectorial Profesional: Domina la Pluma y Edición de Nodos08:04
Tema 5 Grids: La Base del Orden
- Tu Primer Grid: Configuración y Aplicación en Figma desde Cero07:09
- Grids Avanzados: Construye Sistemas de Diseño para Apps y Web04:11
- Alineación Perfecta: Integrando Tu Diseño con el Grid de Columnas03:53
Tema 6 Plugins en Figma
- Usa Plugins de Figma para mejorar tu desempeño11:40
Tema 7 Imágenes en Figma
- Uso Avanzado de Imágenes y Mockups en Figma08:19
Tema 8 Auto Layout
- Las bases del Autolayout04:01
- Controla el Espacio Alrededor de Tus Elementos06:03
- Manejo del padding y otros valores06:25
- Domina Cómo los Elementos se Adaptan Dentro del Auto Layout03:34
- Construye una Tarjeta de Red Social 100% Responsive10:15
- Auto Layout desde Cero: Taller para Entender el Comportamiento del Auto Layout1:45:00
Tema 9 Creación de Componentes
- Construye Tu Primer Componente: La Base para Diseños Escalables06:41
- De Estático a Dinámico: Crea Componentes con Variantes09:14
- Conecta Variantes para Crear Interacciones entre Componentes05:17
Tema 10 Máscaras en Figma
- Domina las Máscaras: Crea Composición Visual y Efectos de Impacto03:11
Tema 11 Diseña una Página Profesional
- Diseña una Página Profesional Paso a Paso en Figma Design y Figma Sites.1:57:00
Tema 12 Prototipado Interactivo
- Prototipado Básico: Conecta Pantallas a la Navegación de Tu App05:35
- Transiciones que Mejoran la Experiencia de Usuario UX05:04
- Caso Práctico: Construye un Slider o Control Deslizante Interactivo05:08
- Navegación Avanzada: Diseña Menús con Componentes02:51
- Crea un Menú Interactivo en Figma: Combinando Componentes y Frames07:26
- Smart Animate: Domina las Transiciones Inteligentes entre Elementos10:12
Tema 13 Microinteracciones Avanzadas
- Prototipa una validación de Pago 108:09
- Prototipa una validación de Pago 205:27
Tema 14 Integración Figma + VS Code
- Usa Figma to Code: Conecta Tus Diseños con VS Code01:36
- Exporta Código Frontend Gratis: HTML/CSS con Locofy10:14
- Taller Figma + VS Code: El Flujo de Trabajo para Diseñar y Programar HTML/CSS1:43:00
Tema 15 Variables en Figma
- La Clave para Diseños Consistente y Fáciles de Mantener04:08
- Tipografía con Variables: Escalable y Responsive en Figma12:37
- Tipografía Automatizada: Variables para Control de medidas07:11
Tema 16 Figma Make
- Introducción a Figma Make05:20
- Ejemplo de Figma Make con Componente03:05
- Ejemplo para una Animación02:00
- Ejemplo con un Diseño de Figma Design02:20
- Ejemplo de una Página Existente02:28
Tema 17 Figma en la Era AI
- Introducción al mundo de herramientas AI para Figma.06:25
- Configura el MCP de Figma para Conectar con Herramientas de IA03:46
- Conecta Figma con VS Code y Cursor via MCP Server05:05
- Prepara tu archivo de Figma para que lo entienda la IA06:17
- Cómo el Vibe Coding Acelera la Implementación de Tus Diseños03:36
- De Figma a Código en Cursor: Programación con IA de tus Diseños06:35
- Análisis de Resultados con IA en Programación06:07
- Organiza tu Archivo de Figma para que la IA de CURSOR Programe tu Diseño en HTML40:00
Tema 18 Figma Sites
- Bienvenido a Figma Site: La Revolución del Diseño Web sin Código Dentro de Figma02:27
- Domina la Interfaz de Figma Sites: Conoce Cada Herramienta para Publicar Webs.07:32
- Organización en Figma Sites: Estructura tus Archivos para Webs Escalables.04:57
- Inserts de Figma Sites: Los Bloques Programados que Aceleran la Creación.07:17
- Code Layers + Figma Make: Crea Componentes Custom con Código Propio.06:33
- CMS en Figma Sites: Crea y Gestiona un Blog Dinámico sin Salir de tu Diseño.09:43
- Dale Vida a tu Web: Agrega Links y Animaciones Interactivas en Figma Sites.08:56
- Taller Práctico de Figma Sites: Crea tu Primera Web desde Cero Paso a Paso.1:34:40
Lo que vas a construir
Proyectos prácticos del temario para tu portafolio.
Tema 8 · Auto Layout
Una tarjeta de red social 100 % responsive
Aprendes Auto Layout construyendo una tarjeta que se adapta a cualquier tamaño, más un taller de 1 h 45 min.
Tema 11 · Proyecto completo
Una página profesional en Figma Design y Figma Sites
Diseñas paso a paso una página web de principio a fin en un taller de 1 h 57 min.
Tema 13 · Microinteracciones
El flujo de validación de una tarjeta de crédito
Prototipas la validación de un pago con microinteracciones que se sienten reales.
Temas 17 y 18 · IA y Figma Sites
Tu diseño convertido a código y publicado
Llevas tu diseño a HTML con Cursor vía MCP y publicas tu primera web con Figma Sites, con CMS para un blog.
¿Para quién es?
- Nunca has abierto Figma y quieres empezar desde cero.
- Eres diseñador gráfico y quieres pasar a UI/UX.
- Ya diseñas interfaces y quieres sumar IA y código a tu flujo.
- Eres freelancer o estudiante y quieres publicar webs desde Figma.
No es un curso de investigación UX (entrevistas o pruebas con usuarios): es un curso práctico de herramienta y producción.
Requisitos y materiales
- Una computadora con internet (Mac o Windows). Figma funciona en el navegador o en su app.
- Una cuenta gratuita de Figma. Si eres estudiante, te enseñamos a activar Figma Education.
- Para los temas de código: VS Code (gratis) y Cursor (tiene plan gratuito).
- No necesitas saber programar.
Angel Ricardo Espinosa
Diseñador UX/UI · 29 años de experiencia
Con 29 años en diseño gráfico y proyectos interactivos, ha sido reconocido con premios nacionales e internacionales a través de 3indesign en UX, UI, diseño de apps, diseño web y animación digital. Ha sido ponente en conferencias de diseño en México y el extranjero.
- Profesor en el ITESM Campus Estado de México
- Profesor en la Universidad Anáhuac Norte
- Trabajo publicado por la Editorial Taschen
- Representó a México en la Bienal de Diseño de Madrid
Lo que dicen en Udemy
4.4 de 5 en Udemy, según las calificaciones de sus estudiantes.
★★★★★
“Información clara.”
★★★★☆
“Muy bueno el curso y muy bien explicado.”
Míralo gratis antes de comprar
4 clases prácticas abiertas en Udemy · sin registro de pago
Las bases del Autolayout
Entiende cómo se acomodan solos tus elementos y deja de mover cajas a mano.
Ver clase gratis →Tarjeta de red social 100% responsive
Arma un componente real con Autolayout que se adapta a cualquier tamaño.
Ver clase gratis →Conecta tus diseños con VS Code
Ve cómo pasar de Figma a código sin copiar medidas una por una.
Ver clase gratis →Introducción a Figma Make
Genera interfaces con IA dentro de Figma y entiende cuándo te conviene.
Ver clase gratis →En Udemy, busca las clases marcadas como «Vista previa» en el temario.
Únete a la nueva era del diseño
Pago único en Udemy con acceso de por vida al curso y sus actualizaciones.
Acceso Completo a Figma Máster
Precio base MX$349 MXN · pago único
Ve el precio de hoy en Udemy
Udemy puede aplicar ofertas. Consulta el precio final al comprar. Precio en México; fuera de México, Udemy te muestra el precio de tu país.
- Acceso vitalicio a los 18 temas
- 77 clases y 18.5 h de video en español
- Actualizaciones del curso incluidas
- Certificado de finalización de Udemy
- Computadora y app de Udemy en tu celular
En Udemy el curso se llama: Figma desde cero 2026: UI/UX, prototipos y Figma con IA
Ver precio en UdemyGarantía de 30 días de Udemy · Acceso de por vida
Garantía de reembolso de 30 días
Es la garantía de Udemy: si el curso no es para ti, pides el reembolso desde tu cuenta dentro de los primeros 30 días.
Preguntas Frecuentes
Lo que más nos preguntan antes de inscribirse.
¿El pago es único o es una suscripción?
Es un pago único en Udemy con precio base de MX$349 MXN (México). Udemy puede aplicar ofertas, así que el precio final lo ves al comprar; fuera de México, Udemy muestra el precio de tu país. Tienes acceso de por vida al curso, incluidas sus actualizaciones.
¿Necesito saber de diseño o Figma previamente?
No. El curso empieza desde cero con la interfaz de Figma y avanza hasta componentes, variables, prototipado y flujos con Inteligencia Artificial.
¿Cómo accedo al curso una vez comprado?
Al comprar en Udemy, el curso aparece de inmediato en tu cuenta. Lo ves en computadora o en la app de Udemy en tu celular.
¿Tendré soporte si tengo dudas?
Sí. Puedes dejar tus preguntas al instructor en la sección de preguntas y respuestas del curso en Udemy o escribir a academyofinteractionmx@gmail.com.
¿Tengo que pagar Figma?
Puedes empezar con la versión gratuita. Si eres estudiante, una lección te guía para activar Figma Education y obtener la versión Pro sin costo.
¿Qué es Figma Make y qué es Figma Sites?
Figma Make genera código y componentes interactivos a partir de tus diseños con IA. Figma Sites te permite diseñar, publicar y alojar sitios web desde Figma. El curso tiene un tema completo de cada uno.
¿Cuánto dura el curso?
18.5 h de video en español: 77 clases organizadas en 18 temas. Avanzas a tu ritmo.
¿Recibo certificado?
Sí. Al terminar recibes el certificado de finalización de Udemy.
¿Está actualizado a la versión actual de Figma?
Sí. La última actualización en Udemy es de octubre de 2026 e incluye Figma Make, Figma Sites y la conexión de Figma con Cursor por MCP.
¿Aprenderé Auto Layout, componentes y variables?
Sí. Hay un tema de Auto Layout con un taller de 1 h 45 min, uno de componentes con variantes y uno de variables para colores, medidas y tipografía responsive.
¿Enseña a hacer prototipos interactivos?
Sí. Conectas pantallas, usas transiciones y Smart Animate, construyes un slider y un menú interactivo, y prototipas la validación de un pago con microinteracciones.
¿Puedo pedir reembolso?
Sí. Udemy ofrece garantía de reembolso de 30 días: si el curso no es para ti, lo solicitas desde tu cuenta.
¿Necesito saber programar para los temas de código?
No. Aprendes a preparar tu archivo de Figma para que la IA de Cursor genere el HTML y CSS, y a revisar el resultado.
Empieza hoy a diseñar con Figma e IA
77 clases, 6 talleres prácticos y acceso de por vida. Aprende a tu ritmo desde la computadora o la app de Udemy.
Inscribirme en UdemyPrecio base MX$349 MXN · pago único · Udemy puede aplicar ofertas. Consulta el precio final al comprar. · 4.4 ★ en Udemy · Garantía de reembolso de 30 días