Glossário de design systems

O vocabulário em que o trabalho com design systems se apoia, definido de forma simples. Estas entradas descrevem a área, não o produto, então servem mesmo que você nunca abra o Flash DSM.

Deriva de tokens

Deriva de tokens é o afastamento gradual entre as decisões registradas no design system e os valores que o produto realmente usa. Acontece quando uma superfície - um arquivo do Figma, uma folha de estilos, código gerado por IA - deixa de referenciar a fonte compartilhada e acumula os próprios valores.

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 design ao código

A passagem do design ao código descreve a transformação de decisões tomadas em uma ferramenta como o Figma em código front-end funcional. A versão duradoura transfere tokens de design em vez de gerar marcação a partir de um canvas, porque os tokens continuam válidos quando a interface muda e a marcação gerada não.

Escala de cor

Uma escala de cor é um conjunto ordenado de tons de um mesmo matiz, numerado por convenção de 50 a 900, construído para que os passos sejam perceptualmente uniformes e certas combinações atendam a razões de contraste conhecidas. Permite escolher cores por função e passo em vez de valores hexadecimais arbitrários.

Escala tipográfica

Uma escala tipográfica é o conjunto ordenado de tamanhos de fonte que um design system permite, geralmente gerado multiplicando um tamanho base por uma razão constante. Restringir o texto a esses passos é o que mantém a tipografia consistente em uma interface construída por muitas pessoas.

MCP para tokens de design

Model Context Protocol é um padrão aberto para conectar assistentes de IA a ferramentas e dados externos. Aplicado a tokens de design, um servidor MCP expõe os valores atuais de um projeto a um agente de programação, para que os componentes gerados usem o design system real em vez de valores inventados pelo modelo.

Token de design

Um token de design é um valor nomeado que guarda uma única decisão de design, como uma cor, um passo de espaçamento ou um tamanho de fonte, para que essa decisão possa ser reutilizada nas ferramentas de design e no código em vez de ser escrita à mão em cada lugar.

Token semântico

Um token semântico é um token de design nomeado pela função que cumpre e não pelo valor que carrega, como --color-text-danger em vez de --color-red-600. Em geral ele referencia um token primitivo, o que permite mudar o valor subjacente sem renomear nada que o utilize.

Tokens de modo escuro

Tokens de modo escuro são um segundo conjunto de valores ligado aos mesmos nomes semânticos do tema claro, de modo que trocar de modo reaponta nomes como --color-surface para outras cores sem que nenhum componente precise saber qual modo está ativo.

Variáveis do Figma

Variáveis do Figma são valores nomeados guardados dentro de um arquivo do Figma para cores, números, textos e booleanos, com modos para casos como tema claro e escuro. São a forma nativa de tokens de design no Figma, mas lê-las pela API REST do Figma exige um plano Enterprise.