Sistemas de diseño en GitHub

Los sistemas de diseño se han convertido en el núcleo de la forma en que diseñamos y construimos en GitHub. Desde 2011, los diseñadores de GitHub han documentado patrones de IU y han compartido estilos comunes. En 2012, CSS y otros activos se agruparon en una Ruby Gem para su uso en los sitios web de GitHub; este paquete se denominó Primer. Primer continuó utilizándose internamente durante años antes de tener finalmente su CSS y la documentación adjunta de código abierto como Primer CSS. En 2016, el equipo de sistemas de diseño se formó con sus primeros empleados a tiempo completo. Esta publicación comparte una breve historia de cómo creció el equipo, en qué hemos estado trabajando y qué sigue.

A partir de las bases

Los diseñadores de productos y diseñadores web de GitHub contribuyen con el código de producción y, a menudo, ayudan a implementar sus propios diseños. Algunos diseñadores profundizan en la pila, pero cada producto y diseñador web escribe CSS. Esto significa que los diseñadores son los principales usuarios de Primer, nuestro sistema de diseño, y son a menudo los primeros en notar cuando hay problemas con los estilos o lagunas en la documentación.

Primer sitio web de documentación en 2015.

Cuando comencé a trabajar en GitHub a fines de 2015, noté que había muchos patrones indocumentados, tuve que escribir una gran cantidad de CSS nuevo para implementar diseños, y que no había sistemas subyacentes obvios que conectaran todas las piezas juntas. Sabía que las cosas podían mejorar y estaba entusiasmado por hacer mejoras. Rápidamente descubrí que no era el único que se sentía así. Había varias personas trabajando en esfuerzos para mejorar las cosas, pero no estaban trabajando juntos. Con el apoyo de los líderes de diseño, un grupo de nosotros comenzó a reunirse regularmente para discutir las mejoras a Primer y priorizar el trabajo; este fue el comienzo del equipo de sistemas de diseño.

Una sesión de planificación y lluvia de ideas con líderes de diseño durante una cumbre de equipo en marzo de 2016. Estamos todos remotos, así que aprovechamos al máximo el tiempo en persona.

Mostrando nuestro valor

Comenzamos abordando los problemas de mayor impacto que resolvieron algunos de los mayores problemas para las personas que implementan el diseño.

Redujimos la necesidad de que las personas tengan que escribir nuevos CSS al agregar utilidades para primitivas como tipografía, color y espaciado, y al hacer que nuestros componentes sean más fáciles de reutilizar en múltiples ubicaciones; trabajamos en consolidar patrones reduciendo la repetición de código y eliminando variaciones de diseño innecesarias; Hicimos uso de las características de Sass previamente infrautilizadas mediante la definición de variables globales para estilos de sistemas compartidos; e introdujimos convenciones de nomenclatura consistentes y fáciles de internalizar.

Mientras mejoramos el código, actualizamos nuestra documentación, comenzando por aumentar la cobertura para implementar patrones, y luego agregamos documentación de respaldo, como principios de estilo de código y pautas de accesibilidad.

Una versión anterior de la nueva guía de estilo interno en 2016.

Abordar nuestros mayores puntos débiles y trabajar en tareas que proporcionaron un alto valor a los diseñadores y desarrolladores en GitHub nos ayudó a comenzar a generar reconocimiento y mostrar el valor de los sistemas de diseño. A finales de 2016 teníamos un nuevo sitio de documentación interna con mucha más cobertura, habíamos mejorado Primer para facilitar la creación de prototipos e implementar diseños sin tener que escribir toneladas de CSS nuevo, y teníamos nuestro primer equipo de sistemas de diseño a tiempo completo. miembros, yo y Jon Rohan.

Dolores de crecimiento

