Lanzamiento de sistemas de diseño

Entrega de salidas interconectadas a los adoptantes a lo largo del tiempo

N.º 1 de 6 de la serie Sistemas de diseño de lanzamiento:
Salidas | Cadencia | Versiones | Ruptura | Dependencias | Proceso

Las empresas se dan cuenta del valor de un sistema de diseño cuando adoptan productos que utilizan un sistema para crear y enviar experiencias que utilizan sus clientes. Como parte de esa cadena de valor, el sistema lanza funciones con el tiempo. Esto pone el sistema en manos de sus clientes: diseñadores e ingenieros que hacen su trabajo.

Los equipos de sistemas fuertes se toman en serio los lanzamientos. No se ven a sí mismos lanzando solo el código de la biblioteca de componentes. En cambio, ofrecen muchos más resultados: tokens de diseño, documentación, activos de diseño y otros recursos.

Esta serie describe muchas facetas de la liberación de sistemas de diseño. Comienza definiendo las numerosas salidas de un sistema y dónde se entregan. Los artículos posteriores cubren temas de cadencia, versiones, cambios de última hora, dependencias y un enfoque paso a paso.

Estas historias reflejan lo que aprendí lanzando sistemas que trabajan con equipos como Discovery Education, Morningstar, Target y REI. Son elevados por los conocimientos de colegas de Salesforce, Adobe, Atlassian, Shopify y Financial Times. ¡Gracias por compartir amablemente su tiempo y prácticas!

Salidas: ¿Qué se publica?

Los programas de sistemas de diseño lanzan muchos tipos de salidas, no solo código. Como resultado, un sistema debe diferenciar y comunicar esta gama de resultados versionados a desarrolladores, diseñadores y otros clientes.

Código, la fuente de la verdad

La mayoría de los sistemas ofrece una única fuente de verdad del código de la capa de presentación como:

  • Biblioteca de componentes UI como HTML Markup y CSS. A menudo denominado "CSS", el consumo de este paquete se basa en el uso o la compilación de CSS como una línea de base de estilo visual coherente junto con la reutilización de fragmentos de HTML.

y / o ...

  • Biblioteca de componentes de IU como Javascript: muchos sistemas envuelven HTML y CSS con JavaScript para fortalecer la lógica, encapsular el estilo y facilitar la integración y el mantenimiento de forma más directa en un marco de elección. Si bien la mayoría de las bibliotecas se dirigen a un marco específico (React, Vue, Ember, Angular, ...), las señales de la industria sugieren un cambio para crear componentes web para todos los marcos. ¿Mis últimos seis esfuerzos del sistema? Más tarde 2017: Vanilla HTML, Vanilla HTML. Principios de 2018: React, Vue. Más tarde 2018: componentes web, componentes web.

Además, se pueden lanzar otros productos destacados por separado:

  • Tokens de diseño que establecen un estilo visual a través de pares de valor de propiedad semánticamente significativos. Los tokens son variables disponibles en muchos formatos para su uso en plataformas (web, iOS, Android), preprocesadores (Sass y LESS) y marcos (como React). Algunos sistemas administran tokens en un repositorio separado del código del componente UI. Como resultado, su biblioteca, junto con otras implementaciones, también puede depender del token como paquete.
  • Aplicaciones / sitios de demostración como entorno con ejemplos de páginas creados con la biblioteca de componentes. ¡La demostración también es para tutoriales y creación rápida de prototipos, incluso de diseñadores!
  • Componentes multiplataforma adecuados para iOS, Android y Windows.

Activos de diseño

La mayoría de los equipos limitan la comprensión de lo que lanzan al simple "lanzamos código". Les abre los ojos darse cuenta de que publican muchas otras herramientas que cambian con el tiempo. Incluyen:

  • Diseñe kits de herramientas como archivos de plantilla y bibliotecas de símbolos que se ofrecen en software de diseño. Hoy, casi siempre Sketch. ¿Mañana, Figma, Invision Studio y otros competidores emergentes?
  • Fuentes, iconos e incluso conjuntos de imágenes de Origami debido al papel que a menudo se espera del sistema en la distribución y versionado de dichas bibliotecas.
  • Otros recursos de diseño como ilustración y muestras de color de archivos ASE / CLR como trampolín para obras de arte a medida. Estas colecciones cambian lentamente, menos formalmente, y a través de contribuciones de miembros de la comunidad que no forman parte del equipo central del sistema. Sin embargo, desde la perspectiva del cliente y las comunicaciones del sistema, es parte del sistema.

Sitio de documentación

Los sistemas de diseño necesitan un hogar, un lugar que todos sepan que pueden encontrar un camino hacia todo lo que tendrá lo último y lo mejor. Alojado en una URL memorable, a menudo se construye con componentes de interfaz de usuario específicos para su misión.

  • Los sitios de documentación describen características (como un botón), incorporan nuevos usuarios y activan procesos como obtener ayuda o contribuir. Los equipos crean sitios con mayor frecuencia utilizando un generador de sitios estáticos o con menos frecuencia con un sistema de administración de contenido.
  • Componentes de la documentación: código, ejemplo, par, no hacer, código hexadecimal, explorador de componentes, dependen de la biblioteca de componentes de la interfaz de usuario y, por lo general, solo sirven al sitio del documento. Dichos componentes pueden versionarse con el sitio de documentación o como una tercera biblioteca versionada por separado en relación con el documento y los componentes de la IU entre los que descansan.

Destinos: ¿a dónde va?

Al distribuir código y activos de diseño, es vital ofrecer el código de manera más fácil para los ingenieros que lo adoptan. Esto significa que algunos sistemas deben ofrecer opciones entre muchas opciones, mientras que otros pueden confiar en una sola opción como estándar organizacional.

Para el código

  • MEJOR: Registros como npmjs (o una contraparte interna como el nexo de Sonatype) que proporcionan acceso y administración de paquetes de código liberados. Luego, los desarrolladores usan herramientas como bower, npm, yarn, webpack y babel para integrar y actualizar ese código sin problemas en sus entornos.
  • MEJOR: activos alojados en CDN para enlaces directos a estilo y script versionados, así como fuentes e íconos que cambian más lentamente.
  • SOLO BIEN: Acceso al repositorio a Github, Bitbucket o similares para clonar, bifurcar o compilar, usar y tal vez, eventualmente, contribuir.
  • SI ES NECESARIO: Descargas directas de código, generalmente del "archivo ZIP" de los activos del sistema compilados o no desde el sitio del documento para uso local y / o integración manual en un repositorio separado.

Bootstrap y Material Design Lite son ejemplos que se lanzan a más de 2 destinos.

Para kits de herramientas de diseño

  • MEJOR: Crear nuevo como una ruta sincronizada e incrustada en el menú de una herramienta de diseño para crear una nueva instancia a partir de una plantilla.
  • MEJOR: Versionado y distribuido utilizando software de gestión de activos de diseño basado en permisos, como Abstract o Lingo.
  • BUENO: Descarga directa del kit de herramientas desde un sitio de documentación, con una versión clara indicada y un documento de inicio asociado asociado cerca.
  • SOLO OK: Unidad compartida, a través de una URL interna bien publicitada y posiblemente simplificada (como http: //system.uitoolkit).
  • NO ES SUFICIENTEMENTE BUENO: enterrado en una página de cuarto nivel en un sitio wiki apenas organizado que muchas personas no pueden encontrar.

Siguiente → # 2. Cadencia