Organización de un design system

Hoy te hablaré de la organización de un design system poniendo como ejemplo el proyecto que usé para explicar cuáles son las tareas que realizo durante la construcción del mismo y la documentación que preparo para cada uno de sus componentes.

Aunque lo estoy construyendo en Figma los consejos que voy a compartir los puedes aplicar en otras herramientas de diseño UX y UI como Sketch, Penpot, etc.

¿Cómo organizar un sistema de diseño?

La organización del design system es muy simple, está inspirada en la estructura de componentes que usa Storybook.

Utiliza las páginas de Figma, las que tienes en la pestaña Layers ubicada en el sidebar izquierdo de la aplicación.

La estructura de páginas proporciona al usuario una navegación sencilla y rápida.

Uno de los product designers del equipo me mostró el sistema de diseño de una empresa afincada en el norte de Europa y quedé automáticamente convencido.

Me quedé con la estructura en la cabeza y unas semanas después de comenzar a diseñar con los átomos la apliqué al archivo.

A continuación te diré cuáles son las páginas que la componen.

Portada

La primera página que encontramos contiene la portada, un cover basado en un frame de 1600 por 900 píxeles.

En su interior tenemos una imagen y muy poca información que de un vistazo deja claro que se trata de un design system profesional, que se puede implementar en proyectos de un tamaño considerable.

Guías de uso

Esta página está pensada para los usuarios que acaban de aterrizar en el design system.

En cuatro tarjetas basadas en frames con texto y capturas comparto información sobre:

• Uso de componentes
• Convenciones y reglas de color
• Colores del producto
• Tipografía

En cada tarjeta añado enlaces a otras páginas del sistema de diseño, a páginas de Notion, documentos de FigJam, Google Drive, etc.

Creación y desarrollo de componentes

Apoyándome en tarjetas conectadas entre si, explico gráficamente cómo es el proceso de creación y desarrollo de componentes.

El flujo contiene muchos de los pasos que detallé en el artículo Las tareas de un design system.

Eficiencia, Agilidad y Calidad

Es el apartado más “poético” de todo el sistema de diseño.

El contenido de esta página lo redactó el propio equipo de product designers y diseñadores UX y UI.

Mi función sólo fue la de hacer clara y bonita toda la información sobre la innovación, la rentabilidad, los objetivos y resultados, la agilidad y la calidad que la empresa alcanzará utilizando cada una de las partes del sistema de diseño.

Estilos

Son cinco páginas con información técnica sobre:

• Colors
• Typography
• Icons
• Shadows
• Grids
• Templates

Las páginas dentro del bloque Estilos y las que enumero en el siguiente (Componentes) tienen mucha de la información comentada en el artículo donde explico cómo documentar componentes en Figma.

Componentes

La lista actual de componentes te la pego aquí debajo:

• Accordion
• Alert
• Avatar
• Breadcrumb
• Button
• Bottom sheet
• Carousel
• Checkbox
• Chip
• Combobox
• Dropdown
• Footer
• Header
• Loader
• Menu item
• Modal
• Pagination
• Popover
• Progress bar
• Radio button
• Search bar
• Select
• Snackbar
• Switch
• Table
• Tabs
• Tag
• Textarea
• Text input
• Text input group
• Tooltip

En próximos días añadiré más elementos.

Separadores

Para separar los distintos bloques de páginas utilizo, hoy por hoy, páginas que contienen el nombre “—”.

Es un “hack” que no me convence demasiado, pero mientras que Figma no permita añadir un separador de páginas o aplicar jerarquías entre ellas, me parece la mejor solución.

Cuando llegue el momento siempre podré eliminar las páginas que uso como separador y optimizar la organización para que el design system quede mucho mejor.

Tokens de diseño

Quiero destacar que parte de la información del sistema de diseño la guardo en las tablas de Variables de Figma o tokens de diseño.

Estoy hablando de los colores, los espaciados, los radius, etc.

Antes de terminar me gustaría saber qué similitudes o diferencias tiene la organización de este design system con el tuyo.

Si tienes algo que aportar deja un comentario por favor.

Recuerda que tu aporte me ayudará a mí y a todas las demás personas que lean este contenido.

Muchas gracias.