Na primeira vez que o Claude Code desenhou algo no meu arquivo do Figma, pensei: isso vai me abrir tantas oportunidades. E abriu. Hoje o Figma é onde acontece a maior parte do trabalho do meu agente: em dois meses, a skill de Figma respondeu por 480 de 528 chamadas de skills. Conto mais sobre o meu setup em Claude Code não é para código.
Por que Figma e não geração de imagens
Porque eu preciso de vetor. Uma imagem gerada é uma figura chapada. Um arquivo do Figma é algo com que posso continuar trabalhando:
- Camadas e texto de verdade. Posso corrigir um erro de digitação, trocar um número ou traduzir um slide sem redesenhar nada.
- Meu design system. Cores, tipografia e componentes vêm dos meus tokens, então cada peça nova combina com as anteriores.
- Impressão e web de uma única origem. Os mesmos frames são exportados como arquivos de impressão para estandes de feira e como SVG para o meu site.
- Sigo com a mão na massa. Posso abrir o arquivo e mudar qualquer coisa eu mesma.
O que vive no meu Figma
- Minha loja de templates do Notion. O design system dela tem 55 variáveis, 13 estilos de texto e 6 conjuntos de componentes, além das capas e diagramas da primeira leva de 28 artigos do blog, cada um com versão para celular.
- Apresentações da empresa em três idiomas. Um deck sobre data centers em contêiner tem 15 slides em inglês, russo e turco, mantidos em sincronia.
- Estandes de feira e impressão. Painéis de estande, banners, um folheto de três dobras, vouchers e certificados, exportados para impressão.
- Este site. Os ícones das seções da página inicial do zoyak.tech nasceram no Figma.
A loja de templates é o trabalho de que mais me orgulho. Ela é muito boa não só no design, mas também no conteúdo, e pretendo usar esse conteúdo nos meus próprios estudos.
O ciclo: o agente rascunha, eu edito, o site recebe a minha versão
O agente nunca manda um design direto para o site. Ele desenha no meu arquivo, eu olho, edito à mão, e só então o resultado é exportado.
Os ícones da página inicial são um bom exemplo. O agente desenhou várias direções lado a lado, eu escolhi uma e refinei os detalhes eu mesma, a ponto de afinar o bloco de páginas do livro de Studies. Os SVGs do site foram exportados dos meus frames editados, então cada mudança que fiz à mão foi ao ar exatamente como eu a deixei.
O que o agente teve de aprender sobre o Figma
Trabalhar pela API do Figma não é o mesmo que trabalhar no Figma à mão. A memória do meu agente agora tem 17 notas só sobre o Figma. Algumas das lições:
- A largura do texto precisa ser medida. Não dá para adivinhá-la pelo número de letras.
- Frames cortam o conteúdo. Um elemento que “está lá” pode estar invisível.
- A opacidade mora em dois lugares. Opacidade do preenchimento e opacidade da camada são coisas diferentes.
- IDs de nós caducam. Uma referência que funcionava ontem pode não apontar para nada hoje.
- Logos não passam de um arquivo para outro pela API, então são refeitos ou copiados à mão.
- A exportação de SVG tem suas manias, então os arquivos exportados são conferidos antes de ir ao ar.
- Animações não podem ser feitas pela API.
Minhas regras para o trabalho de design
O agente também segue as regras que eu lhe dei para tudo o que é visual:
- Mostrar primeiro no Figma, não no site no ar.
- Conjuntos de ícones de verdade, nunca emoji, em tudo o que vai ao ar.
- Quando o assunto é uma ferramenta específica, usar o logo real dela, redesenhado no meu estilo, e não uma metáfora.
- Infográficos leves e arejados: fundos claros, gradientes suaves, uma única cor de destaque.
Por que isso importa
Vetor significa que o trabalho continua sendo meu. O agente me leva a uma primeira versão em minutos, e tudo o que vem depois continua editável, por ele ou por mim. Para alguém que pensa visualmente, mas nunca teve uma equipe de design à disposição, essa é a oportunidade que eu vi no primeiro dia.