A medida que el nuevo sistema se utilizó más, las solicitudes de nuestra atención crecieron, y el seguimiento de las solicitudes se hizo cada vez más difícil. En GitHub, las personas mencionarán a un equipo en una solicitud o problema de extracción para solicitar comentarios, o para mantener al equipo informado sobre el próximo trabajo; esta mención envía una notificación al equipo a través de GitHub o por correo electrónico (según la configuración de los usuarios), y está disponible como filtro o parámetro de búsqueda. Puede ser difícil hacer un seguimiento de estas notificaciones cuando hay un gran volumen de tráfico (algo que el equipo del producto está tratando de mejorar). Frecuentemente nos perdíamos las menciones de nuestro equipo que no hacían mucho por nuestra reputación, y también significaba que estábamos perdiendo oportunidades para promover el nuevo sistema. En una semana de pirateo del equipo, decidimos que este era uno de nuestros problemas de mayor prioridad.

Decidimos establecer varios procesos nuevos:

  1. Comunique las actualizaciones más ampliamente a través de publicaciones en equipo: tenemos una herramienta interna llamada "Equipo" que el personal de GitHub suele usar para anunciar actualizaciones internas importantes, nuevas funciones y nuevas contrataciones. Comenzamos a usar publicaciones del equipo para informar a las personas sobre las nuevas actualizaciones de la Guía de estilo y de la Guía básica, para informar a las personas cuando enviamos grandes cambios de código y compartir más información detrás de nuestras decisiones.
  2. Haga que el estado de los estilos sea más obvio: con el refactor de muchos de nuestros estilos, las cosas cambiaban constantemente, necesitábamos comunicarlo claramente para que las personas supieran lo que era seguro usar. Para ayudar a aclarar el estado, agregamos un Registro de cambios que se actualiza con cada versión, y agregamos etiquetas de estado a la página de documentación de los módulos. Al igual que las etiquetas de estado en Lightning Design System, las nuestras son: estable, nueva versión, en revisión, experimental y en desuso.
  3. Introducir rotación de turno de guardia: la mayoría de los equipos en GitHub tienen una rotación de turno de guardia que llamamos Primer Respondedor. Quien esté de guardia es responsable de resolver los problemas y responder a las solicitudes de ayuda o revisión del código. Tener a alguien de guardia significa que el resto del equipo puede concentrarse en el trabajo profundo.
Un útil script de Hubot en Slack nos permite imprimir una lista de elementos que necesitan atención del Primer Respondedor.

Escalando nuestro impacto

Como Primer se utilizó más en GitHub.com y otros sitios web de GitHub, necesitábamos escalar nuestros propios procesos para que pudiéramos ser más eficientes con nuestro tiempo y garantizar que las personas pudieran usar Primer con confianza.

Mejorando nuestro flujo de trabajo de lanzamiento

Uno de los mayores problemas para nuestro equipo fue la publicación de nuevos lanzamientos de Primer. Cada módulo (un componente o conjunto de estilos relacionados) se alojó en su propio repositorio en GitHub y se publicó como su propio paquete en npm. Esto dificultó la realización de actualizaciones en todo el sistema en todos los módulos, como la actualización de las variables de tipografía. Luchamos con compilaciones rotas que nos causaron a nosotros y a otros equipos usar muchos problemas de Primer. Con frecuencia, las personas se olvidan de cambiar la versión de un paquete, se olvidan de actualizar la dependencia o no entienden el impacto total de los cambios que hicieron en los sitios web que usaron Primer. Necesitábamos un flujo de trabajo de publicación más sólido y mejores controles sobre los cambios que realizamos.

Nuestra solución fue mover todos nuestros repositorios de módulos a un monorepo y usar Lerna para ayudarnos a administrar actualizaciones de versiones y publicar nuevas versiones. Después de las actualizaciones iniciales, iteramos en nuestros scripts de publicación usando Travis CI para publicar automáticamente versiones alfa en las solicitudes de extracción; esto significa que cada vez que alguien abre una solicitud de extracción o empuja los cambios, pueden probar sus cambios instalando la versión alfa en su proyecto. Esto es útil para probar cambios en GitHub.com antes de enviar la nueva versión.

