Você criou seu primeiro prompt e agora está pronto para o que vem a seguir. Aqui estão alguns casos de uso comuns e necessidades que seguem a geração inicial do seu aplicativo ou protótipo funcional.
- Suporte a vários usuários
- Mover para o Figma Design
- Compartilhe seu trabalho
- Obtenha seu código
- Explique o código
- Plano antes das alterações
Suporte a vários usuários
Muitos aplicativos precisarão dar suporte a múltiplos usuários. Por exemplo:
- Um aplicativo que permite aos usuários preencher e compartilhar chaves de torneios
- Um aplicativo de mídia social onde os usuários fazem login, têm perfis e postam
- Um jogo que possui um placar global ou alguma funcionalidade multijogador
Em todos esses casos, você usará o Supabase para fornecer um backend para seu aplicativo que permita que os usuários façam login e armazenem dados como contas, postagens, pontuações ou outros conteúdos.
Prompt de exemplo
Eu quero que meu aplicativo suporte múltiplos usuários. Use o Supabase para fornecer uma maneira para os usuários criarem e entrarem em suas contas. Implemente a funcionalidade de backend apropriada por usuário.Experimente neste arquivo da Comunidade
Para experimentar o prompt de exemplo, remixe este arquivo da Comunidade e cole o prompt no chat de IA. Você pode modificar o prompt para experimentar funcionalidades adicionais.
Aplicativo de exemplo: Notas em Markdown
Por que isso funciona
O prompt de exemplo explica claramente para o Figma Make que você deseja adicionar um backend para suportar múltiplos usuários. O prompt aciona o fluxo de backend do Supabase. Devido à redação, o Figma Make considera o contexto da sua conversa existente e constrói o suporte de backend apropriado para o aplicativo em que você está trabalhando.
Mover para o Figma Design
Seu aplicativo está em um estado que você deseja levar para o Figma Design. Nesse caso, você usará o recurso Copiar design. Na pré-visualização do seu aplicativo, acesse a visualização que deseja copiar e siga as instruções em Copiar uma pré-visualização do Figma Make como camadas de design.
Atualmente, você não pode obter uma versão funcional do seu arquivo Figma Make no Figma Design, e as alterações que você faz nas camadas no Figma Design não são aplicadas de volta ao seu arquivo Figma Make.
Experimente neste arquivo da Comunidade
Para testar o recurso Copiar design, remixe este arquivo da Comunidade. Você pode adicionar elementos à tela de trabalho, mover camadas e expandir a tela de trabalho para preencher a visualização. Experimente o recurso Copiar design com diferentes estados da tela de trabalho e cole as camadas no Figma Design para ver o resultado.
Aplicativo de exemplo: Editor de tela de trabalho
Por que isso funciona
Quando você usa o recurso Copiar design, ele copia o estado atual da visualização no seu arquivo Figma Make. Isso significa que você pode ir para diferentes partes do seu aplicativo, como expandir um menu ou abrir uma sobreposição, e depois copiar esse estado da visualização para o Figma Design como camadas que você pode editar.
Compartilhe seu trabalho
Você está pronto para compartilhar o trabalho que fez no Figma Make. Existem várias abordagens diferentes para compartilhamento, com base na sua necessidade:
- Compartilhe o arquivo Figma Make inteiro: Se você quiser convidar seus colegas de equipe para verem seu histórico de chat e colaborar com você, pode compartilhar o próprio arquivo Figma Make.
- Deixe outros iterarem usando seu trabalho: Se você quiser habilitar seus colegas de equipe para iterar de uma forma que não impacte seu arquivo original, você pode publicar o arquivo Figma Make como um modelo.
- Mostrar uma versão funcional internamente: Se você quiser ocultar o histórico de conversas e fornecer a experiência funcional do seu aplicativo ou protótipo funcional para um número limitado de pessoas, você pode publicar uma versão protegida por senha do seu aplicativo, ou publicar apenas para sua organização.
- Compartilhe seu trabalho na internet: Se você está pronto para compartilhar o resultado do seu trabalho com todos, pode publicar seu aplicativo na web ao vivo.
Obtenha seu código
Em alguns casos, você pode querer colocar seu código em editores ou sistemas fora do Figma, como mover o código para um repositório GitHub ou modificar o código no VS Code ou outro IDE.
Existem duas abordagens para obter seu código:
- No editor de código do seu arquivo Figma Make, baixe o código: Quando você baixa o código do Figma Make, o produto cria um .zip arquivo que contém o código do seu aplicativo. Você pode baixar o arquivo .zip arquivo e puxa o conteúdo para o IDE de sua preferência. As mudanças que você faz no código não podem ser automaticamente enviadas de volta ao Figma Make, embora você possa copiar e colar manualmente suas alterações na interface ou compartilhar as mudanças no chat de IA.
- Envie o código para o GitHub: Todos os usuários do Figma Make podem enviar código para o GitHub. Quando você usa esse recurso, o Figma Make cria um repositório no GitHub na sua conta ou organização GitHub que corresponde ao arquivo Figma Make em que você está. Então você pode enviar as alterações do Figma Make para esse repositório à medida que continua a trabalhar.
Explique o código
Às vezes, você quer entender melhor o que o código do seu aplicativo está fazendo. Você pode solicitar que o Figma Make explique o código sem fazer quaisquer alterações reais no seu aplicativo.
Prompt de exemplo
Explique o código deste aplicativo para mim. Comece em um nível alto.Experimente neste arquivo da Comunidade
Remixe este arquivo da Comunidade e experimente o prompt de exemplo para obter uma explicação do código no arquivo Figma Make.
Exemplo de aplicativo: jogo Tetromino
Resultado de exemplo
Jogo Tetromino - Explicação do Código
Arquitetura em Alto Nível
Este é um jogo clássico no estilo Tetris construído com React e TypeScript. O aplicativo segue uma arquitetura baseada em componentes com três partes principais:
1. Estrutura do Componente
`App.tsx` - O controlador principal do jogo contendo toda a lógica e estado do jogo
`GameBoard.tsx` - Componente visual que renderiza o campo de jogo 10x20
`NextPiece.tsx` - Componente de visualização mostrando o próximo tetromino
`types.ts` - Interfaces TypeScript para segurança de tipo
2. Conceitos Centrais do Jogo
O jogo gerencia várias peças chave de estado:
Estado do Tabuleiro: Uma grade 20x10 de células, cada uma vazia ou preenchida com um bloco colorido
Peça Atual: O tetromino que está caindo, com sua forma, cor e posição
Próxima Peça: Visualização do que vem a seguir
Estatísticas do Jogo: Pontuação, nível, linhas limpas
Status do Jogo: Jogando, pausado ou game over
3. Fluxo do Ciclo do Jogo
```
Iniciar Jogo
↓
Gerar Nova Peça
↓
Mover para Baixo (a cada X ms baseado no nível)
↓
Verificar Colisão
↓
Se colidir → Unir a peça ao tabuleiro → Limpar linhas completas → Gerar nova peça
Se não colidir → Continuar movendo
↓
Repetir
```
---
Detalhamento Detalhado
App.tsx - O Motor do Jogo
Constantes & Dados
Array TETROMINOES: Define todas as 7 formas clássicas (I, O, T, S, Z, J, L) com suas matrizes de rotação e cores
LARGURA/ALTURA_DO_TABULEIRO: 10 colunas × 20 linhas
Variáveis Chave de Estado
```typescript
board // Matriz 2D de células
currentPiece // Forma ativa do tetromino
currentPosition // {x, y} coordenadas
nextPiece // Peça da visualização
score, level, linesCleared
isPlaying, isGameOver
```
Funções Centrais
1. Detecção de Colisão (`checkCollision`)
Testa se uma peça em uma dada posição sobreporia:
Limites do tabuleiro (esquerda, direita, inferior)
Blocos já colocados
2. Movimento da Peça (`moveLeft`, `moveRight`, `moveDown`)
Tenta mover a peça na direção
Só atualiza a posição se nenhuma colisão for detectada
3. Rotação (`rotate`)
Transpõe a matriz de forma e inverte as linhas (90° no sentido horário)
Só rotaciona se a nova orientação não colidir
4. União & Limpeza (`mergePieceToBoard`, `clearLines`)
Quando a peça pousa, é adicionada permanentemente ao tabuleiro
`clearLines` verifica linhas completas (todas as 10 células preenchidas)
Remove linhas completas e adiciona linhas vazias no topo
Pontuação: 1 linha = 100pts, 2 = 300pts, 3 = 500pts, 4 = 800pts (multiplicado pelo nível)
5. Queda Rápida (`hardDrop`)
Deixa a peça cair instantaneamente para a posição mais baixa válida
Útil para jogo rápido
Ciclo do Jogo (useEffect)
```typescript
setInterval(() => moveDown(), speed)
// A velocidade diminui à medida que o nível aumenta
// Limpa o intervalo quando pausado/game over
```
Controles do Teclado (useEffect)
Teclas de setas para mover
Espaço/seta para cima para rotacionar
Enter para queda rápida
---
GameBoard.tsx - A Exibição
Este componente é puramente visual:
Recebe props: Estado atual do tabuleiro + peça ativa
Combina ambos: Cria um tabuleiro temporário de exibição sobrepondo a peça ativa no tabuleiro estático
Renderiza a grade: Usa CSS Grid com células de 30px
Estilo: Cada célula mostra sua cor se preenchida, cinza escuro se vazia
```typescript
// Pseudo-código
displayBoard = [...board]
Sobrepor currentPiece ao displayBoard na sua posição
Renderizar 200 células (10×20) com cores apropriadas
```
---
NextPiece.tsx - A Pré-visualização
Grade simples 4×4 mostrando o próximo tetromino:
Células menores (20px vs 30px)
Centraliza a forma da peça dentro da grade
Mesma codificação de cores do tabuleiro principal
---
types.ts - Definições de Tipo
```typescript
Block: { filled: boolean, color: string } // Única célula
Tetromino: { shape: number[][], color: string } // Definição da peça
Position: { x: number, y: number } // Coordenadas
```
---
Decisões Chave de Design
Atualizações de Estado Imutáveis: Sempre cria novas arrays/objetos em vez de mutar
Ganchos de Callback: Usa `useCallback` para prevenir re-renderizações desnecessárias
Separação de Preocupações: Componentes de exibição não contêm lógica
Ciclo de Jogo via setInterval: Queda de peças baseada em tempo
Progressão de Nível: A cada 10 linhas aumenta o nível e acelera o jogo
A arquitetura é limpa e mantível - a lógica do jogo vive no App.tsx enquanto a renderização é delegada a componentes especializados!Por que isso funciona
O Figma Make é capaz de ler os arquivos de código que cria ou edita. Quando solicitado a explicar o código de um aplicativo, o Figma Make é capaz de resumir o conteúdo dos arquivos de código, bem como fornecer explicações detalhadas de como o código funciona.
Plano antes das alterações
Quando você estiver lidando com problemas no seu aplicativo, como o Figma Make adicionando funcionalidade de depuração ao código ou tentando executar grandes, complexas mudanças, você pode querer instruir o Figma Make a planejar as mudanças primeiro.
Prompt de exemplo
Primeiro prompt:
Não faça nenhuma alteração no código do aplicativo. Crie um arquivo chamado plan.md. No plan.md, faça um plano para implementar as alterações que quiser fazer.Segundo prompt:
Use a versão mais recente do plano em plan.md para fazer alterações no aplicativo.Experimente neste arquivo da Comunidade
Remixe este arquivo da Comunidade e envie o primeiro prompt no chat de IA com algumas alterações específicas para o Figma Make implementar. Por exemplo, diga ao Figma Make que você deseja adicionar a capacidade de salvar e importar chaves de torneios.
Então, no editor de código, experimente fazer mudanças no arquivo plan.md que o Figma Make cria.
Finalmente, envie o segundo prompt no chat de IA para que o Figma Make implemente as alterações detalhadas no arquivo plan.md.
Aplicativo de exemplo: Chaves de Torneio
Por que isso funciona
O Figma Make é capaz de criar arquivos específicos quando você o instrui a fazê-lo. O arquivo plan.md conterá um plano que o Figma Make pode executar para fazer mudanças complexas no seu aplicativo. A vantagem de criar o arquivo plan.md antes que o Figma Make execute as alterações é que você pode validar o plano no editor de código e fazer suas próprias mudanças ou adições ao plano.
O prompt subsequente então instrui o Figma Make a usar o plano, incluindo quaisquer alterações que você tenha feito.