Antes de começar
Quem pode usar esse recurso
O Figma Make está disponível para acessos Full em planos pagos.
Você pode experimentar o Figma Make em outros acessos e planos.
Para editar o código do seu protótipo funcional ou aplicativo web diretamente, o Figma Make oferece um editor leve no contexto do arquivo.
Para acessar o editor de código, na parte superior do seu arquivo do Figma Make, clique em Código.
O Figma Make oferece vários recursos para trabalhar com código:
- Um editor de código, onde é possível fazer alterações no código gerado pelo Figma Make, escrever ou importar seu próprio código. Você também pode formatar as alterações que faz ou cola no editor.
- Uma maneira de baixar seu código, incluindo todos os arquivos no explorador de arquivos para seu protótipo funcional ou aplicativo web.
- Um explorador de arquivos que você usa para navegar pelos arquivos criados pelo Figma Make. Você não pode criar seus próprios arquivos no explorador de arquivos, mas pode instruir o Figma Make a criar arquivos para você.
- Um lugar para adicionar diretrizes que o Figma Make seguirá ao gerar código para seu protótipo funcional ou aplicativo web. Para saber mais, consulte Adicionar diretrizes ao Figma Make.
Editar código
No editor de código, você pode fazer alterações diretamente nos arquivos que estão no explorador de arquivos. O arquivo App.tsx, o principal do seu protótipo funcional ou aplicativo web, é selecionado por padrão no explorador de arquivos.
Você tem permissão para editar o código existente, escrever seu próprio código ou colar o código diretamente no editor.
Reverter alterações no código
Conforme você faz alterações no código, o Figma Make cria pontos de verificação para essas alterações. Você pode reverter as alterações no código para voltar à versão do arquivo da última etapa da conversa.
Para reverter suas alterações em um arquivo, no chat da IA, clique em ao lado do arquivo que você deseja reverter.
Formatar o seu código
Para formatar o código, pressione CMD + S (Mac) ou CTRL + S (Windows), ou clique em Formatar código no canto superior direito do editor de código. Quando você formata, o Figma Make embeleza o código, por exemplo, corrigindo a lineação e a indentação.
Baixar o código
Para baixar um arquivo .zip contendo todos os arquivos em seu arquivo do Figma Make, no canto superior direito do editor de código, clique em Baixar código.
Explorar arquivos
No explorador de arquivos no lado esquerdo do editor de código, você pode clicar para expandir pastas e selecionar arquivos. Quando você seleciona um arquivo, o conteúdo dele aparece no editor de código.
Você não pode criar ou excluir arquivos no explorador de arquivos. Se você quiser adicionar novos arquivos ao explorador de arquivos, peça ao Figma Make no chat de IA. Por exemplo, "Adicione um arquivo barra de ferramentas.tsx com algum código modelo".