¿Qué es un sistema de diseño (design system)?

Sistema de diseño: definición y componentes

Un sistema de diseño es más que una guía de estilo. La guía de estilo describe el aspecto de la marca: colores, tipografías, lenguaje visual. Un sistema de diseño la completa con componentes ya implementados en código, como botones, campos de formulario, tablas y mensajes, con reglas para espaciados y cuadrículas y con indicaciones de uso. Diseño y desarrollo recurren a la misma fuente, y no se reinventa cada botón.

La base son los design tokens: valores con nombre para colores, tamaños de letra, espaciados o redondeos. Cuando se cambia un token, el aspecto se actualiza en todas partes. A partir de los tokens se construyen los componentes y se definen con sus estados: normal, hover, foco, desactivado y error. Así pueden controlarse de forma uniforme y trazable el aspecto y el comportamiento de todas las piezas.

Ventajas y límites

La ganancia está en la coherencia y la rapidez: las páginas y funciones nuevas se montan con bloques ya existentes, en lugar de diseñarse y programarse desde cero cada vez. La accesibilidad, con contrastes suficientes, manejo con teclado y foco visible, puede resolverse bien una vez y vale entonces en todas partes. Los cambios en la imagen de marca también pueden hacerse de forma centralizada.

A ello se contraponen el esfuerzo y el mantenimiento: un sistema de diseño necesita responsables, reglas para las ampliaciones y documentación; de lo contrario, queda obsoleto. Para un sitio web pequeño con pocas páginas resulta desproporcionado; allí suele bastar un conjunto reducido de componentes y tokens. El esfuerzo debe guardar proporción con el número de aplicaciones y de personas implicadas.

• Design tokens: colores, tipografía, espaciados, sombras
• Biblioteca de componentes en la herramienta de diseño y en el código
• Cuadrícula de maquetación y reglas para vistas adaptables (responsive)
• Pautas de accesibilidad y de manejo
• Documentación con ejemplos y reglas de uso

Ejemplo práctico: sitio web, portal y app como un todo

Una pyme tiene un sitio web corporativo, un portal de clientes y una app para empleados, creados por distintos proveedores en momentos distintos. Los botones tienen aspecto diferente, los formularios se comportan de otro modo y el color de marca está en uso en tres variantes. Los nuevos empleados y proveedores necesitan que se les explique cada vez cuál es la variante correcta.

Tras introducir un sistema de diseño, las tres aplicaciones utilizan los mismos tokens y componentes. Un formulario nuevo se crea en horas, el manejo resulta familiar y un cambio posterior de color se hace en un solo lugar, en vez de en tres proyectos por separado. Las pruebas y las revisiones de accesibilidad también se hacen una sola vez por componente.

Aspectos que las empresas deben tener en cuenta

Empiece poco a poco: con los componentes que de verdad aparecen a menudo, no con una biblioteca hecha por adelantado. Defina quién decide los cambios y mantenga también la documentación. Los errores típicos son un sistema de diseño que solo existe en la herramienta de diseño y no en el código, una construcción sin accesibilidad y la falta de aceptación en el equipo.

Junto con la agencia asociada LOMA DESIGN, Nano Concepts desarrolla sistemas de diseño para sitios web, portales y apps, incluidos los componentes en la tecnología utilizada, por ejemplo React. Así su imagen se mantiene uniforme en todos los canales y proyectos. A largo plazo, esto ahorra coordinación y evita un crecimiento descontrolado.