Design System: documentando um design system

Buscando referências - Apresentação

Olá! Tudo bem? Te desejo boas-vindas ao curso de documentação de Design System!

Meu nome é Gabriela Lima, sou instrutora da Escola de UX e Design e é um prazer imenso ter você aqui conosco!

Audiodescrição: Gabriela se descreve como uma mulher negra, de 1,5m de altura. Possui cabelos cacheados na cor castanho escuro, pouco abaixo da linha dos ombros. Tem olhos também na cor castanho escuro e veste uma camiseta de marga curta na cor azul escuro. Está com as unhas pintadas na cor preta e usa uma aliança prata no dedo anelar da mão direita. Está sentada sob uma cadeira gamer na cor azul e, ao fundo, uma parede lisa com iluminação em tons de roxo.

Vamos a detalhes sobre o que aprenderemos ao longo deste curso? Aqui, finalizaremos um processo de construção de um Design System. Já fizemos Design Tokens e construímos componentes, então agora vamos documentar e definir as regras de uso, colocando tudo em um local específico, que será ideal para a construção de produtos padronizados e alinhados com o que a empresa deseja oferecer.

A ferramenta que vamos utilizar é o Zeroheight, própria para documentação, então todo o processo será realizado dentro dela. Além disso, vamos fazer pesquisas por referências de Design Systems que já estão no mercado, são bem estruturados e nos ajudarão a fazer esse processo de documentação de acordo com o que o mercado está fazendo.

Neste processo, aprenderemos boas práticas para escrever essas documentações e para mantê-las atualizadas, independentemente do processo pelo qual a empresa esteja passando ou que o mercado esteja enfrentando. Portanto, vamos aprender como manter essa documentação atualizada e alinhada com o contexto que estamos vivendo.

No próximo vídeo, vamos explorar um pouco mais sobre como essa documentação deve ficar ao final. Até já!

Buscando referências - Introdução geral

Vamos analisar o que aprenderemos ao longo deste curso!

Primeiramente, apresentamos a FinConnect e a FinBank. A FinBank é uma patente da FinConnect. Vale ressaltar que essas duas entidades são apenas para fins educativos, para podermos ensinar o conteúdo ao longo deste curso.

Tudo o que abordaremos se encaixa nos contextos que encontraremos no mercado. Portanto, vale a pena se aprofundar no conteúdo deste curso, para que você possa entender o que fazer quando encontrar situações semelhantes no seu dia a dia.

Se você está acompanhando os outros dois cursos desta formação, deve saber que nossa missão é criar um design system. Já passamos por duas etapas principais, a criação de tokens e de componentes. Se você não passou por essas etapas e não conhece esses processos, recomendamos que faça os cursos anteriores e depois volte para este, porque vamos dar continuidade a esse conteúdo, sem revisá-lo propriamente.

Agora, temos uma próxima etapa, que é a última para concluir tudo com êxito: a documentação. A documentação é um registro de todas as regras que criamos ao longo dos processos de criação de tokens, de elementos e de componentes. Faremos o registro para podermos passar adiante, assim, outras pessoas que não participaram desse processo podem ter acesso a esse conteúdo a qualquer momento.

Vamos trabalhar certos tópicos para desenvolver isso e usaremos pesquisas de referências norteadoras. Ou seja, não precisamos necessariamente inventar algo, mas sim tomar como base grandes referências do mercado para fazer o Design System da nossa documentação.

Além disso, entenderemos qual seria a estrutura ideal pensando no contexto da FinConnect e construiremos tudo isso dentro do Zero Height. Lembrando que essa é uma ferramenta própria para a documentação do Design System e podemos utilizar suas funcionalidades a nosso favor.

Também abordaremos boas práticas para a documentação, de forma que possamos mantê-la ativa e coerente com a empresa ao passar do tempo.

Ao final, teremos uma documentação semelhante à que podemos conferir na página da Coin UI, que é a documentação do Design System da FinBank. Nela, estão registrados todos os processos feitos anteriormente. Note que temos uma página para iniciar, explicando o que é essa documentação, as fundações e os componentes. Além disso, temos uma página para cada parte que criamos e toda a descrição de como tudo deve ser aplicado no mundo real, nos nossos produtos do dia a dia.

Esperamos que você tenha gostado dessa pequena prévia do que produziremos ao longo deste curso!

Para iniciar nosso trabalho, que tal começarmos entendendo o que tem no mercado? Então, a seguir, veremos algumas documentações que já estão prontas, entendendo sua estrutura, onde procurá-las e quais os sites que podemos utilizar para buscar essas documentações.

Buscando referências - Conhecendo documentações

No final do vídeo anterior, mencionamos que, nesse vídeo, iríamos explorar algumas fontes de Design Systems e documentações que poderíamos utilizar como nossas referências.

Para isso, temos um site especial chamado Design Systems Repo, que reúne Design Systems de algumas das principais empresas do mercado. Alguns são de código aberto e outros, privados, reservados apenas para as pessoas que trabalham na empresa em questão.

No entanto, temos acesso a alguns Design Systems importantes que são de código aberto. Por exemplo, o Atlassian Design Language. Se você não conhece a Atlassian, saiba que se trata de uma empresa que gerencia ferramentas importantes, como o Trello, uma grande ferramenta de gestão. Temos também outros bem conhecidos, como o Design System da Uber, que é o *Base Web, e o Design System do HubSpot, que é o Canvas Design System.

Um dos mais populares, porém, é o Carbon Design System, que é o Design System da IBM. O Material Design, por sua vez, é basicamente uma das maiores referências do mercado de Design System, que é o Design System da Google. Ele é um exemplo de um grande Design System que se aplica a diversos produtos que a Google possui.

Há vários outros Design Systems que podemos explorar. Por exemplo, a Atlassian tem um Design System, mas o Trello, que é uma marca da Atlassian, tem um Design System próprio, o Nachos.

Então, temos um grande acervo de Design Systems, com várias documentações que você podemos explorar. Te convidamos a acessar e verificar quais estão abertos para poder visualizar e ler, iniciando o contato com outros Design Systems. Você precisa somente escolher um, clicá-lo e, se estiver aberto, terá acesso completo ao material.

Alguns Design Systems são abertos não apenas para visualizar, mas também para contribuir. Abrindo o Carbon Design System, ao final, há uma seção sobre como contribuir. Eles aceitam feedbacks, designs e ideias para melhorar a experiência da IBM. Ou seja, existem Designs Systems abertos para contribuições e isso pode ser um grande caso para você.

Sugerimos que você explore esta página e, no próximo vídeo, já tenha algumas ideias em mente, porque vamos escolher quais Design Systems utilizaremos para o caso da FinConnect ou, no caso, a FinBank.

Sobre o curso Design System: documentando um design system

O curso Design System: documentando um design system possui 108 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Design System em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Buscando referências
• Estrutura da documentação
• Foundations
• Components
• Boas práticas