# Do CSS do kit pro Figma editável — ângulo em pixel, desfoque dobrado

Aprendido em 2026-09-24 levando o diálogo de permissões montado com o kit NASH
(artefato, CSS medido no Chrome) para o Figma em auto-layout (`242:38` no
arquivo `<figma-ds>`). Diferença média de 6,5/255 contra o
artefato; fundo e cartão a 1,5, o resto é a troca de fonte.

- **`conic-gradient` numa caixa não quadrada mede ângulo em pixel; o angular
  do Figma mede no quadrado normalizado.** Numa pílula 412×56 isso muda onde
  o arco cai. O transform `[[1,0,0],[0,H/W,0,5−H/(2W)]]` põe o espaço do
  degradê em pixel, e cada parada `s` do CSS vai pra posição
  `(from + s − 90) / 360`, com uma parada interpolada em 0 e em 1 no ponto da
  volta.
- **Desfoque do Figma é o dobro do `blur()` do CSS**, tanto de fundo quanto de
  camada; sombra projetada é 1:1 com `box-shadow`.
- **Frame criado com `createAutoLayout` conta o traço no tamanho**
  (`strokesIncludedInLayout`): um traço de 1,5 cresce o cartão 3 px e empurra
  o absoluto que foi posicionado antes. Desligue antes de medir.
- **Ícone de 24 desenhado em 18 afina o traço junto**: 1,5 na caixa de 24 vira
  1,125. Importe o SVG em 24 e use `rescale(0.75)`, que escala o traço como o
  navegador.
- **Fonte local não carrega pelo MCP do Figma.** Monte em auto-layout com a
  fonte que o arquivo já usa (aqui Archivo), para a troca de família no Figma
  desktop refluir sem quebrar nada.