¿Qué aprenderás en este curso profesional de Figma?
Este curso de Figma está diseñado para llevarte desde cero hasta un nivel profesional en diseño de interfaces, prototipado UX/UI y flujos de trabajo modernos apoyados con Inteligencia Artificial. Domina la herramienta líder del diseño digital con este curso integral que te lleva desde lo básico hasta técnicas avanzadas de UI/UX, prototipado interactivo y construcción de sistemas de diseño escalables en Figma.
Aprende a crear interfaces profesionales, componentes reutilizables, animaciones fluidas y entregables pixel-perfect para desarrollo. 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. Domina Auto Layout, Variantes, Smart Animate, plugins esenciales y la integración con desarrollo utilizando Inteligencia Artificial.
Ideal para diseñadores, estudiantes y profesionales que buscan migrar al diseño digital, actualizar sus habilidades o construir un portafolio competitivo. Aprenderás no solo la herramienta, sino la mentalidad y el flujo de trabajo de un diseñador UI/UX profesional: diseño de componentes escalables, técnicas de prototipado avanzado y creación de design systems con variables. ¡Bienvenidos a Figma Master!.
Contenido completo del curso de Figma UX/UI
-
Introducción a Figma 202606:00
-
Domina la interfaz de FIGMA2:08:00
| Tu Primer Recorrido por
la Interfaz |
|
01:58 |
| Un Vistazo Profundo a
la Estructura de la interfaz |
|
04:07 |
| Los Layers o Capas: El
Corazón de la Organización en Figma |
|
03:22 |
| Define y Organiza Tus
Pantallas y Artboards |
|
03:35 |
| El Panel de Diseño 1:
Controla el Estilo de Tus Elementos |
|
06:01 |
| El Panel de Diseño 2:
Ajuste Fino con Tamaño y Alineación |
|
02:32 |
| La Caja de
Herramientas: Herramientas de Selección y Forma |
|
04:01 |
| Frames: Los Lienzos
Digitales para Tus Diseños de App y Web |
|
08:04 |
| Frames vs. Secciones:
Cuándo y Por Qué Usar Cada Uno |
|
05:08 |
| Figma desde Cero: Taller para Conocer la Interfaz y Crear tus primeros elementos |
|
1:29:00 |
-
Tipografía en Figma: Domina los Fundamentos19:00
| Bases Tipográficas Esenciales: Fuentes, Jerarquía y
Estilos en Figma |
|
06:50 |
| Efectos Tipográficos
Avanzados: Dale Personalidad a Tus Textos |
|
06:06 |
| Técnicas de
Composición para Diseños Equilibrados |
|
06:19 |
-
Figma Draw14:00
| Figma Draw: De la Idea al Vector. Introducción a las
Herramientas de Creación |
|
05:54 |
| Dibujo Vectorial
Profesional: Domina la Pluma y Edición de Nodos |
|
08:04 |
-
Grids: La Base de la Alineación y el Orden en el Diseño UI15:00
| Tu Primer Grid: Configuración y Aplicación en Figma desde
Cero |
|
07:09 |
| Grids Avanzados:
Construye Sistemas de Diseño para Apps y Web |
|
04:11 |
| Alineación Perfecta:
Integrando Tu Diseño con el Grid de Columnas |
|
03:53 |
-
Plugins en Figma: Descubre el Poder de los Plugins11:40
| Usa Plugins de Figma para mejorar tu desempeño |
|
11:40 |
-
Imágenes en Figma: Integración y Gestión Profesional08:00
| Uso Avanzado de Imágenes y Mockups en Figma |
|
08:19 |
-
Auto Layout: El Secreto del Diseño Responsive en Figma2:15:00
| Las bases del Autolayout |
|
04:01 |
| Controla el Espacio
Alrededor de Tus Elementos |
|
06:03 |
| Manejo del padding y
otros valores |
|
06:25 |
| Domina Cómo los
Elementos se Adaptan Dentro del Auto Layout |
|
03:34 |
| Construye una Tarjeta
de Red Social 100% Responsive |
|
10:15 |
| Auto Layout desde Cero: Taller para Entender el Comportamiento del Auto Layout |
|
1:45:00 |
-
Fundamentos y Creación de Componentes21:00
| Construye Tu Primer Componente: La Base para Diseños
Escalables |
|
06:41 |
| De Estático a
Dinámico: Crea Componentes con Variantes |
|
09:14 |
| Conecta Variantes para
Crear Interacciones entre Componentes |
|
05:17 |
-
Máscaras en Figma: El Control Total para Recortar03:11
| Domina las Máscaras: Crea Composición Visual y Efectos de
Impacto |
|
03:11 |
-
Diseña una Página Profesional Paso a Paso en Figma Design y Figma Sites.1:57:00
| Diseña una Página Profesional Paso a Paso en Figma Design y Figma Sites. |
|
1:57:00 |
-
Prototipado Interactivo: Da Realismo a Tus Diseños UX36:00
| Prototipado Básico: Conecta Pantallas a la Navegación de
Tu App |
|
05:35 |
| Transiciones que
Mejoran la Experiencia de Usuario UX |
|
05:04 |
| Caso Práctico:
Construye un Slider o Control Deslizante Interactivo |
|
05:08 |
| Navegación Avanzada:
Diseña Menús con Componentes |
|
02:51 |
| Crea un Menú
Interactivo en Figma: Combinando Componentes y Frames |
|
07:26 |
| Smart Animate: Domina
las Transiciones Inteligentes entre Elementos |
|
10:12 |
-
Microinteracciones en el Flujo de una Tarjeta de Crédito14:00
| Prototipa una validación de Pago 1 |
|
08:09 |
| Prototipa una
validación de Pago 2 |
|
05:27 |
-
Integración Figma + VS Code: Flujo de Trabajo para
Diseñadores1:55:00
| Usa Figma to Code: Conecta Tus Diseños con VS Code |
|
01:36 |
| Exporta Código
Frontend Gratis: HTML/CSS con Locofy |
|
10:14 |
| Taller Figma + VS Code: El Flujo de Trabajo para Diseñar y Programar HTML/CSS |
|
1:43:00 |
-
Variables en Figma: De Diseños Estáticos a Sistemas
Dinámicos24:00
| La Clave para Diseños Consistente y Fáciles de Mantener
|
|
04:08 |
| Tipografía con
Variables: Escalable y Responsive en Figma |
|
12:37 |
| Tipografía
Automatizada: Variables para Control de medidas |
|
07:11 |
-
Figma Make15:00
| Introducción a Figma Make
|
|
05:20 |
| Ejemplo de Figma Make con Componente |
|
03:05 |
| Ejemplo para una Animación |
|
02:00 |
| Ejemplo con un Diseño de Figma Design |
|
02:20 |
| Ejemplo de una Página Existente |
|
02:28 |
-
Figma en la Era AI: Potencia tu Diseño con Herramientas de
AI1:18:00
| Introducción al mundo de herramientas AI para Figma. |
|
06:25 |
| Configura el MCP de
Figma para Conectar con Herramientas de IA |
|
03:46 |
| Conecta Figma con VS
Code y Cursor via MCP Server |
|
05:05 |
| Prepara tu archivo de
Figma para que lo entienda la IA |
|
06:17 |
| Cómo el Vibe Coding
Acelera la Implementación de Tus Diseños |
|
03:36 |
| De Figma a Código en
Cursor: Programación con IA de tus Diseños |
|
06:35 |
| LAnálisis de
Resultados con IA en Programación |
|
06:07 |
| Organiza tu Archivo de Figma para que la IA de CURSOR Programe tu Diseño en HTML |
|
40:00 |
-
Figma Sites: Diseña, Publica y Aloja tu Web sin Escribir una Línea de Código2:22:00
| Bienvenido a Figma Site: La Revolución del Diseño Web sin Código Dentro de Figma |
|
02: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 |
¿Para quién está diseñado este curso?
Este curso de Figma profesional está diseñado para estudiantes de diseño digital, UX y UI. También es ideal para profesionales del diseño que quieran dominar Figma y la elaboración de interfaces digitales, así como para aquellos que buscan incorporar Inteligencia Artificial en sus flujos de trabajo de prototipado.
Ricardo Espinosa
29 años de experiencia en UX + Design y Diseño de interfaces digitales.
4.4 Instructor Rating
31,201 Reviews
19,451 Estudiantes
5 Cursos
Con 29 años de experiencia en diseño gráfico y proyectos interactivos, ha sido reconocido con múltiples
premios nacionales e internacionales a través de 3indesign, destacando en UX, UI, mobile app design,
diseño web y animación digital. Su trabajo ha sido publicado en revistas especializadas y por la
prestigiosa Editorial Alemana Taschen. Representó a México en la Bienal de Diseño de Madrid y ha sido
ponente en conferencias de diseño a nivel nacional e internacional. Actualmente, comparte su
conocimiento como profesor en el ITESM Campus Estado de México y la Universidad Anáhuac Norte, además de
dominar herramientas clave como Figma, Inteligencia Artificial y Test de Usuario.
Preguntas frecuentes sobre el curso de Figma
Comentarios de los estudiantes
¿Por qué este es el mejor curso de Figma en español?
De principiante a profesional: domina todos los aspectos de Figma. Aprende desde la configuración de la interfaz y el uso de capas hasta el prototipado avanzado y la colaboración con desarrolladores. Este curso de Figma profesional incluye técnicas modernas de diseño UX/UI y la integración de Inteligencia Artificial para optimizar tu flujo de trabajo.
Ale Ortiz
hace 40 días
La paciencia en temas avanzados como Componentes con Variantes y Variables es notable. Pensé que esos módulos serían 'opcionales' para mi nivel, pero las explicaciones son tan claras y progresivas que terminé dominándolos. Transformó cómo me comunico con mi equipo de diseño: ahora hago preguntas precisas y sugerencias fundamentadas.
Juan Manuel San Román
Hace 22 días
La facilidad de explicación hace que conceptos complejos parezcan obvios en retrospectiva. Eso solo pasa cuando un instructor realmente domina el tema y, más importante, domina cómo transmitirlo. Este curso vale el doble de lo que cuesta solo por la claridad mental que te da.
Oleg Norton
Hace 9 días
Esto es lo que las universidades deberían enseñar. Llevo 3 años en la carrera de diseño digital y nunca me explicaron Auto Layout como aquí. En la universidad era: 'úsalo', pero nadie te decía el PORQUÉ detrás de cada decisión. Aquí cada clic tiene una razón.