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.

Exportador de Tokens Figma | Ferramenta online grátis

Exemplos

1. Exportação de Tokens Studio para Tailwind

Desenvolvedor Front-end

Contexto

Um desenvolvedor precisa configurar o tema de um novo projeto utilizando os tokens de design definidos no Figma.

Problema

O JSON exportado do Tokens Studio contém cores e espaçamentos misturados que precisam ser mapeados manualmente para o theme.extend do Tailwind.

Como usar

Cole o JSON de tokens no campo de entrada, selecione 'Tailwind theme.extend (JS)' como formato de destino e defina o formato de cor como 'Hex'.

{
  "color": {
    "brand": {
      "primary": { "$value": "#2563eb", "$type": "color" },
      "secondary": { "$value": "#9333ea", "$type": "color" }
    }
  },
  "spacing": {
    "md": { "$value": "16px", "$type": "spacing" }
  }
}

Resultado

Um objeto JavaScript contendo a estrutura de cores e espaçamentos mapeada corretamente para o Tailwind CSS.

2. Configuração de Tema HSL para shadcn/ui

Engenheiro de UI

Contexto

A equipe de design atualizou a paleta de cores da marca no Figma e o engenheiro precisa atualizar as variáveis CSS do projeto.

Problema

O shadcn/ui exige que as cores das variáveis CSS estejam no formato HSL separado por espaços (ex: 221 83% 53%) sem a função hsl() embrulhando.

{ "color": { "brand": { "primary": { "$value": "#2563eb" } } } }

Exportador de Tokens Figma | Ferramenta online grátis | Elysia Tools

Exportador de Tokens Figma

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Exportação de Tokens Studio para Tailwind

2. Configuração de Tema HSL para shadcn/ui

Perguntas frequentes

Exemplos JWT

Coleções Postman - Testes de API

Amostras JSON de Terraform Plan

Exemplos de Rastreamento Distribuído

Conversor de Escala de Cinza

Gerador de cascata de tokens de cor

Extrator de tokens de tema ECharts

De paleta de imagem para design tokens

Ferramentas de intercambio JSON e traducao de formatos

Ferramentas de inspecao, diff e transformacao JSON

Geradores de schema JSON, dados mock e fixtures de API

Ferramentas de formatação, diff e normalização de JSON