Ferramentas de tokens: Style Dictionary
Transforme e distribua tokens de design entre plataformas usando a ferramenta Style Dictionary.
Ferramentas de tokens: Style Dictionary é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é o Style Dictionary?
O Style Dictionary é uma ferramenta de compilação de código aberto da Amazon que transforma uma fonte JSON de tokens em saídas para plataformas: propriedades personalizadas do CSS, variáveis SASS, constantes Swift para iOS, XML para Android e módulos JavaScript/TypeScript — tudo a partir de uma única fonte de verdade.
Estrutura do projeto
Organize os tokens no diretório tokens/ como arquivos JSON ou JSON5. O Style Dictionary mescla todos os arquivos automaticamente. Separe os arquivos por categoria: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Formato JSON dos tokens
Cada token é um objeto aninhado com uma chave value e campos opcionais type, description e comment. O Style Dictionary transforma a estrutura aninhada em nomes com notação de pontos para a saída.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Arquivo de configuração
O config.json especifica as fontes (arquivos de tokens), as plataformas (web, ios, android) e as transformações e os formatos de cada plataforma. Cada plataforma pode aplicar transformações diferentes e gerar arquivos em formatos distintos.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Transformações
As transformações modificam os valores dos tokens durante a compilação: color/css formata as cores como hexadecimais, size/rem converte px em rem e name/cti/kebab gera nomes em kebab-case a partir da estrutura aninhada de categoria-tipo-item.
Formatos
Os formatos determinam o conteúdo do arquivo de saída. Integrados: css/variables gera um bloco :root do CSS, scss/variables gera variáveis SASS e javascript/module exporta um objeto JS. Formatos personalizados permitem qualquer estrutura de saída necessária.
Referências entre tokens
Faça referência a outros tokens usando a sintaxe de chaves: {"value": "{color.brand.primary}"}. O Style Dictionary resolve as referências durante a compilação, gerando valores concretos. As referências criam o mapeamento de alias para globais.
Transformações personalizadas
Registre transformações personalizadas para lidar com necessidades específicas do projeto: remova o canal alfa das cores, converta valores de opacidade de ferramentas de projeto e adicione prefixos de fornecedores. As transformações personalizadas se integram ao fluxo de compilação como as transformações integradas.
Execução da compilação
Execute npx style-dictionary build ou adicione-o ao seu script de compilação do npm. Os arquivos de saída vão para os diretórios buildPath configurados. Registre os arquivos gerados no repositório ou gere-os durante a compilação na CI — ambos os padrões são comuns.
Integração com o Figma
O Tokens Studio para Figma sincroniza o JSON de tokens com um repositório do GitHub. O Style Dictionary é executado na CI quando o JSON muda, gerando automaticamente CSS e arquivos para as plataformas atualizados. As alterações de projeto chegam ao código sem copiar e colar manualmente.
Versionamento de tokens
Versione seu pacote de tokens no npm. Os consumidores fixam uma versão e fazem atualizações deliberadamente. Os registros de alterações documentam tokens adicionados, obsoletos e removidos. O versionamento semântico comunica alterações incompatíveis e atualizações seguras.
Verificação de conhecimento
Qual é a função de uma "transformação" no Style Dictionary?
Resumo
O Style Dictionary transforma uma única fonte JSON de tokens em saídas específicas para cada plataforma por meio de transformações e formatos configuráveis. Ele permite a sincronização de tokens do Figma para o código, a consistência entre plataformas e pacotes de tokens versionados que as equipes podem consumir e atualizar deliberadamente.
Perguntas Frequentes
A aula “Ferramentas de tokens: Style Dictionary” é grátis?
Sim — o texto completo de “Ferramentas de tokens: Style Dictionary” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Ferramentas de tokens: Style Dictionary”?
Transforme e distribua tokens de design entre plataformas usando a ferramenta Style Dictionary. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Ferramentas de tokens: Style Dictionary”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que são tokens de design
- Convenções de nomenclatura de tokens
- Implementando temas para várias marcas com variáveis CSS
- Ferramentas de tokens: Style Dictionary