Al usar Travis CI, las nuevas versiones alfa se publican en npm cuando alguien realiza una nueva solicitud de extracción o adelanta cambios.

Hacer que los robots hagan el trabajo

Con el tiempo, notamos que había patrones comunes con los comentarios que dimos en la revisión del código: estábamos repitiendo los mismos comentarios para cosas como el uso de variables o utilidades en lugar de escribir CSS nuevo. Escribimos un script para un bot que automáticamente comenta sobre las solicitudes de extracción para nosotros, este comentario le dice al autor de la solicitud de extracción cómo corregir sus cambios y proporciona un enlace a la documentación en la guía de estilo. Esto nos ahorra tiempo con la revisión de código y ayuda a más personas a conocer nuestro sistema de diseño.

Servbot comentando una solicitud de extracción.

Continuamos buscando procesos repetitivos y cómo podemos mejorarlos y automatizarlos. Este año actualizamos nuestro flujo de trabajo de publicación de Octicons y utilizamos el bot de código abierto de GitHub, Probot, con Figma API y Travis CI para automatizar partes del flujo de trabajo. Puedes leer más sobre esto en el blog de GitHub.

Horas de oficina

Además de First Responder, comenzamos a hacer horas de oficina 3 días por semana para darles a las personas un horario regular para hacernos preguntas en persona. Esto se utiliza para emparejar el código, hablar sobre actualizaciones de productos que necesitan nuestro soporte y responder preguntas generales.

Hacemos llamadas en horario de oficina a través de Slack para que sea visible para cualquier persona en el canal. Si lo olvidamos, ¡slackbot nos recuerda!

Escalando el equipo

Ser capaz de mostrar el valor de los sistemas de diseño me ha permitido hacer crecer el equipo. Como gerente del equipo, he podido defender los nuevos empleados al mostrar el impacto positivo que hemos tenido, como la forma en que los equipos han podido enviar nuevas funciones de manera más eficiente, o que los desarrolladores pueden llegar más lejos con diseño frontal sin tener que esperar ayuda de diseño. En lugar de hablar sobre lo que no podemos hacer cuando solicitamos personal, me concentro en mostrar todo el gran trabajo que ya estamos haciendo y luego pinto una imagen de lo que podríamos hacer con más personas.

En 2017 contratamos a un nuevo diseñador de sistemas, Shawn. Shawn vino a nosotros desde los estándares web de EE. UU. Al tener experiencia trabajando en roles relacionados con el diseño y sistemas de diseño previamente, es capaz de tomar decisiones de desarrollo con consideración de diseño.

Este año (2018) contratamos a nuestra primera ingeniera a tiempo completo, Emily. Anteriormente trabajó en front-end en Buffer y contribuyó a su biblioteca de componentes. Emily tiene experiencia con React.js y accesibilidad, lo cual es importante para nuestro equipo y nuestros proyectos actuales.

Con el tiempo, hemos contratado diferentes tipos de habilidades para equilibrar nuestro equipo. Si estás interesado en unirte al equipo, ¡estamos contratando!

Ya sea que contratemos diseñadores o ingenieros, generalmente buscamos personas con algunas habilidades generalistas. Queremos desarrolladores que tengan sensibilidad de diseño para que puedan tomar buenas decisiones sobre cómo funcionarán los sistemas al implementar el diseño, y queremos diseñadores que tengan algo de conocimiento del código y puedan empatizar y diseñar para la experiencia del desarrollador. Esto es importante para nosotros porque los sistemas de diseño son donde el diseño y la ingeniería se encuentran. Deben proporcionar un lenguaje de diseño unificado y trabajar tanto para diseñadores como para ingenieros.

Escalarme

