Recursos de Design Systems

En esta página reunimos los recursos que consideramos esenciales para cualquier persona que trabaje con design systems: desde quien está evaluando si su equipo necesita uno, hasta quien mantiene un sistema maduro en producción. La lista está curada a mano y la revisamos periódicamente.

Si buscas inspiración, visita también nuestra colección de más de 100 design systems y el glosario de términos.

# Herramientas de diseño

• Figma — El estándar de facto para diseñar y distribuir bibliotecas de componentes. Sus variables y modos permiten gestionar design tokens y theming directamente en el archivo de diseño.
• Tokens Studio — Plugin de Figma (y plataforma) para gestionar design tokens de forma avanzada: tokens semánticos, temas múltiples y sincronización con repositorios Git.
• Penpot — Alternativa open source a Figma, con soporte nativo de design tokens basado en el estándar del W3C. Interesante para equipos que necesitan self-hosting.

# Design tokens

• Style Dictionary — La herramienta de referencia para transformar design tokens a cualquier plataforma: CSS, iOS, Android, etc. Mantenida por la comunidad (originalmente de Amazon).
• W3C Design Tokens Community Group — El grupo que define el formato estándar de design tokens (DTCG). Su especificación es la base de la interoperabilidad entre herramientas.
• Terrazzo — Toolchain moderna para trabajar con tokens en formato DTCG.

# Documentación y desarrollo de componentes

• Storybook — El entorno más usado para desarrollar, documentar y testear componentes de UI de forma aislada. Imprescindible en la parte de código de un design system.
• Chromatic — Testing visual y revisión de componentes construido sobre Storybook. Detecta regresiones visuales en cada cambio.
• zeroheight — Plataforma para crear el sitio de documentación del design system conectando Figma, Storybook y tokens.
• Supernova — Alternativa a zeroheight: documentación, gestión de tokens y automatización de entrega a código.
• Knapsack — Plataforma que une diseño, código y documentación en una única fuente de la verdad.

# Libros recomendados

• Design Systems — Alla Kholmatova. El libro fundacional: cómo crear un lenguaje de diseño compartido y qué patrones de organización funcionan.
• Atomic Design — Brad Frost. La metodología (átomos, moléculas, organismos) que popularizó la forma de pensar en componentes. Disponible gratis online.
• Laying the Foundations — Andrew Couldwell. Guía práctica y directa para poner en marcha un design system desde cero.
• Design That Scales — Dan Mall. Cómo hacer que un design system sobreviva y aporte valor a largo plazo: adopción, gobernanza y modelo de equipo.
• Expressive Design Systems — Yesenia Perez-Cruz. Cómo mantener la expresividad de marca sin sacrificar la consistencia.

# Newsletters y blogs

• Design System University — Cursos, artículos y newsletter de Dan Mall, una de las voces más influyentes del sector.
• The Design System Guide — Guía paso a paso y recursos prácticos de Romina Kavcic.
• Design Systems (Figma) — Publicación de Figma con artículos y entrevistas sobre sistemas de diseño.
• Brad Frost — Blog — Artículos de referencia sobre atomic design, tokens y arquitectura de sistemas.
• Nathan Curtis — EightShapes — Artículos profundos sobre gobernanza, versionado y organización de equipos de design systems.

# Comunidades y podcasts

• Design Systems Slack — La comunidad internacional más grande dedicada a design systems.
• The Design System Podcast — Entrevistas con equipos que construyen y escalan sistemas en empresas reales.
• Into Design Systems — Conferencia online anual con talleres prácticos.
• Friends of Figma — Grupos locales, muchos con eventos en español.

# Galerías y referencias

• Nuestra colección de design systems — Más de 100 sistemas de empresas líderes con descripción en español y enlace oficial.
• Design Systems Repo — Directorio internacional de sistemas, artículos y charlas.
• Component Gallery — Componentes de decenas de design systems reales, organizados por tipo: útil para decidir nomenclatura y API de componentes.
• Design Tokens Repo — Recopilación exhaustiva de recursos sobre design tokens.

# Por dónde empezar

Si estás dando tus primeros pasos, te recomendamos este itinerario:

1. Lee ¿Qué es un design system? para asentar los conceptos.
2. Estudia 15 ejemplos de design systems analizados para ver qué hacen los mejores.
3. Sigue la guía para crear un design system paso a paso.
4. Si trabajas en una organización, lee design systems para empresas para justificar la inversión.
5. Consulta el glosario cuando encuentres términos nuevos.
6. Explora la colección para inspirarte en sistemas reales.

¿Echas en falta algún recurso? Escríbenos y lo valoramos para incluirlo.