Puedes aprender Figma, HTML y CSS de forma presencial en Madrid en academias y escuelas especializadas en diseño digital, no en cursos genéricos de informática. Lo importante no es el software suelto, sino el itinerario completo: UX/UI, maquetación web y una base de programación que te permita entender cómo funciona de verdad un producto digital, de principio a fin.
Que aprenderas con Figma: prototipado y diseno de interfaz
Con Figma aprenderás a diseñar interfaces reales, no solo pantallas bonitas: wireframes, sistemas de componentes, prototipos interactivos y flujos de usuario que se puedan testear antes de programar nada.
Figma se ha convertido en la herramienta estándar de la industria porque permite trabajar en tiempo real con otros diseñadores, compartir el archivo con un desarrollador sin exportar nada, y crear prototipos que simulan la navegación real de una app o una web. Un buen curso de Figma no se queda en "aprende los botones": tiene que enseñarte a pensar en sistemas de diseño (design systems), a organizar componentes reutilizables y a entender jerarquía visual, espaciado y tipografía aplicada a producto digital.
En un programa serio deberías tocar, como mínimo:
- Wireframing de baja y alta fidelidad para validar ideas rápido
- Auto layout y componentes para no rehacer el diseño cada vez que cambia el contenido
- Prototipado interactivo con transiciones y estados reales de la interfaz
- Design tokens y sistemas de diseño para trabajar en equipo sin perder coherencia
- Handoff con desarrollo, es decir, cómo entregar el diseño para que se programe bien
Si el curso no menciona ninguno de estos puntos, probablemente se queda en un tutorial de herramienta, no en formación de diseñador UX/UI de verdad. Empresas como IDEO, Fjord (parte de Accenture) o Ustwo trabajan así: Figma es el punto de partida, pero el valor está en el proceso de diseño detrás.
Que aprenderas con HTML y CSS: maquetacion y primeros pasos en desarrollo web
Con HTML y CSS aprenderás a construir la estructura y el estilo visual de una web desde cero, sin depender de plantillas cerradas ni de arrastrar bloques a ciegas.
HTML es el esqueleto: títulos, párrafos, imágenes, formularios, todo lo que da sentido semántico a una página. CSS es lo que la viste: colores, tipografías, espaciados, animaciones y, sobre todo, el diseño responsive que hace que una web se vea bien en el móvil, en la tablet y en el ordenador. Sin esto no hay maquetación web seria, por mucho Figma que sepas.
Un temario de HTML y CSS decente cubre:
- Semántica HTML5: estructurar el contenido correctamente, no solo "que se vea bien"
- Flexbox y Grid para maquetar layouts complejos sin trucos raros
- Diseño responsive con media queries, mobile-first
- WordPress como gestor de contenidos, porque en muchos entornos profesionales el front-end se integra ahí, no se empieza de cero siempre
- Buenas prácticas de rendimiento y accesibilidad, que cada vez pesan más en las ofertas de trabajo
Aquí es donde mucha gente que solo sabe Figma se queda corta: diseña interfaces preciosas que luego, al maquetarlas, no funcionan igual porque no entendía las limitaciones reales del navegador. Aprender HTML y CSS te da criterio para diseñar cosas que se puedan construir, no solo que se vean bien en el archivo.
Por que combinarlos con JavaScript, React y Node.js
Porque Figma y HTML/CSS te dan la base visual y estructural, pero JavaScript, React y Node.js son los que convierten esa base en un producto digital que reacciona, guarda datos y funciona como una aplicación real.
JavaScript añade interactividad: validar un formulario, mostrar un menú desplegable, actualizar contenido sin recargar la página. React, por su parte, es la librería que usan la mayoría de equipos de producto hoy para construir interfaces complejas de forma ordenada, con componentes reutilizables, algo que además conecta directamente con la lógica de Figma que ya conoces. Y Node.js es lo que permite que ese front-end hable con un servidor, una base de datos, una API.
No hace falta llegar a experto en las tres cosas para ser un buen diseñador UX/UI o un buen maquetador web. Pero entender cómo funcionan, aunque sea a nivel básico, marca la diferencia entre un perfil junior que solo sabe "hacer bonito" y un perfil que entiende el producto de punta a punta. Roles como Diseñador de producto digital, Desarrollador front-end o Desarrollador full stack se mueven exactamente en esta intersección: diseño, maquetación y lógica de programación trabajando juntos.
Dicho de otra forma: cuanto más entiendes de todo el proceso, más útil eres en cualquier equipo, y más rápido creces dentro de él.
Donde estudiarlo presencial en Madrid: que mirar en el temario
Lo primero que tienes que mirar en cualquier oferta presencial en Madrid es si el temario cubre el ciclo completo: diseño, maquetación y programación básica, con proyectos reales de por medio, no solo ejercicios sueltos.
Madrid tiene bastante oferta de cursos de Figma o de HTML y CSS por separado, muchos de ellos online con tutor a distancia disfrazados de "presencial híbrido". Antes de matricularte en cualquier sitio, pregunta esto sin miedo:
- ¿Las clases son 100% presenciales o hay módulos grabados? Hay academias que venden presencialidad y luego el 60% del contenido es vídeo.
- ¿Quién da las clases y de dónde viene? Un profesor que ha trabajado en un estudio real enseña de forma distinta a alguien que solo ha dado clases.
- ¿Se trabaja con proyectos reales o con ejercicios de manual? El portfolio se construye con proyectos, no con capturas de pantalla de un curso.
- ¿El programa mezcla diseño y desarrollo o solo diseño? Si solo enseñan Figma, vas a necesitar buscar otro sitio para HTML y CSS, y eso alarga y encarece todo el proceso.
- ¿Hay salida profesional real, con bolsa de empleo o prácticas? Pregunta por empresas donde han acabado trabajando antiguos alumnos, no por promesas genéricas.
Un buen indicador es también el tamaño de grupo. Con grupos reducidos el profesor puede revisar tu trabajo de verdad, no solo pasar diapositivas. Y en un sector tan práctico como el diseño UX/UI y el desarrollo web, eso importa más de lo que parece.
TRAZOS: Figma, HTML/CSS y programacion en el mismo itinerario en Chamberi
En TRAZOS, en el campus de Chamberí en Madrid, aprendes Figma, HTML y CSS, WordPress, JavaScript, React y Node.js dentro del mismo itinerario presencial, sin tener que ir saltando de academia en academia para completar tu formación.
El programa de Diseño UX/UI está pensado para que salgas sabiendo diseñar producto digital de verdad y entendiendo cómo se construye después ese diseño. No es un curso de "Figma en diez horas": es un itinerario donde diseñas, maquetas y programas lo básico para que tu trabajo tenga sentido de principio a fin, algo que en la industria se valora muchísimo más que solo saber manejar una herramienta.
Los profesores vienen de estudios y empresas reales: gente que ha trabajado en Ogilvy, La Factoría de Ideas, Danone, Electronic Arts o el Ministerio del Interior. Eso se nota en clase, porque no te explican teoría de libro, te cuentan cómo se trabaja realmente en un equipo de producto, qué pide un cliente, qué se descarta y por qué. Y algunos alumnos de TRAZOS ya trabajan en sitios como IFEMA Madrid, Sego Finance o Fiscalges Alternative, lo cual da una idea bastante clara de dónde puede llevarte este camino.
Además, el enfoque presencial en Chamberí tiene una ventaja que muchas veces se subestima: el feedback en directo. Puedes enseñar tu prototipo de Figma o tu maquetación en HTML y CSS y que el profesor te diga en el momento qué falla, por qué falla, y cómo se arregla. Eso, a distancia, casi nunca pasa con la misma rapidez.
Que proyectos y portfolio puedes construir con estas herramientas
Con Figma, HTML/CSS y programación básica puedes construir un portfolio con proyectos reales de diseño UX/UI, webs maquetadas desde cero y pequeñas aplicaciones interactivas, que es exactamente lo que piden en los procesos de selección de este sector.
Un buen portfolio para entrar como Diseñador UX/UI, Diseñador web o Maquetador web debería incluir, como mínimo:
- Un caso de estudio completo de producto digital: desde la investigación de usuario hasta el prototipo final en Figma, explicando decisiones, no solo mostrando pantallas
- Una web propia maquetada con HTML y CSS, responsive, que puedas enseñar funcionando en el navegador, no solo en capturas
- Un pequeño proyecto con JavaScript o React, aunque sea sencillo, que demuestre que entiendes lógica de interacción
- Un rediseño de una web o app existente, comparando el antes y el después, con criterio justificado
Este tipo de proyectos son precisamente los que se valoran en premios y certámenes del sector, como Awwwards, Webby Awards o CSS Design Awards, donde se reconoce tanto el diseño como la ejecución técnica. También hay otros reconocimientos dentro del entorno creativo, como Pentawards o The Rookies, que aunque nacen en otras disciplinas del diseño, marcan el nivel de exigencia al que aspira toda la industria creativa, UX/UI incluido.
La clave está en no quedarte en ejercicios de clase sueltos. Un portfolio potente se construye con dos o tres proyectos bien resueltos y contados de principio a fin, mejor que con diez capturas sin contexto. Eso es lo que mira un responsable de contratación, y es lo que marca la diferencia entre currículums parecidos.
Preguntas frecuentes
¿Puedo aprender Figma sin saber programar?
Sí, totalmente. Figma es una herramienta de diseño, no de programación, y puedes usarla para crear wireframes, prototipos e interfaces completas sin escribir una línea de código. Ahora bien, si además entiendes HTML, CSS y algo de JavaScript, vas a diseñar mejor porque sabrás qué es viable construir y qué no, y eso te hace mucho más valioso en un equipo real.
¿Es necesario aprender HTML y CSS si me dedico a UX/UI?
No es obligatorio, pero sí muy recomendable. Un diseñador UX/UI que entiende HTML y CSS diseña con criterio técnico: sabe por qué un layout es fácil o difícil de maquetar, entiende las limitaciones del navegador y se comunica mejor con el equipo de desarrollo. En procesos de selección, ese conocimiento suele marcar diferencia frente a perfiles que solo dominan la herramienta de diseño.
¿Cuanto tiempo se tarda en aprender Figma?
Lo básico de Figma, es decir, moverte por la interfaz, crear componentes simples y montar un prototipo sencillo, se puede aprender en pocas semanas de práctica constante. Pero dominarlo de verdad, con sistemas de diseño, auto layout avanzado y criterio de producto, lleva varios meses de formación estructurada con proyectos reales y feedback de profesionales del sector.
¿Que diferencia hay entre un curso suelto y una formacion completa de UX/UI/Web?
Un curso suelto te enseña una herramienta puntual, como Figma o HTML y CSS por separado, en pocas sesiones. Una formación completa, como la de TRAZOS, combina diseño UX/UI, maquetación web y programación básica (JavaScript, React, Node.js) en un itinerario con proyectos reales, portfolio final y contacto directo con profesionales que trabajan en el sector. La diferencia se nota sobre todo a la hora de buscar trabajo.
¿Que software necesito para empezar?
Para empezar en UX/UI y desarrollo web necesitas, como mínimo, Figma para diseño de interfaz, un editor de código como Visual Studio Code para HTML, CSS y JavaScript, y un navegador actualizado para probar tus maquetaciones. Más adelante, según el itinerario, se añaden herramientas como WordPress, React o Node.js, pero no hace falta tenerlas todas dominadas desde el primer día.