Como líder y gerente del equipo, también tuve que escalar mi impacto. Administro más personas que hace un año, y estaré administrando más personas y equipos para fines de 2018 cuando empiece a desarrollar las operaciones de diseño. Esto significa que ya no puedo hacer el trabajo de contribuidor individual con mucha frecuencia. A principios de este año descubrí que comencé a convertirme en un cuello de botella y, por lo tanto, he trabajado para ser más un editor que un autor para el trabajo de sistemas de diseño.

En el pasado contribuí a más trabajo de diseño visual para Primer y he sido el principal responsable de la toma de decisiones sobre el diseño de su API. Estoy aprendiendo a dejar que otros miembros del equipo tomen la iniciativa en esas decisiones, y donde hay lagunas, estoy aprendiendo a enseñar esas habilidades a otros.

Escalando cómo construimos

Una de nuestras reuniones populares (¡sí, las reuniones pueden ser divertidas!) Es nuestra revisión semanal de la API de componentes. Cada persona que ha trabajado en nuevos componentes revisa su código, demuestra cómo se vería la API pública para las personas y habla sobre los elementos sobre los que necesitan comentarios. Esta reunión nos ayuda a trabajar hacia el mismo conjunto de principios de estilo de código para que, sin importar quién construya un componente, se construya de la misma manera. Esto nos ayuda a crear una API consistente para las personas que usan el sistema de diseño.

¡A veces las reuniones de equipo son aún más divertidas cuando se unen gatos y compañeros de baile!

Que sigue

Cada año establecemos objetivos, la siguiente lista no cubre todo, pero aquí están los principales proyectos en los que nos estamos enfocando en 2018:

Modernizando nuestra pila frontal

GitHub.com es una aplicación de Ruby on Rails y la fuente de la verdad para nuestro sistema de diseño hasta ahora ha sido Sass. Eso significa que las personas tienen que tomar muchas decisiones de diseño al construir la interfaz de usuario y escribir mucho marcado.

En lugar de separar las preocupaciones por idiomas (como HTML, CSS y JavaScript), estamos trabajando para lograr un modelo de separación de preocupaciones a nivel de componente. Para lograr esto, nuestro proyecto más grande este año es construir una biblioteca de componentes con React.js. Estamos en fase beta en este momento, pero abriremos el proyecto de código abierto tan pronto como creamos una versión estable v1. Varios equipos en GitHub ya están usando React; nos centraremos en hacer que esas aplicaciones consuman nuestra biblioteca de componentes, así como en descubrir cómo trabajar con componentes en la aplicación GitHub.com Rails. Este trabajo se lleva a cabo en colaboración con nuestro increíble equipo de App Systems, que ya ha agregado elementos personalizados para facilitar la implementación de comportamientos comunes de JavaScript.

La caja de arena de nuestra biblioteca de componentes de reacción de cebador.

Creando un centro vibrante para la colaboración

Queremos ver aún más contribuciones y colaboraciones entre los sistemas de diseño y otros equipos; queremos que sea más fácil trabajar con Primer y más fácil de aprender a usar Primer. Para lograr esto, pasamos más tiempo en herramientas de diseño, tutoriales, herramientas de desarrollo y simplificando los flujos de trabajo de contribución.

Este año hemos estado trasladando nuestros kits de interfaz de usuario a Figma para que los diseñadores puedan crear maquetas y prototipos. Figma se basa en tecnología web, lo que significa que podemos utilizar las herramientas que utilizamos para otros flujos de trabajo de sistemas de diseño, y evitar tener que trabajar con software específico para macOS. La nueva función Estilos de Figma nos permite asignar primitivas del sistema como colores y tipografía a componentes, de forma similar a como lo hacemos en código. La API de Figma nos facilita la integración con otras partes de nuestro flujo de trabajo y la automatización de tareas, como la verificación de componentes en Figma contra nuestros componentes en código.

Imprimación de estilos de color en Figma

