FIGMA 2026 UX UI, de básico a experto, IA, HTML, CSS, VSC.

Da tus primeros pasos con confianza en Figma. En esta lección inicial, te familiarizarás con el layout principal, las áreas de trabajo y la lógica detrás de la interfaz de Figma para principiantes. Aprenderás a navegar, crear tu primer proyecto y configurar tu espacio para un flujo de diseño eficiente desde el minuto uno.

Ve más allá de lo básico y toma el control total de tu lienzo. Esta lección te enseña la estructura profesional de archivos en Figma, explorando a fondo la creación y gestión de Frames, la configuración de fondos y la organización jerárquica. Es la base para mantener tus diseños ordenados y escalables.

Domina el panel de Layers de Figma, la herramienta fundamental para mantener el control de tus diseños. Aprende a nombrar, agrupar, bloquear y reordenar capas de forma inteligente. Una gestión eficiente de capas en Figma es el secreto para trabajar en proyectos complejos y colaborar de manera efectiva.

Descubre el poder de los Frames en Figma. Aprende a crear frames para dispositivos específicos (iPhone, Desktop), a utilizar grids y layouts de forma avanzada, y a organizar múltiples pantallas en un mismo espacio. Esencial para el diseño de interfaces de usuario (UI) y experiencias (UX).

Desata tu creatividad visual con el panel de propiedades de diseño de Figma. En esta primera parte, dominarás la aplicación de fills (rellenos), strokes (bordes), efectos (sombras, desenfoques) y la creación de estilos de color y degradados. Aprende a darle identidad y atractivo visual a cualquier componente de tu interfaz.

Logra un diseño pixel-perfect y responsive con la segunda parte del panel de diseño. Profundizaremos en restricciones (constraints), auto layout (diseño automático), alineación precisa y distribución de objetos. Estas son las herramientas avanzadas de Figma para crear interfaces que se adapten de manera impecable a cualquier tamaño de pantalla.

Conviértete en un experto manipulando las herramientas básicas y avanzadas de Figma. Desde la Selección (V) y el Marco (F) hasta la Pluma (P) para crear iconos personalizados y las herramientas de forma (rectángulo, elipse, etc.). Aprende los atajos de teclado y técnicas para vectorizar y editar gráficos con fluidez profesional.

Domina los Frames (o Marcos), el elemento fundamental donde radica toda la organización en Figma. En esta lección, aprenderás a crear y configurar Frames para cualquier dispositivo móvil (iPhone, Android), escritorio o pantalla personalizada.

¿Te encuentras usando Frames y Secciones de forma intercambiable, sin estar seguro de cuál es la opción óptima? Esta confusión es común, pero usar la herramienta incorrecta puede ralentizar tu flujo, complicar la colaboración y generar archivos desorganizados. La diferencia no es meramente cosmética; cada una tiene un propósito estratégico distinto.

Esta lección elimina todas las dudas. Aprenderás la diferencia funcional y filosófica entre Frames y Secciones, y obtendrás un marco claro de decisión para seleccionar la herramienta correcta en cada situación, mejorando inmediatamente la estructura y claridad de tus proyectos.

Este taller está diseñado para principiantes. No necesitas experiencia previa en Figma, ni en diseño digital, ni en herramientas de prototipado. Solo necesitas curiosidad y ganas de aprender.

En algunos minutos de trabajo guiado, recorreremos cada rincón de la interfaz de Figma, entenderemos para qué sirve cada herramienta, y crearemos nuestro primer diseño funcional.

¿Sabías que el 80% del diseño web es tipografía? Comienza con pie firme dominando los fundamentos esenciales de la tipografía en Figma. En esta lección aprenderás a elegir y emparejar fuentes (Font Pairing), establecer una jerarquía visual clara con tamaños y pesos, y lo más importante: crear y usar Text Styles. Este es el primer paso para construir un sistema tipográfico coherente que dará profesionalismo y legibilidad a todos tus proyectos de UI/UX.

Lleva tus textos del plano al espectacular. Esta lección te revela cómo aplicar efectos profesionales de tipografía en Figma para crear énfasis, profundidad y personalidad. Aprenderás a usar sombras internas y externas, gradientes sobre texto, strokes creativos y efectos de superposición de manera no destructiva. Descubre cómo estos efectos tipográficos avanzados pueden convertirse en la clave para destacar headers, crear atmósferas únicas y guiar la atención del usuario en tus diseños.

La excelencia en diseño digital se mide por el detalle tipográfico. En esta lección de maestría, aprenderás técnicas profesionales de composición tipográfica en Figma. Integrarás principios como el contraste, la alineación óptica y el espaciado inteligente (kerning, leading) para crear interfaces no solo bellas, sino increíblemente legibles y usables. Transforma bloques de texto en experiencias de lectura fluidas y lleva tu ojo de diseñador al siguiente nivel.

