Introducción a Design Systems con Figma
Un curso de Javier CuelloDiseñador de UX
Un curso de Javier Cuello, Diseñador de UX
Aprende a crear sistemas de diseño que respondan a las necesidades de tus usuarios
Detrás de cada interfaz hay una serie de detalles aparentemente invisibles que pueden determinar la dirección de tu marca, empresa o producto. Al incorporar las herramientas de Design Systems en tu proyecto, podrás asegurarte de que tu interfaz sea compatible entre todos los miembros de tu equipo y que funcione de manera intuitiva.
En este curso, Javier “Simón” Cuello, diseñador especializado en experiencias de usuario, te ayudará a construir la interfaz de un sitio web, de forma organizada, coherente y consistente, que satisfaga las necesidades reales de tus usuarios y clientes.
Te recomendamos que también consultes los otros cursos de Javier en Domestika: Diseño de interfaces con Sketch y Diseña una App deliciosa.
¿Qué aprenderás en este curso online?
24 lecciones & 39 recursos adicionales
¿Qué haremos en el curso?
4 minutos, 34 segundos
Beneficios para ti y tu equipo de trabajo
7 minutos, 48 segundos
Partes de un sistema
6 minutos, 24 segundos
Identificar el contexto
7 minutos, 1 segundo
Pensando los principios de diseño
7 minutos, 45 segundos
Style guide 1
13 minutos, 49 segundos
¿Qué incluye este curso?
Comenzarás este curso conociendo a Javier, sus proyectos e influencias a lo largo de su carrera, así como una introducción a los principales conceptos de Design Systems.
Luego, descubrirás los beneficios de Design Systems para ti y tu equipo de trabajo, y verás todas las partes que componen un sistema, incluyendo: los principios de tu diseño, la guía de estilo, los elementos sueltos y componentes de la interfaz, el repositorio del código y la documentación.
Javier te enseñará a identificar el propósito de tu sistema según el contexto del producto y te mostrará cómo utilizar los criterios que guían tu diseño para establecer las estrategias de tu proyecto. Te ayudará a crear una guía de estilo definitiva para tu interfaz.
¡Ponte a trabajar! Usando el software Figma, diseñarás los elementos sueltos, componentes, patrones y prototipos de la pantalla principal en diferentes formatos.
Para concluir, trabajarás con los elementos de comunicación y colaboración para que tu sistema de diseño tenga una evolución controlada y respaldada por todos los miembros del equipo.
Javier te enseñará sobre la importancia de los Design Tokens y cómo documentar la evolución de tu sistema. Te mostrará cómo diferenciar un trabajo en progreso de uno ya completado y te aconsejará sobre cómo trabajar con los diferentes perfiles dentro de un equipo.
Software y herramientas recomendados para este curso
¿Cuál es el proyecto del curso?
Diseñarás la página principal de un sitio web de viajes, en 3 tamaños diferentes.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A diseñadores de interfaces que quieran construir un diseño organizado, coherente y consistente para sitios web y aplicaciones.
Requisitos y materiales
Deberás tener conocimientos básicos de Figma, incluida la creación de estilos, componentes y funciones de Auto Layout, así como familiaridad con el diseño de interfaces.
En cuanto a los materiales, necesitarás un ordenador con el software Figma instalado. Este curso se creó con Figma 116.3.6. Si dispones de una versión más reciente, podrás seguir los contenidos sin ningún problema.
Opiniones
- hace 26 días
very nice overview and introduction to design systems. so far so good.
- hace 2 meses
Até o momento, muito interessante. Vários insights interessantes e pontos de atencao negligenciados muitas vezes.
- hace 3 meses
Il corso offre una panoramica abbastanza completa. Purtroppo però la traduzione audio in italiano (e di conseguenza i sottotitoli, che corrispondono perfettamente alla traduzione audio) è davvero pessima. Ci sono troncamenti di frasi e parole/traduzioni insensate che rendono dei passaggi pressoché incomprensibili. Questo compromette notevolmente la qualità del corso per chi ne usufruisce in altra lingua.
- hace 5 meses
Very insightful!
- hace 8 meses
Un curso bastante completo, me sirvió para reafirmar mis conocimientos en DS. Lo recomiendo mucho si estas empezando en el mundo de los sistemas de diseño.
Algo que se ve reflejado en su trabajo es la preocupación constante de mejorar en detalles aparentemente invisibles, pero que permiten que un proyecto digital brille a nivel de experiencia de usuario.
Contenidos
- U1
Introducción
- Presentación
- Influencias
- ¿Qué haremos en el curso?
- U2
Design Systems
- Beneficios para ti y tu equipo de trabajo
- Partes de un sistema
- U3
Las bases de tu design system
- Identificar el contexto
- Pensando los principios de diseño
- Style guide 1
- Style guide 2
- U4
Diseñando el sistema
- Elementos 1
- Elementos 2
- Elementos 3
- Diseño de componentes 1
- Diseño de componentes 2
- Diseño de componentes 3
- Diseño de componentes 4
- Componentes adicionales
- Patterns
- Pantallas 1
- Pantallas 2
- U5
Comunicación y colaboración
- Design tokens
- Zeroheight: cómo documentar el sistema
- Cambios y actualizaciones
- Equipos de trabajo
- PF
Proyecto final
- Introducción a Design Systems con Figma
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
Un design system es un conjunto de componentes, guías y patrones que aseguran consistencia y eficiencia en productos digitales. Facilita la colaboración, reduce errores y agiliza el desarrollo, siendo clave para equipos que buscan coherencia visual y funcional.
Sí, el curso está orientado a personas con conocimientos previos en diseño, idealmente en nivel intermedio, que desean profundizar en la creación y gestión de design systems para productos digitales.
Es recomendable tener experiencia básica en diseño digital y manejo de herramientas como Figma. Conocimientos sobre componentes, interfaces y principios de diseño ayudarán a aprovechar mejor los contenidos.
Aprenderás a crear y gestionar design systems, definir componentes reutilizables, documentar principios de diseño, optimizar flujos de trabajo, y mantener la coherencia visual en equipos y productos digitales.
El curso enseña a aplicar los principios de Dieter Rams para lograr interfaces funcionales, atemporales y minimalistas, enfocando la solución de problemas en la simplicidad y la combinación equilibrada de forma y función.
Se utilizan principalmente Figma para diseño y creación de componentes, y ZeroHeight para documentar guías de estilo y principios, facilitando la colaboración y acceso a la información del sistema.
Sí, aprenderás a estructurar y documentar componentes, principios y guías de estilo utilizando herramientas colaborativas, asegurando la correcta adopción y mantenimiento del sistema por todo el equipo.