# Exportador de Tokens Figma

Cole um JSON de variáveis Figma / Tokens Studio e exporte para Tailwind, variáveis CSS shadcn, Style Dictionary ou SCSS. Preserva tokens de cor, espaçamento e fonte com inferência de tipo.

> Página canônica: https://elysiatools.com/pt/tools/figma-tokens-export

- **Categoria:** Design

- **Palavras-chave:** figma, design tokens, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, variáveis css, tema, design system

## Visão geral

Cole um **JSON de variáveis Figma / Tokens Studio** e exporte para um de quatro alvos populares:

- **Tailwind** `theme.extend` — mapeia automaticamente `color/*` → `colors`, `spacing/*` → `spacing`, etc.
- **Variáveis CSS shadcn/ui** — convenção HSL separada por espaços (`--background: 0 0% 100%`).
- **Style Dictionary / W3C DTCG** — reemite a forma canônica `{ $value, $type }`.
- **Variáveis SCSS** — estilo `$color-brand-primary: #2563eb;`.

**Formas de entrada aceitas** — Tokens Studio/W3C (`$value/$type`), legacy (`value/type`), valores aninhados simples e objetos rgba da API REST do Figma.

**Inferência de tipo** — quando um token não tem `$type` explícito, ele é inferido: `#hex`/`rgb()`/cores nomeadas → color; valores com `px/rem/em/%` → dimension; números puros → number; resto → string. A opção **Color format** re-renderiza cada cor como `hex`, `rgb()`, `hsl` ou `hsl()`.

## Entradas

- **JSON de tokens Figma** (textarea): Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
- **Formato de destino** (select): Which target format to export the tokens to.
- **Formato de cor** (select): How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

## Quando usar

- Ao exportar variáveis de design do Figma ou Tokens Studio e precisar integrá-las diretamente no arquivo de configuração do Tailwind CSS.
- Ao configurar ou atualizar temas para componentes shadcn/ui que exigem variáveis CSS no formato HSL separado por espaços.
- Ao centralizar a especificação de design tokens usando formatos padronizados como Style Dictionary (W3C DTCG) ou variáveis SCSS.

## Como funciona

- Cole o JSON de variáveis do Figma ou do Tokens Studio no campo de entrada de texto.
- Selecione o formato de destino desejado, como Tailwind, CSS shadcn, Style Dictionary ou SCSS.
- Escolha a formatação de cor de saída preferida, incluindo Hex, RGB, HSL separado por espaços ou HSL CSS padrão.
- Copie o código gerado automaticamente com os tipos inferidos e a estrutura mapeada para o seu projeto.

## Casos de uso

- Sincronizar tokens de cores e espaçamentos do Figma diretamente com o arquivo de configuração do Tailwind CSS.
- Gerar variáveis CSS no formato HSL compatível com o sistema de temas do shadcn/ui.
- Converter objetos RGBA brutos da API REST do Figma em variáveis SCSS limpas para projetos web.

## Perguntas frequentes

### Quais formatos de entrada de JSON são aceitos?

Aceita formatos do Tokens Studio/W3C ($value/$type), formatos legados (value/type), valores aninhados simples e objetos RGBA da API REST do Figma.

### Como funciona a inferência automática de tipos?

Valores hexadecimais ou RGB são identificados como cores, valores com px/rem/em/% como dimensões, números puros como números e o restante como strings.

### Como exportar tokens de cores no formato exigido pelo shadcn/ui?

Selecione o formato de destino 'Variáveis CSS shadcn/ui (HSL)' e defina o formato de cor como 'HSL separado por espaços'.

### O que a opção de exportação para Tailwind gera?

Gera um objeto de configuração estruturado para ser inserido diretamente dentro da propriedade theme.extend do seu arquivo Tailwind.

### A ferramenta altera os valores das unidades de medida?

Não, ela preserva as unidades originais (como px ou rem) e apenas infere o tipo de dimensão correspondente para a exportação.

## Ferramentas relacionadas

- [Conversor de Escala de Cinza](https://elysiatools.com/pt/tools/color-grayscale-converter): Converter cores em escala de cinza com múltiplos métodos de conversão e controle de intensidade
- [Gerador de cascata de tokens de cor](https://elysiatools.com/pt/tools/color-token-cascade-generator): Transforma um hex principal em uma cascata completa de tokens, variaveis CSS e JSON de Style Dictionary
- [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
- [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons
- [Planejador de orçamento de latência de API](https://elysiatools.com/pt/tools/api-latency-budget-planner): Planeje e visualize um orçamento de latência de API. Insira um alvo P99 (ex. ≤ 300ms) e a alocação por estágio (DNS, TCP, TLS, TTFB, Processing, Network) para ver um waterfall ao vivo, a utilização do orçamento e alertas de excesso. Opcionalmente cole um trace OpenTelemetry ou Datadog para deduzir uma alocação medida.
- [Planejador de migracao CSV para banco de dados](https://elysiatools.com/pt/tools/csv-to-database-migration-planner): Infere um schema relacional a partir de CSV e gera planos CREATE TABLE e ALTER para PostgreSQL, MySQL, SQLite ou SQL Server
- [Studio de consulta e transformacao JSONata](https://elysiatools.com/pt/tools/jsonata-query-transform-studio): Visualize consultas e transformacoes no estilo JSONata, compare resultados e exporte em JSON, CSV, YAML ou Markdown.
- [Gerador e Analisador de JWK](https://elysiatools.com/pt/tools/jwk-generator): Gera JSON Web Keys (JWK) para RSA, EC (P-256/P-384/P-521/secp256k1) e OKP (Ed25519/Ed448/X25519/X448), ou analisa um JWK existente para inspecionar parâmetros, impressão e metadados

## Exemplos

- [Exemplos JWT](https://elysiatools.com/pt/samples/jwt-samples): Exemplos completos de JWT da estrutura básica de tokens às implementações de segurança avançadas
- [Coleções Postman - Testes de API](https://elysiatools.com/pt/samples/postman-collections): Exemplos abrangentes de coleções Postman incluindo testes de API, scripts de automação, variáveis de ambiente, servidores mock e padrões avançados de teste para REST APIs
- [Amostras JSON de Terraform Plan](https://elysiatools.com/pt/samples/terraform-plan-json-samples): Arquivos Terraform plan JSON para visualizacao de dependencias e revisao de mudancas, no estilo terraform show -json
- [Exemplos de Rastreamento Distribuído](https://elysiatools.com/pt/samples/distributed-tracing-samples): Exemplos completos de rastreamento distribuído usando Jaeger, OpenTelemetry e ferramentas modernas de observabilidade