Kit Figma ↔ motion
Os criadores projetam melhor no Figma do que em prompts. Mantenha cada componente do kit espelhado como um quadro editável e permita que eles editem lá.
Configuração única
- Uma página no arquivo de marca deles (ex.: "Claude - Editável") com uma seção por versão do kit ("Motion kit v1", "Vlog kit v1").
- Um quadro por componente no tamanho do quadro do vídeo, texto real, cada camada nomeada.
- Cores e tipografia vinculadas a variáveis (uma coleção "Motion": tinta, papel, destaque/marcador, cinzas; tamanhos de fonte e espaçamentos como números) para que uma mudança de cor seja uma única edição.
- Use o MCP do Figma (carregue a skill
figma-useantes de escrever no arquivo). Registre a chave do arquivo e a página emCLAUDE.md.
Quando eles disserem "mudei os quadros"
- Leia as camadas de cada quadro alterado: fontes, pesos, tamanhos, alturas de linha, espaçamentos, posições, quais variáveis usam, raio de canto, traços.
- Porte as diferenças para os componentes e
brand.json(tokens primeiro, código do componente apenas para layout). - Renderize imagens de pré-visualização dos mesmos componentes e compare lado a lado com os quadros.
- Liste o que mudou ("título Light 120 → Regular 108, padding 64 → 80, label agora maiúscula mono").
Quando o kit mudar no código
(por exemplo, um layout de quadro estreito, uma faixa de segurança de legenda) atualize os quadros correspondentes para que os dois nunca se afastem, ou informe ao criador quais quadros estão agora desatualizados.
Gosto aprendido (pergunte ao seu criador, estes são exemplos)
Light/regular em tamanhos grandes, nunca negrito pesado; monospace light em maiúsculas em labels; padding de 80 px; bastante espaço; um movimento suave por elemento; sem mockups de dispositivos (agregam pouco); prefira sobreposições de texto e notas pessoais.