Curso Figma y Diseño Web
Avatar optimizadoAvatar optimizadoAvatar optimizadoAvatar optimizado

4.68 de calificación

Más de 400 alumnos han confiado en este curso

Resumen del Curso

Este curso está diseñado como un recorrido formativo completo, para dominar Figma de principio a fin.

Sus secciones están conectadas lógicamente para guiarte, paso a paso, desde cero hasta un nivel profesional. Al finalizar, tendrás las habilidades para desenvolverte con soltura en cualquier proyecto, ya sea para tu portafolio personal, el de tu empresa o cualquier otra iniciativa de diseño.

Secciones más destacadas

¿Qué aprenderás en el curso?

Estas son algunas de las habilidades y conocimiento técnico que adquirirás una vez termines el curso.

Domina Figma desde cero y aprende a crear diseños profesionales, dinámicos y escalables. Construye sistemas de diseño modernos que optimizan tu flujo de trabajo y elevan la calidad de tus proyectos.

Secciones y capítulos

17 horas para dominar la versión starter de Figma

El curso se centra en la arquitectura del diseño, enseñándote a crear sistemas escalables, componentes avanzados y experiencias interactivas que hacen que tus prototipos sean funcionales y realistas.

Luego aplicarás todo en un prototipo web completo, que incluirá la Home Page, páginas de Proyectos, Blog, Equipo y Contacto, construidas paso a paso.

Introducción a Figma

8 clases24min

  • Introducción a la sección
    1:21
  • Registro en la Web de Figma
    2:50
  • El panel principal
    7:38
  • El Onboarding en (Figma Basics)
    1:23
  • Formas de usar Figma: Web & Desktop app
    2:16
  • El instalador de fuentes tipográficas
    1:16
  • La Comunidad de Figma
    5:29
  • Los eventos Config de Figma
    1:57

Conceptos básicos de Figma

10 clases59min

  • Introducción a la sección
    1:10
  • Estructura del archivo de Diseño
    12:52
  • El Frame
    8:03
  • El Frame II
    3:47
  • Las figuras
    5:15
  • Los textos
    7:08
  • Las imágenes
    6:18
  • Las Máscaras
    6:50
  • Los Grupos Vs. Los frames
    4:20
  • Herramientas para comunicación y colaboración
    3:07

El auto layout

10 clases44min

  • Introducción a la sección
    1:42
  • Aplicar el Auto layout a los Frames
    3:30
  • Crear Frame con auto layout a partir de un texto
    4:40
  • Los frames anidados
    3:31
  • Dirección y gap
    4:35
  • Alineamiento, posicionamiento y constrains
    8:19
  • Horizontal y vertical resizing
    4:52
  • Los apilamientos
    1:45
  • Máximo y mínimo de alto y ancho
    5:01
  • Clip content y scrolling
    5:35

El sistema de grid

6 clases24min

  • Introducción a la sección
    1:59
  • Sistema de grid por columnas
    5:09
  • Diferencia entre grid fijas y dinámicas
    2:03
  • La retícula
    2:40
  • Elementos dentro del sistema de grid
    3:17
  • Sistema de grid por filas o rows
    9:21

Estilos, variables y Tokens de diseño

28 clases2h 11min

  • Introducción a la sección
    1:56
  • Diferencias entre estilos y variables en Figma
    6:56
  • Estilos de tipografía
    4:37
  • Estilos de color
    2:09
  • Estilos de efecto
    2:23
  • Estilos de grid
    3:37
  • Introducción a las variables (tipos de variables)
    6:35
  • Colecciones y grupos de variables
    4:09
  • Introducción a los Tokens de diseño en Figma
    10:35
  • Tokens primitivos I. Color
    3:55
  • El Scope de las variables
    2:46
  • Tokens primitivos II. Color
    4:16
  • Documento para ejercicio de variables
    0:38
  • Revisión de los grupos y variables de color del Ejercicio de grupos de color
    2:39
  • Tokens primitivos III: Numéricos
    4:51
  • Tokens semánticos I: Color para texto
    7:33
  • Tokens semánticos II: Opacidad
    7:49
  • Tokens semánticos III: Colores para bordes e iconos
    4:20
  • Tokens semánticos IV: Estados de los tokens
    5:13
  • Tokens semánticos V: Espaciados
    8:15
  • Tokens de tipografía I: Font size
    4:45
  • Tokens de tipografía II: Line height
    2:31
  • Tokens de tipografía III: Font weight
    3:37
  • Tokens de tipografía IV: Font family
    2:14
  • Asignación de Tokens a estilos de tipografía
    8:59
  • Tokens diseño responsive
    5:19
  • Modos de las variables
    4:31
  • Visualizar estilos y variables
    3:50

