Uma das etapas mais importantes de todo o Design System é a documentação. A documentação funciona como o cérebro do projeto, sendo tão importante quanto os design principles e os componentes, além de servir como um guia de uso para todos os colaboradores. Por conta disso, a documentação precisa ser robusta e detalhada, contendo tudo o que é preciso para trabalhar com ele.
Neste post, explicaremos sobre o processo de documentação e sua importância no projeto de Design System.
Porque documentar?
Todo projeto deve ser documentado. Quem nunca fez um trabalho de escola ou faculdade pelo computador e salvou vários arquivos como trabalho_v1, trabalho_v2 e assim por diante? Com o design não é diferente.
A documentação é importante para que possamos consultar todo o material que já foi feito, assim temos um banco de dados para projetos e alterações futuras. Na documentação encontramos todo o material produzido, desde os princípios de design até os componentes e os códigos.
A documentação precisa ser bem detalhada, com instruções de uso e boas práticas do uso do material. Assim, conseguimos difundi-la em todos os setores com mais agilidade, agilizando o processo de construção de novos produtos.
A importância de documentar o processo
O Design System não é feito apenas de componentes e códigos, mas também de um longo trabalho de pesquisa. O desenvolvimento do projeto contempla várias etapas, como entrevistas com stakeholders, análises internas e análises de concorrentes. Todas as etapas geram insights, que devem ser documentados corretamente para consultas futuras. O processo pode ser documentado em um diretório específico do projeto ou ficar disponível para download. Na Tuia, usamos as ferramentas do Google Workspace.
Quais ferramentas utilizar?
Para a tomada de decisão das melhores ferramentas para o seu Design System, sugerimos ter em mente os seguintes parâmetros:
Biblioteca integrada
É importante que todas as informações referentes ao Design System estejam centralizadas em uma biblioteca única. Isso faz com que a comunicação entre os setores e envolvidos no projeto fique mais fácil e organizada, trazendo mais consistência não só nas criações, mas em todo o método de trabalho da equipe.
Também é preciso que a ferramenta usada para a elaboração do Design System possua integração entre todos os colaboradores. Na Tuia, utilizamos o Figma, que oferece soluções para trabalharmos de maneira colaborativa.
Mostrar de maneira interativa
As ferramentas escolhidas para hospedar o Design System precisam mostrar de forma interativa como ele funciona: indicar as variações dos elementos e como o componente se comporta de acordo com a ação do usuário (por exemplo, o que acontece se passamos o cursor do mouse). Na Tuia usamos o ZeroHeight e o Storybook, pois mostram os componentes de forma clara, podendo ser manipulados para exibir todas as suas características e variantes.
Quando se trata de design e prototipação interativa, o Figma é o mais indicado pela sua facilidade em criar interfaces e componentes variáveis de forma ágil e simples.
Fácil acesso e compartilhamento
Para documentar um Design System, é preciso usar ferramentas que facilitem o compartilhamento de conteúdo com todos os colaboradores que precisam usá-lo. Por isso, é necessário entender estas ferramentas que auxiliam no engajamento e facilitam o acesso ao conteúdo do mesmo.
Na Tuia, utilizamos o ZeroHeight, pois além de ser uma ferramenta especializada para esse tipo de projeto, possui um acesso dinâmico e de fácil compartilhamento: basta criar um login e senha e compartilhar a URL com os colaboradores.
Intuitiva para todos os colaboradores
Por mais que a documentação seja mais utilizada por designers e desenvolvedores, é importante que a ferramenta escolhida seja intuitiva para todos os colaboradores envolvidos no projeto. O ideal é que o Design System seja um sistema vivo, onde todos possam trazer feedbacks e sugestões de melhorias.
Integração entre as ferramentas
Existem hoje no mercado uma infinidade de ferramentas que facilitam o processo de organização e documentação, com integração entre os programas utilizados para prototipação. Essas ferramentas permitem importar arquivos de design prontos, como o Figma e o Adobe XD.
Você pode consultar algumas dessas ferramentas disponíveis no site Design Systems Repo. O site também disponibiliza alguns projetos abertos para a comunidade.
Aprenda mais sobre Design System
Acompanhe nossa série de posts sobre o assunto:
Design System: Quais são os seus componentes principais?
UI Kit e Design System: quais são as diferenças entre os dois e quando aplicar
Design Principles: o que são e qual a sua importância para o Design System
Nós da Tuia
Aqui na Tuia temos soluções para empresas que querem desenvolver um Design System. Você pode conferir acessando nossa página de serviços.
Nos acompanhe também pelo LinkedIn.
