Liberando Sistemas de Design

Entrega de saídas interconectadas aos adotantes ao longo do tempo

No 1 de 6 da série Releasing Design Systems:
Saídas | Cadência Versões Quebrando | Dependências Processo

As empresas percebem o valor de um sistema de design ao adotar produtos e usam um sistema para criar e enviar experiências que seus clientes usam. Como parte dessa cadeia de valor, o sistema libera recursos ao longo do tempo. Isso coloca o sistema nas mãos de seus clientes: designers e engenheiros fazendo seu trabalho.

Equipes de sistemas fortes levam os lançamentos a sério. Eles não se vêem liberando apenas o código da biblioteca de componentes. Em vez disso, eles fornecem muito mais resultados: tokens de design, documentação, ativos de design e outros recursos.

Esta série descreve muitas facetas do lançamento de sistemas de design. Começa definindo as muitas saídas de um sistema e onde elas são entregues. Os artigos subsequentes abrangem tópicos de cadência, controle de versão, alterações recentes, dependências e uma abordagem passo a passo.

Essas histórias refletem o que aprendi ao liberar sistemas trabalhando com equipes como Discovery Education, Morningstar, Target e REI. Eles são elevados com base em informações de colegas do Salesforce, Adobe, Atlassian, Shopify e Financial Times. Obrigado por compartilhar graciosamente seu tempo e práticas!

Saídas: O que é lançado?

Os programas de sistemas de design liberam muitos tipos de saídas, não apenas código. Como resultado, um sistema deve diferenciar e comunicar esse intervalo de saídas com versão para desenvolvedores, designers e outros clientes.

Código, a fonte da verdade

A maioria dos sistemas oferece uma única fonte de verdade sobre o código da camada de apresentação como:

  • Biblioteca de componentes de interface do usuário como marcação HTML e CSS. Geralmente chamado de "CSS", o consumo deste pacote depende do uso ou compilação de CSS como uma linha de base consistente de estilo visual, juntamente com a reutilização de snippets HTML.

e / ou ...

  • Biblioteca de componentes da interface do usuário como Javascript: muitos sistemas agrupam HTML e CSS com JavaScript para fortalecer a lógica, encapsular estilo e facilitar a integração e manutenção mais diretamente em uma estrutura de escolha. Enquanto a maioria das bibliotecas tem como alvo uma estrutura específica (React, Vue, Ember, Angular, ...), os sinais do setor sugerem uma mudança na criação de componentes da Web para todas as estruturas. Meus últimos seis esforços do sistema? Depois de 2017: Vanilla HTML, Vanilla HTML. Início de 2018: React, Vue. Mais tarde 2018: Componentes da Web, Componentes da Web.

Além disso, outras saídas importantes podem ser liberadas separadamente:

  • Crie tokens que estabeleçam um estilo visual por meio de pares de valor-propriedade semanticamente significativos. Os tokens são variáveis ​​disponíveis em vários formatos para uso em plataformas (web, iOS, Android), pré-processadores (Sass e LESS) e estruturas (como React). Alguns sistemas gerenciam tokens em um repositório separado do código de componente da interface do usuário. Como resultado, sua biblioteca - junto com outras implementações - também pode depender do token como um pacote.
  • Demonstre aplicativos / sites como um ambiente com exemplos de páginas criados usando a biblioteca de componentes. A demo também é para tutoriais e prototipagem rápida, inclusive por designers!
  • Componentes de plataforma cruzada adequados para iOS, Android e Windows.

Ativos de design

A maioria das equipes limita a compreensão do que lança a simples "liberamos código". É de se surpreender que eles publiquem tantas outras ferramentas que mudam com o tempo. Eles incluem:

  • Crie kits de ferramentas como arquivos de modelo e bibliotecas de símbolos oferecidos no software de design. Hoje, quase sempre Sketch. Amanhã, Figma, Invision Studio e outros concorrentes emergentes?
  • Fontes, ícones e até conjuntos de imagens de origami devido à função geralmente esperada de um sistema na distribuição e versão de tais bibliotecas.
  • Outros recursos de design, como arquivos ASE / CLR de amostras de cores e ilustrações, são um trampolim para trabalhos de arte sob medida. Essas coleções mudam lentamente, menos formalmente e por meio de contribuições dos membros da comunidade que não fazem parte da equipe principal do sistema. No entanto, da perspectiva do cliente e das comunicações do sistema, isso faz parte do sistema.

Site da documentação

Os sistemas de design precisam de uma casa, um lugar que todos saibam que podem encontrar um caminho para tudo que terá o melhor e o mais recente. Alojado em um URL memorável, geralmente é criado com componentes de interface do usuário específicos para sua missão.

  • Os sites de documentação descrevem recursos (como um botão), incorporam novos usuários e acionam processos como obter ajuda ou contribuir. As equipes criam sites com mais frequência usando um gerador de site estático ou com menos frequência com um sistema de gerenciamento de conteúdo.
  • Os componentes da documentação - par de código-exemplo, não faça, código hexadecimal, explorador de componentes - dependem da biblioteca de componentes da interface do usuário e atendem geralmente apenas ao site de documentos. Esses componentes podem ser versionados com o site de documentação ou como uma terceira biblioteca com versão separada em relação ao documento e aos componentes da interface do usuário entre os quais eles se encontram.

Destinos: Para onde vai?

Ao distribuir código e projetar ativos, é vital oferecer o código de maneiras mais facilmente consumidas pelos seus engenheiros adotantes. Isso significa que alguns sistemas devem oferecer opções entre muitas opções, enquanto outros podem confiar em uma única opção como padrão organizacional.

Para Código

  • MELHOR: Registros como o npmjs (ou uma contrapartida interna como o nexo do Sonatype) que fornecem acesso e gerenciamento de pacotes de códigos liberados. Os desenvolvedores usam ferramentas como bower, npm, yarn, webpack e babel para integrar e atualizar esse código sem problemas em seus ambientes.
  • MELHOR: Ativos hospedados em CDNs para links diretos para estilo e script com versão, bem como fontes e ícones que mudam mais lentamente.
  • APENAS OK: Acesso do repositório ao Github, Bitbucket ou similares para clonar, bifurcar ou compilar de outra forma, usar e talvez - eventualmente - contribuir.
  • SE NECESSÁRIO: Downloads diretos de código, geralmente do “arquivo ZIP” de ativos do sistema compilados ou não compilados do site doc para uso local e / ou integração manual em um repositório separado.

Bootstrap e Material Design Lite são exemplos de lançamento para mais de 2 destinos.

Para kits de ferramentas de design

  • MELHOR: Crie Novo como um caminho incorporado e sincronizado no menu de uma ferramenta de design para criar uma nova instância a partir de um modelo.
  • MELHOR: Versão e distribuição usando o software de gerenciamento de ativos de design baseado em permissão, como Abstract ou Lingo.
  • BOM: Download direto do kit de ferramentas de um site de documentação, com a versão clara indicada e o documento de Introdução associado nas proximidades.
  • APENAS OK: Unidade compartilhada, via URL interna bem divulgada e possivelmente simplificada (como http: //system.uitoolkit).
  • NÃO É BOM BASTANTE: Enterrado em uma página do quarto nível em um site wiki mal organizado, que muitas pessoas não conseguem encontrar.

Próximo → # 2. Cadência