Dicas para construir um Design System
Bases teóricas, referências e ferramentas para te ajudar nessa jornada
Precisa construir um design system e não sabe bem por onde começar? Reuni algumas dicas práticas e teóricas para quem está começando a estudar o assunto e procura ferramentas para facilitar essa jornada.
Obs.: Eventualmente eu vou trocar o termo design system por DS, então não estranhe a sigla no texto.
Para entender melhor 📚
Para um entendimento geral sobre o assunto, há um artigo bem sintético sobre o que é e por que criar um design system, do Guilherme Gonzalez, publicado pela Mergo.
Para quem quiser se aprofundar um pouco mais no assunto, a InVision produziu um ebook bem legal sobre boas práticas na hora de planejar, projetar, construir e implementar um design system baseado em experiências de profissionais da área. É um material tão bem elaborado que foi disponibilizado em epub, pdf e até na versão audiobook. O único porém é que o conteúdo está todo em inglês.
E se você já estiver iniciando seu projeto, pode contar com o canvas Design Principles Pyramid para ajudar na definição dos princípios do seu design system.
Buscando inspiração? 🖼
Diversas empresas já implementaram design systems que foram disponibilizados abertamente e podem ser usados como referências para o seu projeto. Confira uma biblioteca que reúne ótimos exemplos, como Apple, IBM, MailChimp, Shopify, Salesforce e Zendesk.
Deixo também duas referências nacionais:
Cursos sobre Design System 💻💡
Alura
A Alura é uma plataforma online de cursos com planos de assinatura mensal em que você pode acessar qualquer conteúdo e estudá-lo no seu próprio tempo. Sobre este tema, existe o curso: Figma: Trabalhando na construção de um Design System, que é sucinto e aborda prioritariamente boas práticas de UI e construção de componentes na ferramenta, mas dá uma boa ideia de como organizar visualmente o conteúdo do seu DS.
Meiuca
Lançou um curso em 6 módulos com 2 meses de duração em 2020 que já teve (até o momento desta publicação) 2 edições. O curso oferece aulas gravadas e lives, além de suporte via Slack. Fique atento para novas turmas neste site. Você também pode conferir as aulas abertas sobre o tema que rolaram na Semaninha do Design em Escala, no YouTube.
Pixelcast + UIBoost
Da parceria entre Guilherme Gonzalez e Rafael Coronel nasceu este ano o curso Design System Boost. São 8 módulos com aulas gravadas e ao vivo, e suporte pelo Telegram. A segunda edição será aberta agora em novembro/2020. Acompanhe pelo Instagram.
Pra ficar de olho
Durante 2020, algumas organizações também lançaram cursos pontuais de menor duração sobre o tema. Acompanhe a UXCO e Mergo para saber de próximas oportunidades.
Ferramentas para construir um Design System 🛠
Além de criar seus assets em algum software de design e prototipação, há outras ferramentas que ajudam a criar uma documentação consistente e eficiente. Separei quatro delas para apresentar aqui:
Figma
Pode ser utilizado para criar os componentes do seu design system de forma gratuita e colaborativa, já que permite que outras pessoas acessem o mesmo arquivo em tempo real direto pelo navegador. Mais abaixo estão algumas dicas de plugins para facilitar o processo de criar assets para seu DS.
Storybook
Integra design e desenvolvimento, recriando componentes de forma organizada e eficiente, e também permitindo simular interações. É uma ferramenta mais voltada para UI, para as linguagens React, Vue e Angular, e é totalmente gratuito.
Zeroheight
Pode ser integrado ao Storybook para documentar todo o design system (uso da marca, tom de voz, princípios de UX, styleguide e código) num só lugar.
Também possui integração com Sketch, XD e Figma e gera componentes interativos. É gratuito para uso individual.
InVision DSM
Assim como o Zeroheight, permite construir um design system completo. Porém, está restrito a integração com o Sketch. Também possui um plano gratuito, mas este não é possível integrar com o Storybook.
Vai usar o Figma?
Alguns plugins que podem facilitar seu processo:
Chroma Colors
Facilita o processo de criar estilos de cor locais, com base numa paleta definida anteriormente, importando como o nome dos estilos o mesmo nome utilizado no objeto original.
Design System Organizer
Organiza os elementos criados para o design system em abas por componentes, cores, tipografia etc. Ele interage automaticamente com o projeto, reorganizando e renomeando os assets criados de acordo com os agrupamentos definidos no plugin. Ex: Ao criar um grupo de cores “primárias” no plugin, as cores da sua paleta são automaticamente renomeadas para se adequar ao grupo, como “primárias/cor1”, “primárias/cor2” e assim por diante.
Text Style Generator
Ao definir uma typeface para o projeto, o plugin ajuda a criar os tamanhos da fonte utilizada a partir de um tamanho de base (para texto corrido) e proporção da entrelinha. Tem-se, como boa prática, que o line-height seja de 40 a 80% maior que o tamanho da fonte. Depois de gerar e selecionar os tamanhos de fonte para o seu DS, você pode arredondar as medidas das entrelinhas para facilitar o uso.
Aspect
Ajuda a redimensionar uma camada para que se ajuste a um aspect ratio (proporção de tela) específico. Foi projetado para imagens, mas pode ser aplicado a outros elementos.
A complexidade dos produtos digitais tende a crescer, por isso a demanda por design systems tem aumentado, e com ela surgem mais conteúdos sobre o assunto, mas ainda é um tema que pode ser bastante explorado. Se você tiver alguma dica bacana que ficou de fora, deixe pra gente nos comentários. :)
