Design System
O que é?
Conjunto de componentes, padrões, tokens e documentação que guiam como um produto digital se parece e se comporta. Garante consistência entre telas, times e releases.
Product Designers e UI Designers contribuem ao criar, usar e evoluir o design system. Em squads enxutas, a biblioteca costuma viver na ferramenta de design; empresas maiores podem ter time dedicado.
Fundamentos
Design Systems 101
Introdução da Nielsen Norman Group aos fundamentos de um sistema.
nngroup.comDesign Systems 101 da Figma
Visão geral da Figma sobre tipos e boas práticas.
figma.comDesign System é um produto
Por que tratar o sistema como produto contínuo.
medium.comBuilding a Visual Language
Bastidores do sistema visual criado pela Airbnb.
medium.comDesign Systems inclusivos
Princípios para construir sistemas mais acessíveis.
medium.comDesign Ops
Reflexão sobre a operação que sustenta Design em escala.
medium.comDocumenting Design Operations
Repositório de práticas e documentação de Design Ops.
documenting.designDesign Principles
Coleção de princípios usados por produtos digitais.
principles.design
Ferramentas e documentação
Design System Checklist
Checklist aberto para planejar e evoluir sistemas.
designsystemchecklist.comUI Guideline
Guia para padronizar nomes e componentes de interface.
uiguideline.comzeroheight
Plataforma para documentar style guides vivos.
zeroheight.comSupernova
Centraliza dados de design e engenharia em um só lugar.
supernova.ioStorybook
Ambiente para desenvolver e testar componentes isoladamente.
storybook.js.orgSpecify
Ferramenta para gerenciar tokens e ativos de Design System.
specifyapp.comDuet Design System
Recursos e ferramentas do sistema Duet.
duetds.com
Repositórios e exemplos
DesignSystems.com
Artigos e referências sobre construção de sistemas.
designsystems.comDesign Systems Repo
Coleção atualizada de exemplos e recursos.
designsystemsrepo.comDesign Systems Brasileiros
Lista de sistemas de design criados no Brasil.
designsystemsbrasileiros.comHey Design Systems
Curadoria de conteúdos dedicados a Design Systems.
heydesign.systemsCarbon
Sistema open source da IBM para produtos e experiências.
carbondesignsystem.comShopify Polaris
Sistema de design da Shopify para seus produtos.
polaris.shopify.comAtlassian Design
Sistema e diretrizes de design da Atlassian.
atlassian.designSpectrum
Sistema de design aberto da Adobe.
spectrum.adobe.comConta Azul Design
Referências do sistema de design da Conta Azul.
contaazul.designBold Design System
Sistema de componentes com foco em acessibilidade.
bold.bridge.ufsc.breBay Playbook
O Design System do eBay para experiências consistentes.
playbook.ebay.com