Adicionar um back-end a um protótipo ou aplicativo funcional

Antes de começar

Quem pode usar esse recurso

O Figma Make está em versão beta aberta.

Disponível em qualquer acesso.

Ao criar um protótipo ou aplicativo usando o Figma Make, às vezes você precisa armazenar e gerenciar dados com segurança adicionando um backend. Por exemplo, você vai precisar de um backend se quiser:

• Manter o estado de um app em diferentes navegadores
• Fornecer fluxos de autenticação funcionais, como uma tela de login para o seu aplicativo
• Coletar entradas e respostas dos usuários em formulários
• Salvar e carregar conteúdo, como texto e imagens
• Armazenar segredos, chaves API e tokens para fazer solicitações a servidores

O Figma Make se integra ao Supabase para oferecer um ambiente de backend que disponibiliza armazenamento de segredos, processamento e um banco de dados Postgres. O Figma Make configurará armazenamentos básicos de chave-valor nesse banco de dados Postgres; no momento, o Figma Make não configurará um banco de dados SQL completo no Postgres fornecido pela Supabase.

Você pode trazer sua conta Supabase existente para o Figma Make. Se você não tiver uma conta, o Figma Make explicará como começar.

Quando sua conta estiver pronta, o Figma Make guiará você pelas etapas para conectar um projeto do Supabase ao seu aplicativo.

O Figma Make lembra os projetos Supabase aos quais você se conectou anteriormente. Assim, é mais fácil reutilizar os projetos do Supabase em todos os seus arquivos do Figma Make.

Quando tiver um backend, você também pode adicionar segredos e chaves de API que podem ser usados para consultar servidores externos.

Para mais informações, confira nossas práticas recomendadas e exemplos de prompts.

Backends

Ao trabalhar com backends nos seus arquivos do Figma Make, você pode:

• Adicionar um backend
• Adicionar um segredo ou uma chave de API
• Gerenciar segredos, projetos e organizações do Supabase

Adicionar um backend

Existem duas maneiras de ativar a integração do Supabase que adiciona um backend ao seu protótipo funcional ou aplicativo:

• O Figma Make recomendará automaticamente adicionar um backend com base na intenção dos seus prompts no chat de IA. Você também pode solicitar explicitamente a adição de um backend, usando um prompt como "Adicione autenticação ao meu app".
• Nas configurações do seu arquivo do Figma Make, conecte o Supabase.

Você pode usar qualquer um dos métodos nos seus arquivos do Figma Make. Não é possível usar os dois métodos no mesmo arquivo, pois o backend só precisa ser configurado uma vez por arquivo.

Prompt para adicionar um backend

Para adicionar um backend usando o chat de IA:

1. No chat de IA, diga ao modelo para adicionar um backend ao seu protótipo funcional ou aplicativo. Basta usar o prompt "Adicione um backend", "Adicione login de usuário" ou "Chamar [uma API segura, como a OpenAI]".

2. Quando o Figma Make pedir para você configurar sua conta do Supabase, clique em Conectar. Esta etapa só ocorre na primeira vez que você configurar a integração com o Supabase.

   Em uma nova aba do navegador, você acessará o site da Supabase.

   Quando precisar fazer login no Supabase, use sua conta existente ou crie uma gratuita.

   Se sua conta do Supabase ainda não estiver associada a uma organização, você também precisará criar uma organização.

3. Na página Autorizar acesso à API para o Figma, selecione uma organização e clique em Autorizar Figma.

   No navegador, a aba Supabase será fechada, e você voltará ao Figma Make.

4. Se você já tiver um projeto no Supabase, clique em Escolher um projeto, depois clique em Conectar ao lado do projeto que gostaria de usar para o arquivo do Figma Make.

   Se você não tiver nenhum projeto do Supabase, clique em Criar projeto. Em seguida, no modal Novo projeto do Supabase, insira um nome para o projeto, selecione a região onde pretende hospedar o projeto do Supabase e crie uma senha para o seu banco de dados.

   Atenção: a senha do banco de dados não é a mesma da sua conta do Supabase. A senha do banco de dados é usada para acessar o banco de dados Postgres no projeto do Supabase. Você provavelmente não precisará usar essa senha enquanto trabalha no arquivo do Figma Make, mas o Supabase exige que seu banco de dados tenha uma senha.

5. Clique em Criar projeto.

Depois que o projeto do Supabase estiver conectado ao arquivo do Figma Make, está tudo pronto! No chat de IA, você pode dizer ao modelo a funcionalidade que gostaria de construir, como um formulário para coletar dados do usuário, e o modelo implementará a funcionalidade para você.

Adicionar um backend nas configurações do arquivo

Para adicionar um backend nas configurações do arquivo do Figma Make:

1. No canto superior direito do arquivo do Figma Make, clique em Configurações do Make.
2. Na barra lateral esquerda, em Integrações, clique em Supabase.

3. Clique em Conectar Supabase. Esta etapa é necessária apenas na primeira vez que você configurar a integração com o Supabase.

   Em uma nova aba do navegador, você acessará o site da Supabase.

   Quando precisar fazer login no Supabase, use sua conta existente ou crie uma gratuita.

   Se sua conta do Supabase ainda não estiver associada a uma organização, você também precisará criar uma organização.

4. Na página Autorizar acesso à API para o Figma, selecione uma organização e clique em Autorizar Figma.

   No navegador, a aba Supabase será fechada, e você voltará ao Figma Make.