Componentes básicos

19 clases1h 29min

  • Introducción a la sección
    1:59
  • Introducción al Diseño Atómico (Atomic design)
    8:21
  • Crear el primer componente
    2:27
  • Instancias del componente
    3:13
  • Crear múltiples componentes
    5:01
  • Tokens de componente
    5:01
  • Propiedades del componente: Booleana
    3:10
  • Propiedades del componente: Texto
    2:18
  • Variantes del componente
    3:47
  • Tokens semánticos en el componente
    4:38
  • Diseño de componente: Botón
    8:52
  • Diseño de componente: Link
    5:21
  • Propiedades del componente: Instance Swap I
    4:24
  • Instance Swap + Multi-edit variants para iconos de componentes
    2:44
  • Diseño de componente: Checkbox
    8:36
  • Colección de iconos para componentes
    3:39
  • Diseño de componente: Input I
    5:33
  • Diseño de componente: Input II
    3:34
  • Diseño de componente: Input III
    6:16

Componentes avanzados

28 clases2h 18min

  • Introducción a la sección
    1:50
  • Diseño de componente: Navigation Link
    7:31
  • Diseño de componente: Navigation Card I
    5:35
  • Diseño de componente: Navigation Card II
    3:52
  • Diseño de componente: Navigation Card III
    3:47
  • Diseño de componente: Menu
    3:25
  • Diseño de componente: Slot
    6:02
  • El Menu con componentes Slot
    5:08
  • Nasted instances o Instancias anidadas
    4:00
  • Finalizando el diseño del componente del Menu
    3:21
  • Diseño de componente: Logo y variantes
    5:47
  • Variables para el Logo
    5:09
  • El Content Max como guía de diseño
    5:38
  • Adaptar el sistema de grid al Content Max
    4:51
  • Variables en el grupo de Content Max
    4:26
  • Variables en Componentes Navbar, Menu y Navigation Card
    3:56
  • Diseño de componente: Variante Mobile del Navbar
    3:45
  • Diseño de componente: Collapse I
    5:04
  • Diseño de componente: Collapse II
    4:11
  • Diseño de componente: Collapse III
    6:40
  • Iconos de Redes Sociales para Footer
    2:20
  • Diseño de componente: Footer I
    6:25
  • Diseño de componente: Footer II
    4:08
  • Diseño de componente: Footer III
    6:50
  • Diseño de componente: Footer IV
    7:40
  • Variables para el diseño responsive
    3:34
  • Mejorando el componente Card con Slots
    7:10
  • Ajustes y mejoras finales de componentes
    6:17

Introducción al diseño de interacción

19 clases1h 19min

  • Introducción a la sección
    1:40
  • Section para componente y previsualización de interacción
    4:02
  • Diseño de interacción: On click en componente Checkbox
    6:39
  • Diseño de interacción: While hovering en componente Link
    5:11
  • Diseño de interacción: While hovering en componente Button
    3:44
  • Diseño de interacción: On Click en componente Collapse
    4:24
  • Diseño de interacción: While hovering en componente Card
    4:04
  • Página de prototipado
    3:11
  • Diseño de interacción: Open Overlay en Navbar Desktop
    5:07
  • Instanciar el Collapse como Slot en el Menu
    2:40
  • Introducción a las variables de contenido
    5:56
  • Configuración de la instancia del Menu para mobile
    4:29
  • Variables de contenido y ajustes en el Menu mobile
    2:44
  • Diseño de interacción: Open & Close Overlay en Menu mobile
    4:54
  • Creación de Frames para todas las páginas del proyecto
    3:22
  • Diseño de interacción: Navegación en Desktop I
    6:14
  • Diseño de interacción: Navegación en Desktop II
    5:06
  • Diseño de interacción: Navegación en Mobile I
    3:17
  • Diseño de interacción: Navegación en Mobile II
    2:28

Diseño del prototipo Web: Home

