Introdução ao Design System
Conceitos básicos e a importância de aplicarmos e mantermos o sistema de design dentro das empresas
Fui selecionada para participar de uma formação em design system, de uma parceria entre a UX para as Minas Pretas e a Mergo.
Era um sábado pela manhã e não me atentei que o curso era em espanhol. Até o professor começar a falar. haha Mas sem problemas, desenferrujei o espanhol das aulas do ensino médio e a escolha de “hablar” de forma mais lenta, do facilitador Javier Cuello, me familiarizou com o idioma.
O que aprendemos ?
- Fazer uma introdução sobre Design System;
- Entender as partes de um Design System;
- Entender como manter um Design System;
- Realizar práticas de fixação, no figma;
O que é Design System?
é algo que têm partes atuando em conjunto. Também é uma forma de pensar elementos de design se comunicando entre si. É entender que tem que se pensar em todos os elementos, cada vez que vamos adicionando um elemento a mais. Todas as partes do design system tem que estar em harmonia;
Algo importante é que temos que pensar um pouco adiante “como en una bola de cristal” nas necessidades futuras e como os componentes se comportarão quando possivelmente surgir mais elementos nesse sistema.
Javier nos deu como exemplo um sistema de design em um aeroporto, no design impresso também chamado de sinalização. Onde se tem que trabalhar os componentes de forma escaláveis para ser aplicado em diferentes plataformas.
Já no mundo digital, a Airbnb foi uma das primeiras empresas a falar abertamente como era o processo de design system. E a partir desse compartilhamento do seu sistema de linguagem de design o assunto começou a se tornar mais popular.
Partes de um Design System
Os sistema de design é composto por várias partículas que visualizadas no conjunto percebe a harmonia e consistência do projeto
Princípios do design — aparentemente se parece um conceito abstrato, mas é onde se une todos os conceitos. Formados pelo movimento, a estruturação, os adjetivos, e a forma de aplicar. Os movimentos são importantes, mas que tenha um significado representativo. Nos princípios tem que ser pensado uma estrutura flexível e com muita personalidade. Também nas aplicações, seja em plataforma web ou mobile. E o que queremos transmitir na interface, por exemplo queremos ser excelentes, divertidos, diferente, (…) Porém, com os conceitos aplicados aos desenhos das formas.
Guia de Estilos— é o primeiro ponto onde os princípios de design se transforma em algo palpável. Por exemplo se a ideia é sermos divertidos, teremos que optar por cores mais vibrantes. As partes do Style Guide são as cores, a tipografia e as separações dos elementos;
Elementos, componentes e patterns — São as “piezas de lego” que compõe a interface, pode ser simples ou complexo. São definições de situações que possam se repetir no projeto. E quando houver a necessidade de utilizar o elemento, já está definido como se faz. Exemplo na imagem: temos ilustração, pattern, titulo, texto, um botão primário e secundário.
Repositório de design e códigos — Quando falamos de design system estamos falando de todas as peças harmonizadas e não apenas das formas. Por isso é importante que se tenha um repositório para unir o design ao código, essa união pode definir o design token
O Design Token surgiu para facilitar a vida dos designers e principalmente dos desenvolvedores, pois quanto maior o tamanho do projeto e de pessoas envolvidas nele, maior se torna o problema caso precisarmos ajustar algumas propriedades no código. Carlos Henrique Filho
Documentação e linhas guias — São os exemplos e regras de como usar as partes do sistema. Inclusive exemplos de como os elementos devem se comportar. Deixando bem nítido quais as propriedades que o componente tem que ter. Como por exemplo: se o botão terá uma ou duas palavras.
Atividades práticas
Logo após fizemos atividades práticas, no figma, acompanhadas por Javier, aplicando os conceitos de design system, criando style guides, elementos, componentes e patterns.
Mantendo um Design System
Criar um sistema de design em uma empresa é de extrema importância para preservar os conceitos abordados pela organização. Manter esse sistema evoluindo ao longo do tempo vai depender da contribuição, a colaboração e envolvimento do time, sendo estimulado pelas empresas/organização.
Conclusões e próximos passos
Fechamos o Curso com um resumo do conteúdo, perguntas e respostas, além de dicas de recursos para aprendermos mais. O conteúdo foi muito enriquecedor para entendermos mais sobre o assunto e como a prática do sistema de design facilita e uniformiza as decisões no nosso dia a dia.
Links importantes
Repositório de sistemas públicos de empresas do mundo
Definindo paleta de cores
Configurando design tokens
