Figma tutorial - Diseña una página web con Figma 2022
por Diego Velazquez
Diseña una página web en Figma practicando variables de color y texto, botones, componentes, Variants, Design System y grid, en 12 lecciones.
Recomendado, valoración editorial 3 de 5
verificado 2026-10-01 — sigue siendo gratis en Udemy
Empezar en UdemyRespuesta rápida
Curso gratis de Diseño de nivel principiante en Udemy impartido por Diego Velazquez (1 h 15 min). Nuestra valoración: 3/5, recomendado. Comprobamos que sigue siendo gratis el 1 de octubre de 2026.
- Veredicto
- 3/5 · Recomendado
- Para quién
- Personas que empiezan en UX/UI y quieren un primer proyecto práctico de página web en Figma.
- Nivel
- Principiante
- Duración
- 1 h 15 min · 12 lecciones
- Precio
- Gratis en Udemy
- Autor
- Diego Velazquez
- Plan sugerido
- 1 sem. · 2.5 h/sem.
- Verificado
- el 1 de octubre de 2026
Nuestro veredicto
Recomendado, valoración editorial 3 de 5Curso breve y práctico para aprender los fundamentos de Figma diseñando una página web. Es adecuado como primer proyecto, aunque la información publicada es escasa y el contenido es de 2021-2022, por lo que conviene contrastar la interfaz con la versión actual.
Puntos fuertes
- Proyecto práctico y acotado: diseñar una página web completa.
- Duración corta (75 minutos), fácil de completar en pocas sesiones.
- Cubre conceptos útiles de Figma como componentes, Variants y variables.
A tener en cuenta
- La versión indicada es «Actualizado 2021» y el título dice 2022; Figma cambia con frecuencia y la interfaz puede diferir.
- No hay desglose de lecciones, solo un capítulo, así que es difícil saber el orden exacto.
- La descripción no menciona ejercicios ni material descargable.
- Parte de la descripción es promocional y promete oportunidades laborales, algo que el curso no puede garantizar.
De qué trata
Curso de Udemy de 75 minutos y 12 lecciones en el que se diseña una página web en Figma como introducción al mundo UX/UI. Los datos muestran un único capítulo, «Diseño de página web - Actualizado 2021».
Según la descripción, se practican la creación de variables de color y de texto, botones, un Design System, máscaras, tipografías, imágenes, componentes reutilizables, Variants, plugins y un grid. Se presenta como una forma de conocer los conceptos básicos del diseño web en Figma.
- Variables de color y de texto
- Botones, componentes y Variants
- Creación de un Design System
- Grid, máscaras, tipografías e imágenes
- Uso de plugins en Figma
Para quién es este curso
- Personas que empiezan en UX/UI y quieren un primer proyecto práctico de página web en Figma.
- Quien ha abierto Figma pocas veces y busca entender variables, componentes y Design System con un ejemplo concreto.
Mejor busca otro si…
- Quien ya domina componentes, variants y Design System en Figma y busca contenido avanzado.
- Quien necesite una formación extensa de UX (investigación, prototipado, pruebas), pues el curso se centra en diseñar una página.
Antes de empezar
- La descripción lo presenta como curso de conceptos básicos; no indica requisitos previos concretos.
Qué sabrás hacer al terminar
- Diseñar una página web en Figma de principio a fin.
- Crear variables de color y de texto.
- Crear botones y componentes reutilizables, y usar Variants.
- Montar un Design System básico y un grid.
- Trabajar con máscaras, tipografías, imágenes y plugins.
Estructura del curso
- 01
Diseño de página web (única sección indicada)
Los datos solo muestran un capítulo, «Diseño de página web - Actualizado 2021», con 12 lecciones y 75 minutos. La descripción enumera los temas: variables de color y texto, botones, Design System, máscaras, tipografías, imágenes, componentes, Variants, plugins y grid.
Capítulos del vídeo
- 01Diseño de página web - Actualizado 2021
Plan de estudio sugerido
1 semana · unas 2,5 h por semana
- 1.Sesión 1: ve las primeras lecciones y practica la creación de variables de color y texto, tipografías y grid.
- 2.Sesión 2: ve las lecciones restantes y replica botones, componentes y Variants; termina con la página completa y prueba los plugins.
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Ten Figma abierto y replica cada paso; pausa tras cada lección para reproducir el resultado.
- Cuando se explique el Design System, crea tus propias variables de color y texto en lugar de copiar las del vídeo.
- Si algún menú no coincide con tu Figma actual, busca la función por nombre, ya que el curso data de 2021-2022.
- Al terminar, rediseña la página con tu propio contenido para consolidar componentes y Variants.
Antes y después de este curso
- Antes de este curso💻 Curso Figma desde CERO | Curso de Introducción a FigmaIntroducción a Figma desde cero, útil si aún no conoces la interfaz.
- AlternativaIntroducción a Figma 2026 - Nueva UIIntroducción a Figma con la interfaz nueva de 2026, más actual.
- Después de este cursoIntroducción teórica al Diseño UX/UIAporta la base teórica de UX/UI para complementar la práctica.
Cómo lo presenta Diego Velazquez
Aprende a diseñar una página web atractiva con Figma
En este curso aprenderás a crear una atractiva página web con Figma para adentrarte en el mundo del UX/UI. También podrás aprender a crear variables de color, de tipografía y la creación de componentes. Es el curso perfecto para conocer conceptos básicos de diseño web en Figma, una excelente herramienta de diseño. Podrás practicar los…
Extracto de la descripción original en Udemy.
Preguntas frecuentes
+¿Cuánto dura el curso?
Son 75 minutos repartidos en 12 lecciones. Con pausas y práctica, calcula unas 2 o 3 horas en total.
+¿Qué temas cubre?
Según la descripción: variables de color y texto, botones, Design System, máscaras, tipografías, imágenes, componentes, Variants, plugins y grid.
+¿Está actualizado?
El capítulo indica «Actualizado 2021» y el título menciona 2022. Figma ha cambiado desde entonces, así que algunas opciones pueden verse distintas.
+¿Hace falta experiencia previa?
La descripción lo plantea como curso de conceptos básicos de diseño web en Figma y no menciona requisitos previos.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en Udemy, y revisado según nuestro método. El contenido del curso es obra de Diego Velazquez; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Diseño
Creative Web Development with Three.js and Blender
Enseña a modelar una escena 3D en Blender y a llevarla a la web con Three.js, con raycaster, movimiento con GSAP y colisiones.
🔥Curso Completo de Edición de Video 2026 – Premiere Pro y After Effects Desde Cero a Experto +10 HR
Curso de edición de vídeo que recorre Premiere Pro y After Effects: capas, keyframes, máscaras, textos, cámara 3D y objetos GLB, con ejercicios prácticos de animación y montaje de un reel 3D.
Adobe Photoshop para principiantes - Segunda parte
Segunda parte de un curso de Photoshop: capas, tamaño y resolución, color, selecciones, retoque y creación de títulos en 21 lecciones.
AI & UX Ethics: decisiones con criterio humano
Enseña a usar IA en UX con criterio ético: riesgos, un framework para decidir qué automatizar y métricas para evaluar resultados en research, diseño y microcopy.