¿Qué es Figma Make, Figma Sites y Figma Design? Aprende todo en 2026
Figma Make es la herramienta de IA de Figma que convierte tus diseños en código funcional en segundos. Con Figma Make aprenderás a generar componentes interactivos, animaciones y código HTML/CSS/React directamente desde tu archivo de Figma, integrando el flujo de Vibe Coding con herramientas como Cursor y VS Code. Este curso es el primero en español que lo explica con ejemplos reales paso a paso.
Figma Sites te permite publicar sitios web directamente desde Figma sin necesidad de código. Aprenderás a construir landing pages, portafolios y sitios profesionales que se conectan con tu diseño en tiempo real. Figma Design lleva la colaboración entre diseño y desarrollo a un nuevo nivel, sincronizando componentes con repositorios de código. Estas tres herramientas juntas representan el futuro del diseño digital y las dominarás en este curso.
Además de Figma Make, Figma Sites y Figma Design, aprenderás a configurar el MCP Server de Figma para conectar tus diseños con Cursor AI y Claude, preparar archivos para que la IA los interprete correctamente, y usar Vibe Coding para acelerar la implementación de tus diseños. Si quieres estar al frente de la industria del diseño digital en 2026, este es tu curso.
Contenido completo: Figma Make, Figma Sites, Figma Design y más
-
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 es este curso de Figma Make, Figma Sites y Figma Design?
Este curso está diseñado para diseñadores que ya conocen Figma y quieren dominar las herramientas de IA más modernas: Figma Make, Figma Sites y Figma Design. También es ideal para desarrolladores frontend que quieren entender cómo la IA une diseño y código, y para profesionales que necesitan publicar sitios web directamente desde Figma sin depender de un equipo de desarrollo.
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 Figma Make, Figma Sites y Figma Design
Comentarios de los estudiantes
¿Por qué este es el único curso de Figma Make y Figma Sites en español?
Mientras otros cursos se enfocan en Figma básico, este es el único en español que cubre en profundidad Figma Make, Figma Sites y Figma Design — las tres herramientas lanzadas en 2025-2026 que están transformando la industria del diseño digital. Aprenderás con proyectos reales: desde generar código con Figma Make hasta publicar un sitio completo con Figma Sites y sincronizar componentes con Figma Design. La IA ya no es el futuro del diseño: es el presente, y este curso te prepara para dominarlo.
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.