Frontend Academy · Aula

Tokens de design com Style Dictionary

Definir tokens de cor, espaçamento e tipografia em JSON e transformá-los com Style Dictionary em variáveis CSS, constantes JS ou formatos iOS/Android.

Aula 2 de 414 etapas

Tokens de design com Style Dictionary é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que são tokens de design?

Tokens de design são os valores primitivos nomeados de um sistema de design: cores, espaçamento, tamanhos de fonte, raios de borda e sombras. Eles são a fonte de verdade — cada componente deriva deles seus estilos.

Por que os tokens são importantes

Os tokens desacoplam as decisões de design da implementação. Altere color.primary de azul para verde uma única vez, e todos os componentes que o utilizam serão atualizados. Eles também permitem distribuir o mesmo design para web, iOS e Android.

Armazenamento de tokens

Armazene os tokens em JSON ou YAML — um formato neutro que pode ser consumido por ferramentas em várias plataformas. JSON é o mais comum.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (da Amazon) é a ferramenta de compilação de facto para tokens de design. Ela lê os tokens e os transforma em vários formatos de saída: variáveis CSS, SCSS, constantes JS, Swift para iOS e XML para Android.

npm install -D style-dictionary

Configuração

Crie style-dictionary.config.js descrevendo os tokens de entrada e as plataformas de saída.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Executando a compilação

Execute a CLI para gerar todas as plataformas.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Saída CSS gerada

Variáveis CSS com um esquema de nomenclatura consistente (kebab-case com namespace).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Saída JS gerada

Objeto JS para uso em código JS/TS (configuração do Tailwind, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Convenções de nomenclatura de tokens

Use nomes semânticos (color.primary) em vez de literais (color.blue-500). Tokens semânticos permitem alterar valores sem renomeá-los. Sistema de dois níveis: paleta literal (blue-500) → alias semântico (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Temas com tokens

Compile várias plataformas com entradas diferentes para oferecer suporte a temas (claro/escuro) — os mesmos nomes, valores diferentes.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Categorias de tokens

Categorias comuns: cor, espaçamento, tipografia (família da fonte, tamanho, altura da linha e peso), borda (raio e largura), sombra, transição (duração e função de temporização), z-index e ponto de quebra.

Ferramentas de registro de tokens

Além do Style Dictionary: Tokens Studio (plugin do Figma), Specify e Supernova. Elas permitem que designers gerenciem tokens no Figma e os sincronizem automaticamente com a base de código.

Verificação rápida

Qual é o principal benefício de usar tokens de design com o Style Dictionary?

Responda na aula interativa

Recapitulação: tokens de design

Tokens são valores primitivos nomeados (cor, espaçamento e tipografia) — a fonte de verdade de um sistema de design. Armazene-os como JSON. O Style Dictionary os transforma em variáveis CSS, JS, iOS e Android. Prefira nomes semânticos (primary) a literais (blue-500). Dois níveis: paleta → alias semântico. Temas por meio de compilações separadas. Sincronize-os do Figma usando o Tokens Studio.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 41
Aulas: 163

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Tokens de design com Style Dictionary” é grátis?

Sim — o texto completo de “Tokens de design com 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Tokens de design com Style Dictionary”?

Definir tokens de cor, espaçamento e tipografia em JSON e transformá-los com Style Dictionary em variáveis CSS, constantes JS ou formatos iOS/Android. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 2 de 4.

Quanto tempo leva a aula “Tokens de design com 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 Frontend Academy?

Sim. Cada aula de Frontend 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

Storybook: histórias, controlos e documentação
Tokens de design com Style Dictionary
Versionamento e publicação no npm
Consumo de um sistema de design

← Voltar para Frontend Academy