Figma Variables: Como criar temas claros e escuros no Design System

Resposta rápida: As Figma Variables são valores dinâmicos reutilizáveis que substituíram a necessidade de duplicar componentes para diferentes temas de cor. Para estruturar temas claro (Light Mode) e escuro (Dark Mode) de forma profissional, você deve criar uma coleção de variáveis baseada em tokens semânticos (ex: bg-primary, text-secondary) e, em seguida, adicionar múltiplos modos (Modes) a essa coleção. Isso permite que qualquer frame herde e alterne as cores automaticamente ao mudar as configurações de exibição do contêiner.

A diferença entre Cores Primitivas e Semânticas

O erro mais comum na transição para o Figma Variables é tentar aplicar as cores primitivas (como blue-500 ou white) diretamente nos elementos da tela. A arquitetura recomendada para Design Systems estruturados exige duas camadas distintas:

1. Tokens Primitivos: Onde você define a paleta global de cores física da marca (ex: brand-blue = #0055FF, slate-900 = #0F172A).
2. Tokens Semânticos: Onde você atribui papéis funcionais para as cores baseadas no contexto (ex: bg-page recebe slate-50 no modo claro e slate-900 no modo escuro).

Ao construir as telas, os seus componentes devem referenciar exclusivamente os tokens semânticos. Isso garante que a transição de cor ocorra de forma harmônica e controlada.

Como estruturar os Modos no Figma

Para criar o switch de temas, abra o painel Local Variables e clique no ícone de adição para criar colunas extras de variáveis (os modos). Nomeie a primeira coluna como Light e a segunda como Dark.

A partir daí, basta mapear cada variável semântica para apontar para a respectiva cor primitiva do tema. Por exemplo:

• A variável text-main apontará para slate-900 na coluna Light e para white na coluna Dark.

Ao finalizar, ao arrastar qualquer frame ou componente para dentro de uma seção configurada com o modo correspondente, o Figma reajustará toda a paleta instantaneamente, sem que você precise alterar uma única camada de cor manualmente.

Integração de Design com Código

Essa facilidade do Figma Variables se estende ao desenvolvimento de código-fonte. Projetos maduros de front-end, como discutimos no guia para criar um design system multiplataforma, exportam essas variáveis diretamente em formato JSON.

Isso permite que as mesmas cores definidas no Figma alimentem frameworks utilitários ou APIs de geração de código visual automática, como as novas ferramentas de conversão de wireframes em código. O trabalho do designer de UI agora está mais próximo do que nunca da arquitetura lógica desenvolvida em copilotos como o Claude 3.5 Sonnet.

Minha leitura

O uso de Figma Variables com modos é uma obrigatoriedade para qualquer profissional que trabalha com interfaces escaláveis. Ele elimina o retrabalho crônico de manter layouts duplicados e estabelece um canal direto de comunicação semântica de cores com os desenvolvedores de front-end.

Leia também

• Como criar um design system multiplataforma sincronizando Figma e código
• Do desenho ao código: novas IAs que transformam wireframes feitos a mão em sites prontos
• Claude 3.5 Sonnet: Melhores Práticas para Desenvolvimento de Software

Fonte

• Guia oficial de variáveis do Figma: https://help.figma.com/hc/en-us/articles/15343816063383-Guide-to-variables-in-Figma