Como habrás notado, los sistemas de diseño son un tema candente en la industria en este momento. Según nuestro querido Brad Frost:
“Un sistema de diseño es básicamente la historia de cómo una organización construye un producto digital” ~ Brad Frost, Brad Frost en ¡Trabajemos juntos! en SmashingConf Barcelona 2017
Dentro de una empresa, un sistema de diseño mejora la colaboración entre los equipos de producto. Un problema común al que se enfrentan los equipos de diseño e ingeniería es compartir directrices de marca e información de interfaz. Lo que se diseña debe respetarse durante el desarrollo pero todos sabemos que no es tan sencillo. Los equipos de producto necesitan pautas para garantizar la coherencia de la marca. Aquí es donde entran en juego las guías de estilo y las bibliotecas de patrones.
Tomemos como ejemplo los “Nachos”: el antiguo sistema de diseño de Trello antes de que fuera adquirido por Atlassian. En la mayoría de las guías de estilo que encontramos, incluida ésta, a menudo encontramos una sección donde se definen los “estilos principales”. Por “estilos centrales” me refiero a piezas indivisibles de una interfaz como colores, tamaños de fuente, espacios, animaciones, sombras, índices z, puntos de interrupción, etc. Estas pequeñas y centrales piezas de información de la interfaz de usuario se utilizarán en varias plataformas durante el proceso. Concepción de un producto digital. Ellos se llaman: fichas de diseño.
ℹ️ Este concepto fue creado por Salesforce y su nombre proviene de Jina Anne.
Los tokens de diseño permiten a los equipos de productos colaborar mejor y garantizar la coherencia de la marca en cualquier plataforma. 👨🏻🏫🎉
Vista previa de la sección de colores de Nachos
Como puede imaginar, estos colores están destinados a usarse en todas las interfaces de Trello, independientemente de la plataforma en la que se encuentren. Todos ellos tienen sus propios requisitos y formatos de datos:
En la web podría usar RGB valores formateados en un .css fileEn iOS podría usar RGBA valores formateados como .json formatoA Android le puede gustar Hexadecimal de 8 dígitos (AARRGGBB) valores formateados como .xml.
Además, estas plataformas seguramente cambiarán y evolucionarán con el tiempo. Es por eso que mantenerlos todos individualmente es un proceso costoso y que requiere mucho tiempo para las empresas.
Como desarrollador front-end, asumo Los diseñadores son responsables de tomar decisiones de diseño.. Actualizar un color, un tamaño de fuente o cualquier “estilo central” y ver el resultado en cualquier plataforma debería ser sencillo para ellos. Lamentablemente, este no es el caso actualmente.
Digamos que es necesario actualizar un color. El flujo de trabajo actual se vería así:
1) El diseñador actualiza el color en la herramienta de diseño.
2) Esta actualización de diseño se comparte con el desarrollador.
3) El desarrollador actualiza el valor en el código.
4) El diseñador puede ver el resultado en un entorno de desarrollo.
Este flujo de trabajo adolece de varios inconvenientes:
El diseñador depende del desarrollador para ver el resultado de una actualización de estilo central. Esto ralentiza el proceso de diseño y entristece al diseñador. Actualizar un valor de color en el código base no requiere mucho tiempo cuando solo tienes que actualizar una única variable de estilo. Sin embargo, el tiempo necesario para realizar este cambio es menos tiempo para que un desarrollador trabaje en algo valioso para la empresa. El desarrollador también está triste 😢Dado que a menudo realizamos un seguimiento de las tareas del proyecto con un administrador de tareas, este cambio implicaría otro ticket con el que lidiar 😕Desde un punto de vista general, este tiempo perdido por la empresa también retrasa la salida al mercado de sus productos 😪
¡Este flujo de trabajo se puede optimizar! 💪
Cierra los ojos e imagina un mundo en el que un generador de tokens de diseño se integraría en las herramientas de diseño. El flujo de trabajo ideal sería este:
1) El diseñador actualizaría el color en la herramienta de diseño.
2) La herramienta de diseño actualiza los archivos de tokens de diseño según la plataforma de destino.
3) Los desarrolladores sólo tienen que recuperar o “extraer” archivos actualizados y utilizarlos en su proyecto.
Esto ahorraría mucho tiempo a los desarrolladores y garantizaría la coherencia en el diseño, haciendo felices a los diseñadores y propietarios de productos 😃
Como dije, este es un ideal flujo de trabajo Yo imaginé. Para existir, las herramientas de diseño y las herramientas de desarrollo deben poder comunicarse. Actualmente, la única forma que conozco de generar tokens de diseño es mediante Theo, un generador de tokens de diseño creado por Salesforce. Lo que hace Theo es simple: toma como entrada un formato de archivo independiente de la tecnología como JSON o YAML y genera archivos técnicos específicos para cada plataforma.