Variáveis do Figma: o guia completo de tokens de design em 2026

O QUE SÃO VARIÁVEIS DO FIGMA?

Variáveis são placeholders que você cria uma vez e reutiliza 100 vezes. Muda a variável, tudo muda.

EXEMPLO:

Você cria uma variável chamada color/primary = #6B00D6 (roxo)

Aplica em 50 botões

Depois o cliente pediu para mudar pra azul (#0066FF)

Você muda a variável uma vez

Todos os 50 botões mudam automaticamente

ANTES DE VARIÁVEIS: 30 minutos de trabalho manual

COM VARIÁVEIS: 5 segundos

TIPOS DE VARIÁVEIS

1. COR

Define cores que aparecem em múltiplos elementos

2. NÚMERO

Espaçamento, tamanho de fonte, border-radius, tudo que é número

3. STRING

Nomes, labels, valores texto

4. BOOLEANO

True/false (usado para condições em prototypes)

COMO CRIAR VARIÁVEIS

1. No painel direito, clique em Variables

2. Clique em + pra criar nova

3. Nomeie (ex: color/primary)

4. Defina o valor (ex: #6B00D6)

5. Clique em Create variable

6. Agora você pode usar em qualquer frame

NOMEAÇÃO IMPORTANTE

Não use azul ou botao-cor.

Use nomes SEMÂNTICOS:

• color/primary - cor principal

• color/secondary - cor secundária

• color/text/default - texto padrão

• color/text/muted - texto secundário

• spacing/small - 8px

• spacing/medium - 16px

• spacing/large - 24px

• font-size/body - 16px

• font-size/heading - 32px

Assim você entende o que cada variável faz SEM ver o valor.

APLICAR VARIÁVEIS EM ELEMENTOS

1. Selecione um botão

2. No painel direito, em Fill, clique no ícone de variável

3. Escolha color/primary

4. Pronto. O botão agora usa a variável

SE MUDAR A VARIÁVEL, O BOTÃO MUDA AUTOMATICAMENTE.

DARK MODE COM VARIÁVEIS

Uma das aplicações mais poderosas é dark mode.

Você cria:

• color/primary (light) = #6B00D6

• color/primary (dark) = #9d4edd

No Figma, você pode ter dois grupos de variáveis: light e dark.

Depois, no seu código, você muda entre os dois automaticamente.

EXPORTAR VARIÁVEIS COMO JSON

Para sincronizar com o código:

1. Selecione as variáveis

2. Clique em Export

3. Baixa como JSON

4. Dev implementa no projeto

JSON fica assim:

{

primary: #6B00D6,

secondary: #0066FF,

text-default: #333333

}

TOKENS STUDIO vs VARIÁVEIS NATIVAS

Antes, designers usavam o plugin Tokens Studio.

Agora, Figma tem variáveis nativas.

COMPARAÇÃO:

• Variáveis nativas: Grátis, integrado, mais simples

• Tokens Studio: Mais avançado, sincroniza com GitHub

Para começar: use variáveis nativas.

Se precisar de GitHub sync depois, use Tokens Studio.

CASOS DE USO

1. DESIGN SYSTEM

Se você mantém um design system, variáveis são essenciais.

2. MÚLTIPLOS TEMAS

Light mode, dark mode, high contrast = variáveis conseguem isso.

3. ESCALABILIDADE

Projeto cresce? Variáveis deixam você escalar sem retrabalho.

4. HANDOFF COM DEV

Dev recebe o JSON das variáveis e implementa direto.

DICAS PRO

1. Organize em grupos

Não crie color-1, color-2, color-3.

Use: color/primary, color/secondary, color/accent.

2. Use prefixos

color/ para cores

spacing/ para espaços

font/ para tipografia

3. Teste a sincronização

Crie uma variável, mude o valor, veja todos os elementos atualizarem.

4. Exporte regularmente

Se trabalha com dev, exporte JSON todo mês (ou automatize com API).

COMPATIBILIDADE

Variáveis funcionam em:

• Componentes

• Auto Layout

• Prototypes

• Exportação de código

MAS NÃO funcionam em:

• Tipografia global (ainda não)

• Alguns valores específicos

CONCLUSÃO

Variáveis do Figma em 2026 são obrigatórias para design system.

Se não está usando, comece hoje.