Guia — Figma

Figma é a fonte de verdade visual. Toda implementação de tela ou componente começa aqui.

Quando usar

Situação	Ação
Implementar novo componente	Extrair do Figma antes de codar
Implementar tela	Mapear componentes Figma → atenvi-ui antes de montar
Revisar implementação	Comparar screenshot vs Figma
Dúvida de token (cor, espaçamento)	Consultar variáveis no Figma

Fluxo: componente novo

Compartilhar URL do frame/componente Figma na demanda
get_design_context — extrair estrutura, variantes, props
get_variable_defs — extrair tokens (cores, espaçamentos, tipografia)
Implementar em atenvi-ui seguindo o guia de componentes
get_screenshot — capturar referência visual
Comparar implementação vs screenshot
Ajustar até aprovação

Fluxo: tela nova

Compartilhar URL da tela Figma
get_design_context — mapear seções e componentes usados
Identificar quais componentes já existem em atenvi-ui / shadcn
Listar componentes faltantes → criar antes de montar a tela
Montar tela no projeto (atenvi-admin ou atenvi-web)
get_screenshot — capturar referência
Comparar e ajustar

Fluxo: auditoria de fidelidade

Usar antes de abrir PR em qualquer tela ou componente com referência Figma:

get_screenshot do frame Figma
Screenshot da implementação local (Playwright ou browser)
Comparar: espaçamentos, cores, tipografia, estados (hover, disabled, error)
Registrar divergências e corrigir

Code Connect

Mapear componentes Figma para componentes atenvi-ui via Code Connect:

Arquivo: <ComponentName>.figma.ts na pasta do componente
Usar get_code_connect_suggestions para sugestões automáticas
Manter mapeamento atualizado ao renomear/refatorar componentes

Tokens

Tokens do Figma (get_variable_defs) devem refletir o tailwind.config.ts de atenvi-ui. Divergência entre Figma e Tailwind config → atualizar Tailwind config.

Regras

Nunca hardcodar valor que existe como token no Figma
Toda variante no Figma tem variante CVA correspondente
Sem "aproximar" — se o espaçamento é 12px no Figma, é p-3 no código