30 clases3h

  • Introducción a la sección
    1:53
  • Archivo de Figma descargable
    0:49
  • Importar el archivo
    2:09
  • Revisión del archivo y cómo usarlo
    4:17
  • Nuevo Sistema de Auto layout
    3:42
  • Layout grid para bento grid
    4:36
  • Diseño de la estructura de una página web
    11:29
  • Diseño página Home: Hero I
    9:28
  • Diseño página Home: Hero II
    5:32
  • Diseño de Sección: Logos
    6:53
  • Diseño de Sección: Proyectos I
    5:39
  • Diseño de Sección: Proyectos II
    7:51
  • Diseño de Sección: Proyectos III
    4:40
  • Diseño de Sección: Proyectos IV
    4:33
  • Diseño de Sección: Call To Action I
    5:12
  • Diseño de Sección: Call To Action II
    6:09
  • Diseño de Sección: Call To Action III
    4:49
  • Diseño de Sección: Servicios I
    3:50
  • Diseño de Sección: Servicios II
    7:44
  • La variable wrapper-max-600
    3:29
  • Diseño de Sección: Newsletter I
    7:09
  • Diseño de Sección: Newsletter II
    5:28
  • Diseño de Sección: Newsletter III
    5:44
  • Diseño de Componente: Modal I
    5:28
  • Diseño de Componente: Modal II
    5:19
  • Diseño de Componente: Modal III
    7:19
  • Diseño de Componente: Testimonial
    7:19
  • Diseño de sección interactiva: Testimonials
    8:40
  • Añadiendo el Footer en página Home
    10:21
  • Interacciones y ajustes finales de la página Home
    12:16

Diseño del prototipo Web: Project

15 clases1h 17min

  • Introducción a la Sección
    1:46
  • Diseño página Project: Hero
    8:05
  • Estructura del proyecto / caso de estudio
    3:22
  • Diseño página Proyecto: Sección descripción del proyecto
    6:11
  • Diseño de componente: Item I
    6:20
  • Diseño de componente: Item II
    4:24
  • Diseño de componente: Item III
    3:04
  • Diseño de sección: Desarrollo y proceso de trabajo
    7:00
  • Diseño de componente: Carousel
    9:37
  • Diseño de sección: El proyecto final
    5:36
  • Diseño de componente: Metric Card I
    3:49
  • Diseño de componente: Metric Card II
    4:12
  • Diseño de componente: Metric Card III
    3:44
  • Diseño página Project: Sección métricas y resultados
    7:14
  • Ajustes finales de la página de Proyecto
    2:54

Diseño del prototipo Web: Blog

6 clases32min

  • Introducción a la sección
    1:11
  • Diseño página Blog: Hero
    5:40
  • Diseño de Sección: Categorías
    5:47
  • Imágenes para artículos de Blog
    4:25
  • Diseño de sección: Artículos de Blog
    8:27
  • Diseño de interacción: Open Link
    6:07

Diseño del prototipo Web: Team

9 clases46min

  • Introducción a la sección
    1:22
  • Diseño página Team: Hero
    3:57
  • Diseño de componente: Card Profile I
    6:45
  • Diseño de componente: Card Profile II
    6:04
  • Diseño de página Team: Sección equipo I
    3:07
  • Diseño de página Team: Sección equipo II
    6:36
  • Profile Wrapper para actualizar componente de Modal
    5:26
  • Diseño de componente: Nueva variante del componente Modal
    5:47
  • Interacción del componente Modal y ajustes finales
    7:06

Diseño del prototipo Web: Contact

8 clases41min

  • Introducción a la sección
    1:29
  • Diseño página Contact: Formulario de contacto I
    5:45
  • Diseño página Contact: Formulario de contacto II
    6:16
  • Diseño página Contact: Formulario de contacto III
    3:49
  • Diseño página Contact: Insertar Mapa de ubicación
    4:10
  • Diseño página Contact: Sección de formulario y mapa
    8:50
  • Diseño página Contact: Sección datos de contacto
    5:46
  • Añadir Footer y ajustes finales en página Contact
    4:51

Presentación y Handoff

9 clases1h 6min

  • Introducción a la sección
    1:34
  • Ajustes y revisión final del diseño
    11:16
  • Presentación de la versión Desktop
    8.00
  • Presentación de la versión Mobile
    10:39
  • Guía de Variables de contenido
    4:13
  • Crear variables de contenido en grupo Project 1
    5:09
  • Aplicar variables de contenido en página Project
    8:57
  • Cómo documentar para el equipo de desarrollo
    8:43
  • El Dev Mode para equipo de desarrollo
    7:34

Contenido completo del curso

¿A quién está dirigido este curso?

Diseñadores/as UX/UI

Aprende a crear portafolios profesionales, prototipos navegables, wireframes y sistemas de diseño.

UX DesignUI DesignSistemas de DiseñoWireframesPrototipado