Da vida a tus ideas desde el primer trazo. En esta introducción amigable, descubrirás el panel de herramientas de dibujo vectorial de Figma. Aprenderás a usar las herramientas de Forma (Rectángulo, Elipse, Línea) y darás tus primeros pasos con la poderosa herramienta Pluma (Pen Tool). Es el inicio perfecto para crear iconos, ilustraciones simples y componentes gráficos personalizados sin salir de tu espacio de diseño.

Eleva la calidad de tus interfaces con gráficos personalizados. Más que una lección de herramientas, es una guía sobre cómo aplicar el dibujo vectorial avanzado al diseño UI/UX práctico. Aprenderás a crear sets de iconos cohesionados, simplificar formas complejas y utilizar atajos y plugins que aceleran tu flujo de trabajo vectorial. Descubre cómo integrar ilustraciones y gráficos únicos que fortalecen la identidad visual de tus proyectos digitales.

¿Tus diseños se ven "descuadrados"? Domina el principio que separa al aficionado del profesional. En esta lección esencial, aprenderás qué son los Grids en diseño UI y por qué son indispensables. Configurarás tu primer Layout Grid en Figma, entenderás los conceptos de márgenes (margin), gutter (canal) y columnas, y aplicarás esta estructura invisible para crear composiciones visualmente estables y armónicas desde tu primer proyecto.

Avanza hacia un nivel profesional. Descubre cómo utilizar grids complejos y superpuestos para resolver desafíos reales de diseño. Aprenderás a crear y combinar Column Grids, Row Grids y Baseline Grids para estructurar dashboards, apps móviles y layouts editoriales. Esta lección te enseñará a planificar diseños responsive desde el inicio, asegurando coherencia en cualquier breakpoint y elevando la calidad técnica de tus entregables.

¿Alguna vez has diseñado una card o un panel donde el texto desborda y rompe todo el layout? ¿O un dashboard donde las columnas se ven desiguales y desordenadas porque el contenido es muy variable? Este problema común tiene su raíz en una decisión fundamental de diseño de grids que muchos pasan por alto.

En este ejercicio práctico, dominarás las dos estrategias opuestas (y complementarias) para manejar la relación entre las celdas de un grid y el contenido que vive dentro de ellas. Entenderás cuándo, cómo y por qué elegir una sobre la otra para crear interfaces que sean funcionales.

¿Tus columnas se ven rígidas y no se adaptan correctamente cuando cambias el tamaño del contenedor? ¿Has visto las siglas "fr" en CSS y en Figma pero no sabes cómo aprovecharlas para crear layouts profesionales y fluidos?

Esta primera parte te introduce al poder de las unidades FR (fracciones) en Figma, el sistema que utilizan los diseñadores y desarrolladores frontend para crear grids flexibles, proporcionales y verdaderamente adaptables.

¿Tus columnas se ven rígidas y no se adaptan correctamente cuando cambias el tamaño del contenedor? ¿Has visto las siglas "fr" en CSS y en Figma pero no sabes cómo aprovecharlas para crear layouts profesionales y fluidos?

Esta primera parte te introduce al poder de las unidades FR (fracciones) en Figma, el sistema que utilizan los diseñadores y desarrolladores frontend para crear grids flexibles, proporcionales y verdaderamente adaptables.

Cierra la brecha entre el diseño y el desarrollo. Esta lección te enseña la aplicación maestra del grid de columnas, mostrándote cómo alinear y ajustar cada elemento de tu interfaz a un sistema predefinido (como uno de 12 columnas). Aprenderás técnicas para tomar decisiones de anchos, espaciados y márgenes que se traduzcan directamente en CSS limpio y eficiente, facilitando la handoff y garantizando que tu diseño visual se implemente con fidelidad absoluta.

¿Quieres diseñar 10 veces más rápido y con resultados profesionales? Los plugins de Figma son el secreto mejor guardado de los diseñadores de élite. En esta lección, no solo aprenderás cómo instalar y usar plugins, sino que te revelaremos una curada selección de los plugins imprescindibles para automatizar tareas repetitivas, generar contenido realista (fotos, avatares, íconos), mejorar tipografías, crear accesibilidad y mucho más. Transforma Figma en tu propia herramienta de diseño personalizada y potencia tu flujo de trabajo como nunca antes.

