Exportação e código

Seus tokens não precisam ficar só no Figma. Exporte-os pelo app web no formato que seu código realmente usa — sem plugin — ou deixe suas ferramentas de build e de IA buscarem os tokens mais recentes como código.

Exportar pela web

Na lista de projetos, abra o menu ⋯ de um cartão de projeto e escolha Exportar — ou, dentro de um projeto, clique com o botão direito em uma coleção na barra lateral esquerda (ou em uma linha da grade) e escolha Exportar esta coleção. Abre uma caixa de diálogo com:

Escopo — as coleções a exportar: marque Todas as coleções ou escolha coleções individuais. Quando aberta a partir de uma coleção, essa coleção já vem marcada.
Formato — um dos seis (abaixo).
Resolver referências para valores — transforma aliases como {Primitive/blue/500} no valor final. Os formatos de código de plataforma sempre resolvem; para eles, a caixa fica marcada e travada.

A caixa de diálogo Exportar com a lista de formatos aberta: DTCG, JSON, CSV, CSS, SwiftUI e Jetpack Compose

Formato	Saída
DTCG (`.tokens.json`)	Formato do W3C Design Tokens Community Group
JSON	Variáveis brutas, uma entrada por token
CSV	Uma planilha — uma linha por variável, uma coluna por modo
CSS	Propriedades personalizadas — modo padrão em `:root`, outros modos em `[data-theme="…"]`
SwiftUI	Um tipo por coleção, uma instância estática por modo
Jetpack Compose	Kotlin — uma classe por coleção, um valor por modo

Código de plataforma pronto para colar

Escolha CSS, SwiftUI ou Jetpack Compose e você recebe código para colocar direto no seu app. A conversão roda no servidor e é determinística — os mesmos tokens sempre geram os mesmos bytes, então os diffs ficam limpos e o cache funciona bem. Uma coleção com modos light e dark fica assim:

/* CSS custom properties */
:root {
  --colors-button-background: #18181b;
  --colors-radius-md: 8px;
}
[data-theme="dark"] {
  --colors-button-background: #fafafa;
}

// SwiftUI — one instance per mode
struct ColorsTokens {
  let buttonBackground: Color
  let radiusMd: CGFloat
  static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
  static let dark  = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}

// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark  = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)

As referências são sempre resolvidas para valores finais; se alguma não puder ser resolvida, fica como comentário, nunca como um valor inventado.

Importar tokens de volta

O menu ⋯ de um cartão de projeto também tem Importar. Solte um arquivo JSON ou DTCG e você vê uma prévia — número de coleções, variáveis e modos, além dos avisos — antes de qualquer coisa ser criada. Confirme e ele entra como uma nova coleção (as cores são interpretadas com flexibilidade: hexadecimal de 3 ou 6 dígitos, rgb() e hsl() funcionam). A mudança fica registrada no histórico como importação.

Valores que ele não consegue representar — tokens compostos como tipografia ou sombra, dimensões em unidades diferentes de px, cores que não consegue ler ou valores que não correspondem ao tipo — são ignorados em vez de adivinhados, e a prévia mostra quantos e quais. Importar o mesmo arquivo de novo adiciona mais uma coleção nova.

Buscar pela API e pelo MCP

Para pipelines de CI e ferramentas de programação com IA, não exporte à mão — busque. Os mesmos formatos de plataforma estão disponíveis na API REST com ?format=css|swift|compose, e o servidor @variablejar/mcp oferece uma ferramenta get_tokens para que os agentes do seu IDE busquem os tokens mais recentes como código. Um único token de API do projeto serve para os dois.