Desarrolladores/as

Mejora la comunicación con el área de diseño, permite inspeccionar estilos, obtener tokens, exportar assets y prototipos.

Front-EndDev ToolsComponentesHandoffDesign to Code

Product Managers

Comunicar ideas, crear flujos de usuario, prototipos de baja y alta fidelidad y coordinar equipos de diseño y desarrollo.

Product ManagementValidationRoadmappingUser Flows

Freelancers

Pueden diseñar su propio sitio web, material gráfico o interfaces sin contratar a un equipo completo.

Branding VisualWeb para negociosMVPLanding Pages

Profesionales de Marketing

Pueden crear landing pages, materiales visuales, layouts para campañas y prototipos sin herramientas complejas.

CreatividadCampañas Visual AssetsCreación de contenido

Instructor

Tu instructor experto en Figma

¡Hola! Soy Xavier, también conocido como Mokkapp, diseñador de productos digitales con más de 10 años de experiencia como fundador, diseñador, desarrollador y formador en UX/UI.

Me apasiona todo lo relacionado con la evolución del diseño digital. Por eso, comparto contigo los conocimientos, técnicas y herramientas que realmente pueden elevar tu forma de diseñar y potenciar tus proyectos. Mi objetivo es enseñarte, inspirarte y acompañarte para que puedas crear productos digitales más útiles, bellos y humanos.

UX/UI DesignDesign SystemsVibe CodingMCP'sIAFornt-End development

Testimonios y reseñas

Lo que opinan nuestros alumnos

Omar A.

Si de verdad quieres aprender a usar Figma, este curso es excelente.

Octubre 2025

Ana C.

Es mi primera vez usando esta herramienta y ¡ha sido una maravilla! mucho mejor de lo qué esperaba, ahora puedo decir que domino Figma, A seguir practicando.

Octubre 2025

José R.

Es súper claro, he descubierto tips muy buenos (ya tengo algo de experiencia con plataformas similares) y en poco tiempo explica lo más sustancial para entender Figma y sus particularidades. ¡Totalmente vale la pena!

Octubre 2025

Ismael B.

Gran curso! Está super bien explicado, a veces usa una lupa lo que facilita la visibilidad sin perder la amplitud del canvas. Yo que vengo del backend, me ha servido para poder prototipar frontend a un nivel avanzado. Muy contento!

Septiembre 2025

María P.

100% recomendado! Es el único curso que necesitas para dominar Figma. SOBRESALIENTE.

Septiembre 2025

Angel D.

Xavier explica de forma sencilla y va paso a paso, lo que hace que el aprendizaje sea muy claro y práctico. He aprendido a crear mis propios diseños y prototipos con Figma de manera fácil. Lo recomiendo a cualquiera que quiera iniciarse en diseño web.

Septiembre 2025

Preguntas Frecuentes

¿Necesito experiencia previa en diseño?

No. El curso está pensado para personas que empiezan desde cero. Te guiamos paso a paso por los conceptos básicos de diseño y el uso de Figma hasta que puedas crear tus primeras interfaces con confianza.

¿Figma es adecuado para principiantes?

¡Definitivamente! Figma es una herramienta ideal para personas que están dando sus primeros pasos en el diseño. Su interfaz intuitiva facilita que cualquier usuarie se sienta cómodx mientras aprende los conceptos básicos de UI/UX.

¿Qué herramientas necesito?

Solo necesitas una cuenta gratuita de Figma y un computador con conexión a internet. No hace falta instalar programas ni tener equipo avanzado.

¿Incluye clases prácticas?

Sí, la gran mayoría del curso es práctico. La idea es que sigas paso a paso trabajando en tu computadora al mismo tiempo que el instructor da las indicaciones

¿Puedo acceder al contenido después de terminar?

Sí. Tendrás acceso permanente para repasar lecciones, revisar ejemplos o volver a practicar cuando lo necesites.

¿Obtendré un certificado?

Sí. Al completar todas las lecciones y ejercicios recibirás un certificado que podrás añadir a tu portafolio o perfil profesional.

¡Empieza hoy mismo!

Aprovecha al máximo las herramientas de Figma para impulsar tu proceso de diseño de principio a fin.

+ 17 horas de contenido
209 lecciones
8 Archivos descargables
Certificado de finalización
Acceso de por vida
Audio en español
Subtítulos en español

¿Sois un equipo y queréis formación personalizada?

Os formamos según las necesidades de tu empresa o sector:
Contacta con nosotros