Una interfaz sin imágenes es como un escenario vacío. Domina el arte de utilizar imágenes de alta calidad en Figma para crear diseños UI/UX convincentes, realistas y con contexto. En esta lección, irás más allá de arrastrar y soltar: aprenderás a importar, recortar, enmascarar y optimizar recursos visuales, a utilizar herramientas nativas de edición (como ajustes de color y efectos), y a implementar técnicas avanzadas como la creación de mockups realistas directamente en Figma. Descubre cómo gestionar una biblioteca de imágenes eficiente y eleva el impacto visual de cada uno de tus proyectos.

Olvídate de alinear elementos uno por uno. Auto Layout es la revolución que hace que tus diseños se adapten de forma inteligente. En esta lección fundamental, descubrirás qué es Auto Layout, por qué es la característica más importante de Figma para UI y cómo aplicarlo a cualquier frame o componente. Sentarás las bases para crear interfaces que se redimensionan, reordenan y mantienen perfectamente alineadas de forma automática.

Toma el control total del espacio en tus componentes. Profundiza en el corazón de Auto Layout dominando los modos de distribución Horizontal y Vertical y las propiedades de espaciado (spacing). Aprenderás a elegir entre "Packed" (empaquetado) y "Space between" (espacio entre) para lograr el comportamiento exacto que necesitas, ya sea para una barra de navegación, una lista o un grid de tarjetas. La clave para componentes ordenados y predecibles está aquí.

La diferencia del diseño está en los detalles, y en UI, esos detalles son el padding y los márgenes. Esta lección te enseña a dominar el espacio interno (padding) y externo (margen) de tus contenedores con Auto Layout. Aprenderás a usar valores fijos, porcentuales e incluso a combinar diferentes paddings en cada lado para crear componentes visualmente equilibrados, con la respiración perfecta y listos para integrarse en cualquier interfaz compleja.

¿Quieres que un botón se expanda con el texto o que una imagen ocupe un espacio fijo? Esta lección resuelve el misterio de "Hug Contents" (abrazar el contenido) y "Fill Container" (rellenar contenedor). Aprenderás a configurar el comportamiento de cada elemento hijo dentro de un Auto Layout para controlar si se redimensionan, se fijan o fluyen. Es el conocimiento avanzado que te permite construir componentes verdaderamente dinámicos y flexibles.

Consolida todo tu conocimiento en un caso del mundo real. En este ejercicio guiado paso a paso, construirás una tarjeta de perfil de red social compleja y completamente responsive. Aplicarás Auto Layout anidado, manejarás imágenes con diferentes ratios, textosh de longitud variable y botones que se adaptan. Al final, tendrás un componente maestro reutilizable y escalable para tu portafolio, demostrando una habilidad profesional clave en diseño de UI moderna.

Esta extensión gratuita te permite definir breakpoints precisos para tus diseños y modificar el tamaño del texto en cada dispositivo (móvil, tablet, desktop) desde un solo lugar.

Auto Layout es, sin duda, una de las funciones más poderosas de Figma, pero también una de las que más dolores de cabeza causa al principio. La buena noticia es que es lógica. Y una vez que entiendes esa lógica, todo empieza a tener sentido.

Este taller está diseñado para principiantes absolutos en Auto Layout. No necesitas experiencia previa con esta función, solo conocer lo básico de Figma (crear frames, formas y textos). Desglosaremos cada aspecto del comportamiento de Auto Layout para que pases de evitarlo a usarlo con confianza en cada proyecto.

Deja atrás el diseño desorganizado y duplicado. En esta lección fundamental, aprenderás a crear Componentes en Figma, la herramienta que revolucionará tu flujo de trabajo. Entenderás la relación entre Componente Principal (Master) e Instancias, y transformarás elementos comunes (como botones o tarjetas) en activos reutilizables. Este es el primer paso decisivo para construir una biblioteca de diseño coherente, garantizar la consistencia visual en proyectos grandes y ahorrar horas de trabajo manual.

Aprende a crear componentes dinámicos en Figma con Variantes y Propiedades. Transforma botones, inputs y cards en elementos inteligentes que cambian de estado, icono y contenido desde el panel de diseño.

Tu sistema de diseño cobra vida. Esta lección te enseña a crear prototipos de alta fidelidad conectando las variantes de tus componentes. Irás más allá de transiciones entre pantallas para simular microinteracciones realistas directamente en tus elementos de UI: un menú que se despliega, un acordeón que se expande, o un botón que cambia de estado al hacer clic. Aprenderás a usar disparadores (triggers) como 'On Click' y 'While Hovering' sobre instancias de componentes, unificando tu sistema de diseño con la experiencia de usuario interactiva.

Ve más allá del recorte básico. Aprende técnicas avanzadas de máscaras en Figma para crear composiciones visuales impactantes: avatares, texto con imágenes, efectos de superposición y más.