5. Se você já tiver um projeto Supabase, clique em Conectar ao lado do projeto que gostaria de usar para o arquivo do Figma Make.

   Se você não tiver nenhum projeto do Supabase, clique em Criar novo projeto. Em seguida, no modal Novo projeto do Supabase, insira um nome para o projeto, selecione a região onde pretende hospedar o projeto do Supabase e crie uma senha para o seu banco de dados.

   Atenção: a senha do banco de dados não é a mesma da sua conta do Supabase. A senha do banco de dados é usada para acessar o banco de dados Postgres no projeto do Supabase. Você provavelmente não precisará usar essa senha enquanto trabalha no arquivo do Figma Make, mas o Supabase exige que seu banco de dados tenha uma senha.

   Clique em Criar projeto.

Assim que o projeto do Supabase estiver conectado ao arquivo do Figma Make, você poderá voltar ao chat de IA e começar a trabalhar com o modelo para aproveitar seu backend.

Adicionar um segredo ou uma chave de API

Ao criar um protótipo funcional ou um aplicativo, talvez seja necessário puxar dados de servidores externos. Por exemplo, se você tem um aplicativo que mostra informações meteorológicas aos usuários, pode usar uma API de clima que requer uma chave de API ou um token de acesso.

Quando você usa um prompt no chat de IA para criar um protótipo funcional ou aplicativo, o Figma Make pede para você configurar um backend (caso ainda não tenha feito isso) e, em seguida, fornece uma interface para você inserir seu segredo ou chave de API.

Para adicionar um segredo ou uma chave de API:

1. No chat de IA, diga ao modelo que você quer adicionar um segredo ao seu protótipo funcional ou aplicativo. Por exemplo: "Quero um app que me permita visualizar os preços das ações. Crie um segredo para armazenar minha chave de API".
2. Na caixa Criar um segredo, em Adicionar detalhes do segredo, digite seu segredo ou chave de API.
3. Clique em Criar segredo.

Quando você clica em Criar segredo, o Figma Make usa o Supabase para armazenar com segurança o segredo ou a chave de API. Em seguida, você pode continuar solicitando ao Figma Make que adicione mais recursos ao seu protótipo funcional ou aplicativo usando o segredo adicionado ou a chave de API.

Gerenciar segredos, projetos e organizações do Supabase

Os segredos no seu backend, assim como seus projetos e organizações do Supabase, são todos gerenciados por meio do site do Supabase. O Figma Make oferece alguns links rápidos para as páginas corretas no site do Supabase.

Para gerenciar segredos, projetos e organizações no Supabase:

1. No canto superior direito do arquivo do Figma Make, clique em Configurações do Make.
2. Na barra lateral esquerda, em Integrações, clique em Supabase.
3. Na linha do projeto conectado ao seu arquivo do Figma Make, clique no ícone de reticências. Em seguida:
   • Clique em Gerenciar projeto para acessar o painel Supabase desse projeto.
   • Clique em Gerenciar organização para acessar a página de configurações da sua organização do Supabase.
   • Clique em Gerenciar segredos para acessar o banco de dados Edge Functions do seu projeto do Supabase.

Práticas recomendadas para trabalhar com backends

Confira algumas práticas recomendadas para trabalhar com backends no Figma Make:

• Use as interfaces do Supabase fornecidas pelo Figma Make. Não inclua dados confidenciais, como segredos ou chaves de API, no texto simples dos seus prompts.
• Geralmente, para utilizar seus projetos do Supabase da forma mais eficiente, recomendamos que você tente reutilizar os projetos do Supabase nos seus arquivos do Figma Make.

Exemplos de prompts

Confira alguns exemplos de prompts que você pode usar para experimentar trabalhar com um backend no Figma Make.

Exemplos de armazenamento de dados e estado

• "Crie um aplicativo de rastreamento de tarefas onde eu possa salvá-las. Deve incluir a funcionalidade de controle de tempo para que eu possa inserir quanto tempo gastei em cada tarefa."
• "Crie uma galeria de fotos onde eu possa fazer upload de imagens."
• "Sou gerente de produto em uma plataforma de marketing. Crie uma prova de conceito para a ferramenta de comparação de campanhas que vamos adicionar. Mostre como os dados históricos da campanha serão armazenados e como o usuário pode selecionar intervalos de datas para comparação".
• "Sou gerente de produto em uma plataforma de e-learning. Crie um protótipo da ferramenta de criação de questionários para nosso sistema de criação de cursos. Mostre como os professores podem criar uma grande variedade de perguntas, desde texto livre até múltipla escolha e controles deslizantes. Torne os questionários compartilháveis para que as pessoas que estão trabalhando no protótipo possam criar seu próprio questionário e compartilhar para pedir feedback."

Exemplos de uso de segredos e chaves de API

• "Crie um criador de playlists de músicas que extraia meu histórico da API do Spotify."
• "Preciso de um aplicativo de lista de leitura que se conecte à API do Goodreads para obter informações sobre livros e permitir que os usuários acompanhem seu progresso."
• "Crie um rastreador de candidaturas que use a API do LinkedIn para importar listas de vagas e permita que os usuários acompanhem o status das candidaturas."

Exemplos de como adicionar autenticação

• "Crie um rastreador de hábitos que exija que o usuário faça login e armazene informações de sequência em um armazenamento de chave-valor."
• "Sou desenvolvedor e estou criando um produto de SaaS. Crie um sistema de login de usuários. Deve aceitar autenticação por e-mail/senha, além de logins sociais via Google e GitHub, e incluir a funcionalidade de redefinição de senha."
• "Crie um gerenciador de trechos de código que exija login no GitHub e armazene trechos de código em um banco de dados."