O que é um design system?
Um design system é o conjunto compartilhado de decisões de design, componentes e regras que uma equipe usa para construir um produto de forma consistente. Costuma incluir tokens de design, uma biblioteca de componentes, diretrizes de uso e documentação, mantidos como fonte única de verdade para design e código.
Do que ele é feito
A maioria dos design systems que funcionam tem quatro camadas, e os que fracassam normalmente não têm a primeira.
Tokens de design: os valores nomeados por baixo de tudo - cor, tipografia, espaçamento, raio, sombra, movimento.
Componentes: as peças reutilizáveis, construídas para referenciar tokens em vez de valores fixos. Um botão, um campo de formulário, um modal.
Diretrizes: quando usar qual componente, como escrever para ele, o que a acessibilidade exige.
Documentação: a superfície legível onde as pessoas encontram tudo isso.
O que ele não é
Não é uma biblioteca de componentes. Uma biblioteca é uma camada. Um design system sem tokens entrega componentes consistentes apoiados em valores inconsistentes.
Não é um arquivo do Figma. Um arquivo do Figma é uma representação dele. Se o código não referencia as mesmas decisões, você tem dois design systems que por acaso se parecem.
Não é a documentação. A documentação descreve o sistema. Times que começam por um site de documentação antes de decidir os tokens escreveram a descrição de nada.
Por que eles se desviam
O modo de falha de um design system não é o colapso, é a erosão. Ninguém decide abandoná-lo. Simplesmente acumulam-se valores fora dele:
- Uma designer precisa de uma cor que não está na paleta e escolhe uma no arquivo.
- Um dev sob prazo escreve
padding: 14pxem vez de acrescentar um passo de espaçamento. - Um assistente de IA gera um componente com hexadecimais inventados, porque não tem como ler o sistema.
Cada caso é defensável isoladamente. Juntos produzem uma base de código com vários design systems paralelos que ninguém decidiu criar.
O contraponto não é disciplina, que não escala. É tornar o sistema o caminho de menor resistência: disponível em cada ferramenta que o consome, no formato que aquela ferramenta espera, sem um passo manual.
Quanto tempo leva para construir
Feito à mão, um primeiro sistema coerente costuma levar de dias a semanas. Não porque alguma decisão seja difícil, mas porque são centenas e elas interagem. Escalas de cor que sustentam contraste em cada combinação, um modo escuro que não é uma inversão, uma nomenclatura semântica que sobreviva a um rebranding.
Onde o Flash DSM entra
O Flash DSM gera a camada de tokens e as especificações de componentes a partir de um prompt, uma URL, um arquivo do Figma ou uma captura, e depois os mantém sincronizados com o código, com o Figma e com os agentes de IA que escrevem código.