Figma Use

figma-use é a skill que deve ser instalada antes de toda chamada a `use_figma`, para que o JavaScript seja executado com segurança no contexto de um arquivo do Figma. Ela dá suporte a trabalhos de implementação de design, como criar e editar nós, conectar variáveis e estilos, montar componentes e variações e inspecionar a estrutura do arquivo de forma programática. O repositório inclui orientações de uso, armadilhas comuns e padrões para reduzir erros frequentes de automação no Figma.

O figma-generate-design ajuda a transformar páginas codificadas, modais, drawers, sidebars, painéis e outras telas com várias seções em Figma usando o design system publicado. Ele localiza componentes, variáveis, estilos e assets de biblioteca a partir do Code Connect e de outras fontes relacionadas, e então monta a tela seção por seção para a Design Implementation, em vez de redesenhar tudo manualmente. Use o guia do figma-generate-design quando você precisar de alta fidelidade ao código e aos tokens.

O figma-create-new-file cria um novo arquivo em branco no Figma ou no FigJam em rascunhos, com padrões para tipo de editor e nome do arquivo. Este skill figma-create-new-file ajuda na implementação de design, em prototipagem rápida e em iniciar uma tela nova antes de use_figma. Também faz a resolução de planKey via whoami quando necessário.

O figma-implement-design transforma telas do Figma em código pronto para produção no seu repositório, buscando alta fidelidade visual em layout, estados, tokens e comportamento responsivo. Use-o para implementação de Figma para código, não para editar Figma, mapear code connect ou gerar novos designs. Inclui orientação de instalação, notas de uso e regras de fronteira para fluxos de trabalho de Implementação de Design.

O figma-generate-library ajuda a transformar um codebase em uma biblioteca de design system no Figma, com tokens, variáveis, componentes, theming e documentação. Use o skill figma-generate-library quando precisar de um fluxo em fases para trabalhos de Design Systems, incluindo instalação, configuração, descoberta, criação, validação e reconciliação com o código.

O figma-generate-design ajuda a transformar uma tela real, página ou layout com várias seções em Figma, reutilizando o design system publicado em vez de formas genéricas. É ideal para reproduzir páginas de produto ou código com alta fidelidade, estrutura editável e consistência baseada em tokens. Use para atualizações de UI em páginas inteiras, não para mockups soltos.