Más adelante este año, centraremos nuestra atención en las herramientas de creación de prototipos de código. Si bien las herramientas de diseño visual son excelentes durante ciertas etapas del proceso de diseño, a veces es útil acercarse un poco más al metal. Muchos diseñadores de GitHub trabajan en código de producción y abren una rama para explorar un nuevo diseño, sin embargo, este no es siempre el mejor enfoque, ya que puede significar lidiar con partes de la pila que son más difíciles (y distraen) para trabajar. Algunos diseñadores usan nuestra plantilla o proyecto de codepen para crear prototipos en HTML con Primer CSS.

Primer proyecto en Codepen

Sin embargo, sabemos que ambos enfoques no son ideales para todos los casos de uso. Los diseñadores a menudo simulan páginas y flujos. Deben poder ajustar y ajustar los diseños y ver rápidamente los resultados al igual que lo hacemos en las herramientas de diseño visual. Esto puede ser difícil en la producción, pero si comienzan con una plantilla de Codepen en su lugar, podrían tener que construir una gran cantidad de UI existentes antes de poder enfocarse en la función en la que están trabajando. En un mundo ideal, los diseñadores quieren trabajar con datos de producción, o algo que los represente de cerca, y sería genial si no tuvieran que comenzar desde cero y construir todo el cromo alrededor de su característica. Sabemos que esto es un desafío para muchas empresas, y espero que podamos encontrar una configuración que funcione.

Trabajando al aire libre

Nos gustaría ser una de las primeras compañías en las que las personas piensan cuando quieren aprender más sobre los sistemas de diseño. Muchas empresas están invirtiendo en sistemas de diseño, y es un campo en constante evolución. Queremos compartir lo que aprendemos en el camino en caso de que pueda ayudar a otros.

A principios de este año, hicimos pública nuestra nueva guía de estilo. Compartí esto después de hablar en un evento de sistemas de diseño donde hablé sobre la presión que las personas podrían sentir al comparar su sistema de diseño con el de otras compañías. En lugar de comparar nuestros sistemas de diseño con otros, deberíamos crear nuestras propias métricas para el éxito. Lo que es correcto para otras compañías podría no ser lo correcto para usted. A pesar de que nuestra guía de estilo tiene bastantes errores y margen de mejora, ¡sentí que también deberíamos compartir la nuestra, verrugas y todo!

Documentación de nuestra guía de estilo pública https://styleguide.github.com/primer/

Hemos estado trabajando más a la intemperie, haciendo toda nuestra planificación de lanzamiento en nuestro repositorio de código abierto. Continuaremos compartiendo públicamente nuevos proyectos que creemos que podrían ser útiles para otros, ya sea para usarlos en su proyecto o simplemente como referencia de cómo hacer algo. Planeamos escribir más (¡de ahí esta publicación!) Y hablar o participar en eventos de la comunidad.

Si hay algo de lo que le gustaría saber más, comuníquenoslo aquí o abra un problema en el repositorio de Primer.

Junta de proyecto para planificar lanzamientos de Primer.

GitHub continúa invirtiendo en sistemas de diseño. Seguiremos esforzándonos por hacer nuestro mejor trabajo y compartiremos nuestros éxitos y fracasos en el camino. Si desea ayudar a construir sistemas de diseño que GitHubbers usa para construir características que millones de desarrolladores usan todos los días, considere unirse a nuestro equipo.

Gracias ❤

Sería una publicación muy larga si hubiera incluido todos los detalles, todo el gran trabajo que sucedió antes de unirme, los muchos colaboradores que nos han ayudado en el camino y todas las personas de la industria de las que hemos aprendido. ¡Pero gracias!

Como mínimo, quiero felicitar a algunas personas especiales que han ayudado directamente a construir y apoyar sistemas de diseño en GitHub en los últimos años: Sophie Shepherd, Mark Otto, Patrick Marsciell, Mu-An Chiou, Caleb Winters, Brandon Rosage y Max Schoening.