Design Systems
Construção e manutenção de bibliotecas de componentes e tokens de design pra produtos grandes.
Dificuldade
Faixa salarial
R$ 6.000 (entrada) a R$ 25.000+ (sênior em big techs). Pleno gira em R$ 8-15k. Sêniores em Nubank, iFood, Magalu, Stone chegam a R$ 18-25k. Remoto pra fora paga US$ 5-10k/mês.
Cargos típicos
4 cargos
O que é essa subárea
Design System Designer é o profissional sênior que constrói e mantém o sistema de design de uma empresa: biblioteca de componentes reutilizáveis, tokens de design (cores, espaçamento, tipografia), padrões de interação e documentação. Diferente do Product Designer (que usa o design system pra criar telas) ou UI puro (que faz interfaces visuais), o DS Designer constrói a fundação que todos os outros designers usam. Cargo super sênior, raramente entry-level. Salários: pleno gira R$ 8-15k, sêniores em empresas com produtos complexos (Nubank, iFood, Magalu) chegam a R$ 18-25k. Mercado em crescimento. Toda empresa madura precisa.
Como difere de UX/UI Design
Dentro de UX/UI, o Design System é a especialização mais técnica, diferente do Product Designer (que usa o sistema) e do UI Designer (que cria interfaces), o DS Designer constrói a base. Aproxima-se de Front-end Engineer: precisa entender tokens, componentes, lógica de propriedades. Diferente do UX Designer (foco em pesquisa), o DS Designer foca em sistematização visual. Cargo SÊNIOR. Não tente entrar sem 3+ anos de design de produto. Caminho típico: Product/UI Designer experiente → DS Designer.
No dia a dia
No dia a dia: define tokens de design (cores, tipografia, espaçamento, elevações) e versiona como código, constrói componentes reutilizáveis no Figma com variants e propriedades, documenta padrões de uso e boas práticas, trabalha próximo aos devs front-end pra garantir aderência (Storybook, Tailwind, MUI), faz workshops e treina outros designers a usar o sistema, e itera baseado em feedback de uso. Em times maduros, gerencia versão do design system como produto interno.
Habilidades específicas
- Figma avançado (variants, properties, variables, modes)
- Tokens de design (Tokens Studio, Style Dictionary)
- Conhecimento básico de front-end (HTML, CSS, React/Vue)
- Acessibilidade (WCAG AA/AAA) aplicada a componentes
- Documentação técnica clara (Storybook, Zeroheight, ZenHub)
Ferramentas específicas
- Figma + Tokens Studio (combinação padrão)
- Storybook (documentação de componentes pra devs)
- Style Dictionary (tokens como código)
- Zeroheight (documentação visual de design system)
- GitHub (versionamento de tokens e componentes)
- Chromatic ou Percy (visual regression testing)
Roadmap específico
- 1Ter 2-3 anos de Product Designer ou UI sênior antes de mirar DS
- 2Estudar Atomic Design (Brad Frost) e padrões de DS modernos
- 3Dominar Figma profundamente (variants, properties, variables, modes)
- 4Aprender fundamentos de front-end (HTML, CSS, React básico)
- 5Construir DS público no Figma + GitHub como portfólio
Cursos gratuitos
- Brad Frost: Atomic Design (livro online gratuito, referência mundial)
- Design Systems Repo (designsystemsrepo.com): coleção de sistemas reais
- Figma Academy: Design Systems track (cursos oficiais gratuitos)
Projetos pra portfólio
- Construir design system completo (cores, tipografia, 20+ componentes) com docs
- Versionar tokens em GitHub + integrar com Style Dictionary
- Documentar 1 componente complexo (input com 8 estados) no Storybook + Figma
Cargos típicos
Faixa salarial
R$ 6.000 (entrada) a R$ 25.000+ (sênior em big techs). Pleno gira em R$ 8-15k. Sêniores em Nubank, iFood, Magalu, Stone chegam a R$ 18-25k. Remoto pra fora paga US$ 5-10k/mês.
Dicas pra começar
DS é cargo SÊNIOR. Não tente entrar como júnior. Brad Frost (Atomic Design) é leitura obrigatória. Conhecimento básico de front-end é o diferencial real. Separa DS Designer de UI puro. Domine Figma absurdamente (variants, properties, modes). Acompanhe sistemas grandes: Material Design (Google), Polaris (Shopify), Lightning (Salesforce), todos públicos. Cargo perfeito pra perfis sistemáticos e organizados.