#183 Design Systems con Marta Conde
Vamos a descubrir las diferencias entre UI KIT y Design Systems de la mano de Marta Conde, especialista en Design Systems en ShowSafe.
Si alguna vez te has preguntado si lo que diseñaste en Figma es un verdadero Design System o simplemente un UI Kit bonito… este artículo es para ti.
También hablaremos de Design Tokens porque Marta viene a nuestra escuela de tribUX para explicarnos cómo trabajar con ellos.
Además, te contaré dónde y cuándo puedes aprender directamente con ella en su masterclass “Trabajar con Design Tokens”.
¿Que es un Design System y diferencia de un UI Kit?
Marta lo deja claro:
“Un UI Kit es una librería de componentes que generalmente usa solo la persona que lo crea. Un Design System es mucho más: es documentación, procesos, revisión continua y está pensado para que lo consuman muchos equipos distintos”.
UI Kit:
- Librería visual
- Pensado para uso propio
- Puede incluir iconos, botones, colores, tipografías
Design System:
- Librería + guías de uso + procesos
- Colaboración entre diseño y desarrollo
- Se revisa, se mantiene y se escala
- Tiene reglas, nomenclaturas y validaciones
Cuándo tiene sentido crear un Design System
Si trabajas en una startup pequeña o estás desarrollando un MVP, no necesitas complicarte. Un UI Kit puede ser más que suficiente.
Pero si tu producto crece, tienes varios equipos de diseño, desarrolladores y diferentes verticales… entonces sí necesitas un Design System.
“No se trata de tenerlo todo perfecto desde el inicio. Se trata de escalar con cabeza”, dice Marta.
¿Qué son los Design Tokens y por qué son importantes?
Aquí viene lo bueno.
“Un token expresa una decisión de diseño en un lenguaje común entre diseño y desarrollo”.
¿Recuerdas cuando jugabas a los Sims? Elegías el color de ojos, la ropa, el peinado… Pues los tokens son eso: decisiones visuales encapsuladas (como color primario, tamaño de fuente, espaciado) que luego se pueden sincronizar automáticamente entre Figma y el código.
Y para que esto funcione bien, se usan herramientas como Tokens Studio y archivos en formato JSON que viajan entre Figma y GitHub.
La masterclass que no te puedes perder: “Trabajar con Design Tokens”
¿Te gustaría aprender esto de forma práctica, paso a paso y con ejemplos reales?
Únete a tribUX para ver la masterclass de Marta Conde. Únete a tribUX.
En esta masterclass aprenderás:
- Qué son los tokens y cómo crearlos en Figma
- Cómo sincronizarlos con el código de forma automática
- Buenas prácticas de nomenclatura y estructura
- Casos reales de éxito (y errores que evitar)
¿Dónde? Dentro de la escuela online tribUX
La clase se encuentra grabada para miembros de la escuela.
No te la pierdas. Solo por esta clase ya vale la pena unirse.
¿Quién gestiona el Design System?
Aquí no hay debate: debe haber una persona responsable del sistema.
Marta lo explica así:
“Es una figura que está entre diseño y desarrollo. No aparece como un manager en el organigrama, pero sin ella, el sistema se vuelve un caos”.
Su labor es definir reglas, mantener la consistencia, revisar cambios y asegurarse de que todos los equipos usen los mismos componentes sin pisarse.
Ventajas de tener un Design System
- Ahorro de tiempo en diseño y desarrollo
- Consistencia visual en todo el producto
- Mejor colaboración entre equipos
- Escalabilidad sin fricciones
- Documentación clara y compartida
Desventajas (sí, también hay)
- Tiempo de implementación inicial
- Requiere mantenimiento constante
- No es recomendable para productos muy pequeños o en fase experimental
Pero como dice Marta: “Si puedes permitirte un perfil de Design System, es una inversión que se amortiza rápido”.
¿Te animas a trabajar con Design Tokens?
Después de todo esto, la pregunta es:
¿Sabrías profesionalizar tu sistema de diseño?
Si la respuesta es sí, la masterclass de Marta Conde es tu siguiente paso.
Accede desde tribUX y empieza a usar tokens como una persona experta.
Y si te ha gustado este artículo, suscríbete a esta newsletter de Gema para seguir aprendiendo sobre diseño UX.
Recursos
Sigue a Marta Conde en LinkedIn