Saiba o que é Design System e confira exemplos práticos
Ao desenvolver produtos digitais, um desafio comum é manter a consistência visual e funcional à medida que as equipes mudam ou crescem, especialmente no design de sistemas.
O design system, ou sistema de design, surge como solução para unificar a linguagem visual, interações e componentes de um produto.
Neste artigo, você vai entender o que é design system, conferir exemplos práticos reais de design systems, e saber como aplicar esses conceitos no front-end. Veja também links para aprofundar seu conhecimento em design system e design de sistemas.
O que é Design System? Entenda o conceito de sistemas de design
Design System é uma coleção organizada de componentes reutilizáveis, padronizados e documentados para determinado produto digital, site ou sistema web.
Ao contrário de um “style guide” (guia de estilos), o design system é uma abordagem mais ampla, conhecida como design de sistemas, pois unifica a linguagem visual, padrões e fluxos de interação de todo o produto para equipes de design e desenvolvimento front-end.
Pense no Design System como um produto interno contínuo da empresa, que necessita de evolução constante enquanto surgem novas soluções, componentes e diretrizes. Ele engloba desde os detalhes dos botões, trechos de código, até as definições de marca, tom de voz e microtextos (microcopy).
Exemplos práticos de Design System
Como a definição de Design System está em constante evolução, é interessante analisar exemplos conhecidos e abertos na comunidade:
Stack Overflow
Esse é um ótimo exemplo para quem busca inspiração em system design aplicado ao front-end, já que o Stack Overflow documenta desde padrões visual até fluxos e códigos de interface.
Acesse:https://stackoverflow.design/
Adobe Spectrum
O Adobe Spectrum é referência entre os principais design systems do mercado. Com documentação robusta, oferece guidelines detalhados valiosos tanto para designers quanto para desenvolvedores front-end.
Acesse: https://spectrum.adobe.com/
Screenshot da página inicial do Spectrum, design system da Adobe.
Claro Mondrian
O Mondrian, da Claro, é um ótimo case nacional de design system front-end, mostrando como empresas brasileiras estão à frente no design de sistemas para web.
Acesse: https://mondrian.claro.com.br/o-mondrian
Podcast: Design System na prática – Hipsters Ponto Tech #170
Para aprofundar o tema, recomendamos o episódio do podcast Hipsters Ponto Tech, em que profissionais da área discutem os benefícios e desafios de adotar Design Systems: https://www.hipsters.tech/design-systems-hipsters-170/
Como grandes empresas usam design system – conversa com Charles Assunção (Microsoft)
Neste vídeo, Paulo Silveira entrevista Charles Assunção, da Microsoft, e debatem sobre como Design Systems alinham as necessidades de pessoas desenvolvedoras e designers:
Quer aprender mais sobre o tema?
Se você quer aprender mais e desenvolver seu próprio Design System, confira os cursos de UI/UX e Frontend na Alura. Domine a criação, documentação e manutenção de sistemas de design para web!
- Design System: padronização e gestão de interfaces digitais
- Design System: documentando um design system
- Carreira UI Design
- Trilha Construa um Design System com React, Turborepo e Storybook
Até a próxima leitura!
Créditos
Apoio didático: Felipe Labouriau
