Hypertokens: a nova fronteira do Design System projetada para agentes de IA

O time não é um produto, nem um plugin do Figma, é uma proposta de arquitetura concebida por Jake Albaugh e sua equipe para resolver um problema prático: agentes de IA estão lendo arquivos de design como se fossem código-fonte, mas encontram apenas listas soltas de tokens sem contexto estrutural. Hypertokens são a resposta: agrupamentos nomeados de propriedades (ex: surface.card com fill, border, radius, shadow) definidos uma única vez, em formato estruturado (JSON compatível com DTCG), e compilados automaticamente para Figma, CSS, Swift, Svelte etc. É menos sobre nova sintaxe e mais sobre impor disciplina no fluxo, o mesmo que já usamos com tokens, só que escalável para qualquer padrão repetido, não só os pré-definidos pela W3C.

O diferencial está na operação: não é só agrupar, mas gerar *todas as saídas* de forma determinística a partir de um único ponto de verdade. Isso muda o papel do designer: ele deixa de ajustar estilos manualmente em cada ferramenta e passa a mapear intenções visuais como superfícies, tipografias ou espaçamentos, e o sistema traduz isso em código, estilo e componente. O time ainda não existe como recurso, mas já está sendo testado internamente com Code Connect e slots, o que mostra que o Figma está construindo a infraestrutura por trás dele há meses.

A cobertura CEVIU anterior já mostrava o Figma avançando em direção ao design agentic: o Design Agent nativo foi lançado em maio, o MCP permitiu sincronia bidirecional entre Figma e código em abril, e o Config 2026 trouxe camadas de código e motion também em junho. Mas até agora, todos esses recursos operavam com tokens isolados ou componentes já prontos. O time é a primeira proposta explícita para fechar a lacuna entre eles, não só conectar, mas *unificar a origem*. Antes, tínhamos múltiplas cópias manuais de um 'card'; agora, temos um único surface.card que alimenta o agente, o Figma e o CSS ao mesmo tempo. Não é evolução incremental: é mudança de camada, do nível de valor para o nível de intenção agrupada.

Porque IA não entende 'estilo', entende instrução. Um agente que vê .heading-lg precisa vasculhar o CSS inteiro para descobrir que é font-size 24px + line-height 1.3 + weight 600. Com hypertokens, ele lê typography.heading.lg e já sabe exatamente o que aplicar, sem adivinhação, sem perda de precisão. Isso reduz erros de implementação, acelera revisões e, segundo testes preliminares da equipe do Figma, diminui o uso de IA em tarefas de reconstrução visual. Para designers, significa menos tempo corrigindo desvios entre ferramentas e mais tempo definindo regras claras. Para devs, menos código duplicado e menos retrabalho em integrações. E para sistemas de design, é o passo para deixarem de ser bibliotecas estáticas e se tornarem motores executáveis.