Do Figma a um portfólio que pode ser explorado.
Seu protótipo está pronto no Figma, mas no portfólio as pessoas só conseguem olhar as telas? Use este guia para transformar uma jornada clara em uma demonstração interativa no Framer. O ChatGPT pode ajudar a construí-la: você não precisa escrever código nem montar cada tela à mão. Você escolhe o que a demonstração deve fazer, revisa cada etapa e testa o resultado.
Escolha uma jornada do seu projeto e siga as etapas para mapeá-la, montar uma demonstração e testá-la. Você não precisa programar nem reconstruir cada tela à mão: o ChatGPT pode ajudar nessa parte. Você decide o que a demonstração deve fazer e confere o resultado. No fim, escolha se quer manter a página em Draft para revisar mais ou publicar depois que todas as verificações passarem.
Use o Figma como referência de visual e interação. O ChatGPT pode ajudar a recriar uma jornada escolhida no Framer, usando o navegador e as ferramentas que você autorizar. No Framer, a demonstração fica na página do portfólio para você testar. É uma reconstrução guiada, não uma importação automática nem uma sincronização contínua entre Figma e Framer.
Ferramentas para seguir o tutorial
Não é preciso saber programar. Traga um fluxo claro no Figma, acesso ao arquivo e uma página do Framer que você possa editar. Siga as 12 etapas no seu ritmo; se algum termo não estiver claro, peça ao ChatGPT que explique antes de continuar.
Google Chrome + extensão ChatGPT
Use o Chrome para abrir Figma e Framer. A extensão oficial permite que o ChatGPT trabalhe com as abas autorizadas.
Configure a extensão e aprove as permissões antes de usar.
Recursos complementares
ChatGPT + Work
Use o ChatGPT Work para orientar a construção, executar tarefas autorizadas e revisar os resultados no Framer.
Verifique o acesso ao Work na sua conta antes de começar. Alguns recursos dependem do plano e da disponibilidade.
Recursos complementares
Figma
Seu ponto de partida: um arquivo com as telas e interações do fluxo que você deseja apresentar.
Confirme que você tem acesso ao arquivo que vai usar.
Framer
Transforme seu fluxo em uma demonstração navegável e integre-a ao seu portfólio.
Use o editor no navegador. Não é necessário instalar o aplicativo Framer.
Recursos complementares
Os links externos abrem em outra aba. Depois de preparar as ferramentas, confira os requisitos de acesso e comece pela etapa 1.
Portfólio existente
Escolha uma página de projeto que já existe. Acrescente a demonstração preservando o contexto, o estilo e a navegação do portfólio.
Início para quem está começando
Comece com uma página inicial simples: apresentação, link para o projeto e contato. No case, explique o contexto, inclua a demonstração e ofereça um caminho de volta.
O que você precisa para começar
Para seguir este guia, use o ChatGPT Work com acesso às ferramentas de navegador. Alguns recursos dependem da sua conta e do plano. Confirme se o controle do Chrome está disponível na sua conta antes de assinar.
O Framer oferece um plano gratuito que pode ser usado para acompanhar o tutorial. Respeite seus limites de páginas e recursos; domínio próprio e outros recursos de publicação podem exigir um plano pago.
Mantenha o ChatGPT e o Chrome atualizados e entre no Figma e no Framer. Você precisa conseguir ver o arquivo do Figma e editar o projeto no Framer.
Draft é seu trabalho salvo antes de ir ao ar. Preview é a prévia para testar a página. A extensão do Chrome permite que o ChatGPT trabalhe nas abas que você autorizar. Ela não copia nem sincroniza projetos do Figma e do Framer automaticamente.
Os prompts abaixo são mensagens para copiar e enviar ao ChatGPT. Troque os campos entre [COLCHETES] pelos dados do seu projeto. Não é necessário usar o Framer Agent para seguir este percurso.
Neste guia, jornada é a sequência de telas e ações de uma tarefa; estado é como a tela aparece em um momento; feedback é a resposta a uma ação. Case é a página que apresenta um projeto no portfólio. Integração é a ligação entre a demonstração e um serviço real, como login ou armazenamento de dados. Se algum termo ou passo não estiver claro, peça ao ChatGPT que explique antes de continuar.
Sumário: 12 etapas
1. Definir o resultado
Objetivo: Escolher uma parte do seu projeto que o visitante poderá explorar.
O que fazer
- No seu projeto do Figma, escolha uma tarefa que ajude a explicar uma decisão de design. Pode ser entrar em uma conta, escolher um conteúdo ou preencher um formulário. Use um fluxo que você já desenhou.
- Defina a primeira tela, a ação principal e o resultado. Anote o que o visitante deve entender. Se não houver um serviço conectado, o resultado será demonstrado apenas na página.
- Copie a mensagem abaixo, substitua os campos entre colchetes e envie ao ChatGPT. Faça o mesmo nos próximos passos.
Resultado esperado: Uma proposta para apresentar a tarefa escolhida, com início, ações e resultado. Use essa mesma jornada nas próximas etapas.
Como conferir: O visitante consegue entender o que fazer e o que acontece depois?
Se algo não sair como esperado: Se a proposta estiver ampla, peça uma única tarefa com um resultado claro.
2. Preparar o ambiente
Objetivo: Abrir as ferramentas com as contas e permissões corretas.
O que fazer
- Abra o aplicativo ChatGPT no computador e entre em Work, o modo que executa tarefas com as ferramentas que você autoriza.
- No Chrome, entre no Figma e abra seu arquivo. Entre também no Framer com uma conta que possa editar o projeto.
- Reúna os links dos dois projetos e envie a mensagem abaixo ao ChatGPT. Se ele ainda não conseguir acessar as abas, siga a etapa 3 e repita a verificação. Um link, sozinho, não dá permissão para ler ou editar.
- Você não precisa baixar o arquivo do Figma para seguir este percurso.
Resultado esperado: Uma confirmação do que o ChatGPT consegue ver e editar.
Como conferir: As contas e os projetos abertos são os que você pretende usar?
Se algo não sair como esperado: Abra as contas corretas e ajuste as permissões antes de continuar.
3. Conectar o Chrome
Objetivo: Permitir que o ChatGPT trabalhe nas abas abertas do navegador.
O que fazer
- No ChatGPT, abra Settings (Configurações) > Computer Use (Uso do computador) e escolha Chrome. Se necessário, procure em More browsers (Mais navegadores).
- Se aparecer Install (Instalar), abra a loja oficial e confira as permissões da extensão. A extensão é o complemento que conecta o navegador ao ChatGPT.
- Volte a Computer Use, abra Manage (Gerenciar) e ative o navegador para que @Chrome apareça na conversa.
- Mencione @Chrome em uma tarefa no Work e autorize o acesso aos sites Figma e Framer quando solicitado.
- Manage permite gerenciar as permissões; a confirmação na conversa é que mostra se a conexão está funcionando.
Resultado esperado: O ChatGPT identifica os títulos e links das abas corretas.
Como conferir: Compare a resposta com as abas que você abriu.
Se algo não sair como esperado: Confira o perfil do Chrome, as permissões e as atualizações do aplicativo. Os nomes dos controles podem mudar entre versões.
4. Abrir os projetos certos
Objetivo: Confirmar de onde vêm as referências e onde o trabalho será feito.
O que fazer
- No Figma, abra a página e a tela que servirão de referência. Uma tela pode aparecer como frame, a área que reúne seus elementos.
- No Framer, abra o projeto e a página que receberão a demonstração.
- Envie a mensagem abaixo e confira os nomes, links e a descrição da primeira tela antes de autorizar mudanças.
Resultado esperado: Origem no Figma e destino no Framer confirmados.
Como conferir: Os nomes e a primeira tela correspondem ao seu projeto?
Se algo não sair como esperado: Abra a página correta e envie o link da tela específica.
5. Testar o acesso
Objetivo: Verificar se uma pequena edição pode ser feita e salva.
O que fazer
- Primeiro, peça ao ChatGPT para reconhecer a tela inicial e uma interação no Figma, sem alterar nada.
- Peça que explique como fará a edição no Framer: pela interface do Chrome ou por uma conexão disponível.
- Escolha uma área de teste no Framer. Autorize uma mudança pequena, confira em Preview (pré-visualização), reabra a página e peça a restauração do original.
- Confira Draft (rascunho): as alterações devem estar salvas, sem aparecer no site publicado.
Resultado esperado: Uma edição pequena feita, conferida e desfeita, com o rascunho salvo.
Como conferir: A mudança apareceu, permaneceu ao reabrir e foi restaurada?
Se algo não sair como esperado: Se a edição não puder ser salva, resolva o acesso antes de construir a demonstração.
6. Organizar o Figma e mapear a jornada
Objetivo: Preparar telas, conexões e explicações para que a jornada possa ser compreendida e reconstruída.
O que levar do Figma
Leve o conjunto necessário para explicar a tarefa: tela inicial, telas seguintes, variações relevantes, ações e resultado. Não é preciso entregar o arquivo inteiro perfeitamente documentado. Comece por uma jornada pequena, legível e sem dúvidas sobre a continuidade.
Depois que você autorizar o acesso, o ChatGPT Work poderá consultar o arquivo do Figma que compartilhar. Prepare-o como se fosse explicar o projeto a alguém que vai construí-lo: organize e nomeie as telas, mostre como elas se conectam e anote o que cada botão faz. Inclua também os textos, imagens, variações, erros e formas de voltar. Assim, suas expectativas ficam mais claras. Antes de construir, confira se o resumo do ChatGPT corresponde ao seu projeto e corrija o que estiver errado.
Na página do plugin, use o controle de instalação ou execução oferecido pelo Figma. No arquivo de design, abra Plugins, execute SimpleFlow e conecte as telas com setas direcionais. Acrescente rótulos para explicar a ação ou condição de cada caminho. Os nomes dos controles podem variar conforme a versão.
Uma boa organização facilita a interpretação, mas não garante que o ChatGPT reconheça todas as conexões ou consiga testar cada interação. Confira o mapa que ele devolver. Setas visuais explicam a intenção; o protótipo navegável mostra o comportamento configurado; suas notas completam o que estiver faltando.
O que fazer
- No Figma, crie uma página ou seção para a jornada escolhida. Dê nomes claros às telas, como “01. Entrada”, “02. Escolha” e “03. Resultado”, e mantenha rascunhos ou versões antigas em outra área.
- Organize o caminho principal em uma direção de leitura, da esquerda para a direita ou de cima para baixo. Deixe ramificações e retornos próximos das telas de origem e evite linhas cruzadas quando possível.
- Mostre de qual botão ou ação sai cada ligação, para onde ela leva e em que condição acontece. Inclua voltar, cancelar, mensagens de erro e resultado final. Use notas curtas para comportamentos que uma imagem não explica.
- Para desenhar as conexões entre telas, você pode usar o plugin SimpleFlow, disponível no link desta seção. Ele ajuda a comunicar a sequência visual; não é obrigatório e suas setas não substituem as interações configuradas na aba Prototype do Figma.
- Na aba Prototype (Protótipo), confira as interações que já existem e teste o percurso em Present (Apresentar). Para ações ainda não configuradas, escreva o comportamento esperado e identifique que ele não foi testado.
- Essa preparação também é chamada de handoff: organizar o material para que outra pessoa consiga entender o projeto e continuar o trabalho. Compartilhe com o ChatGPT o link do arquivo e da seção ou tela inicial. Confirme que ele tem permissão para visualizar o arquivo. Antes de construir, peça um resumo da jornada. Confira quais informações ele encontrou no arquivo e quais ainda são suposições.
Resultado esperado: Uma seção organizada no Figma e uma lista de telas, ações e destinos revisada por você, com dúvidas e comportamentos não testados identificados.
Como conferir: A lista corresponde ao que acontece quando você usa o protótipo?
Se algo não sair como esperado: Esclareça telas ou ações ausentes antes de iniciar a construção.
7. Conferir o entendimento
Objetivo: Alinhar a demonstração antes de construir.
O que fazer
- Peça ao ChatGPT um resumo da jornada, do começo ao resultado final.
- Confira o que será reconstruído do Figma, o que funcionará na página e o que será simulado.
- Corrija dúvidas e confirme as prioridades visuais. Navegar entre telas pode funcionar na demonstração; enviar dados, autenticar uma conta ou salvar informações em um serviço real exige uma integração própria.
Resultado esperado: Um resumo que você pode revisar e aprovar.
Como conferir: As telas, ações e limites correspondem ao que você quer apresentar?
Se algo não sair como esperado: Aponte a tela ou ação incorreta e peça um novo resumo.
8. Preparar a página do case
Objetivo: Dar contexto para quem vai explorar o projeto.
O que fazer
- No ChatGPT, indique a página do Framer que receberá a jornada aprovada na etapa 7. Informe se quer atualizar um case existente ou criar a primeira apresentação do seu projeto.
- Reúna o problema, seu papel, as decisões tomadas e a jornada que será demonstrada.
- Peça instruções de uso e um caminho claro de volta ao portfólio. Se estiver começando, uma home com apresentação, link para o case e contato é suficiente.
- Confira os fatos usados no texto e mantenha a página em Draft.
Resultado esperado: Uma página que explica o projeto e como explorar a demonstração.
Como conferir: Quem não conhece o projeto entende por que ele existe e como começar?
Se algo não sair como esperado: Se faltarem dados, use textos provisórios identificados. Não invente resultados ou métricas.
9. Construir em etapas
Objetivo: Fazer uma interação funcionar antes de ampliar a jornada.
O que fazer
- Na conversa com o ChatGPT, peça apenas a tela inicial, uma ação e a tela seguinte da jornada aprovada. Indique a referência do Figma e a página do Framer preparada na etapa 8.
- Peça ao ChatGPT que explique como vai fazer. Ele pode criar um Code Component: um bloco reutilizável da interface, feito com código, e colocá-lo na página. Você não precisa escrever nem entender o código para usar o componente; confira o resultado na tela e peça uma explicação se algum termo não estiver claro.
- Abra Preview no Framer e teste o trecho criado: avance, volte e reinicie, se essas ações fizerem parte do fluxo. Depois de conferir, peça os próximos trechos até completar a jornada.
- O ChatGPT reconstrói o que consegue verificar; a extensão não importa nem sincroniza automaticamente os projetos.
Resultado esperado: Um pequeno trecho funcionando e salvo em Draft.
Como conferir: O clique leva ao lugar certo e o retorno funciona?
Se algo não sair como esperado: Corrija esse trecho antes de pedir novas telas.
10. Refinar a aparência e as interações
Objetivo: Aproximar a demonstração do design e facilitar seu uso.
O que fazer
- Abra a referência do Figma e a pré-visualização do Framer lado a lado. Compare fontes, espaços, cores, imagens e proporções.
- Teste opções selecionadas, botões indisponíveis e mensagens de erro ou sucesso. Use também Tab e Enter para navegar pelo teclado.
- Ao pressionar Tab, confira se uma borda ou outro indicador mostra qual controle está selecionado. Isso é o foco do teclado. Verifique também como voltar às telas anteriores.
- Se usar uma moldura de celular, mantenha o conteúdo legível e os controles acessíveis.
Resultado esperado: Ajustes visuais e de uso aplicados, com o que ainda falta indicado.
Como conferir: É possível completar a tarefa tanto com o mouse quanto com o teclado?
Se algo não sair como esperado: Peça correções pequenas, indicando o elemento e sua referência.
11. Adaptar a apresentação
Objetivo: Manter a página legível em telas de tamanhos diferentes.
O que fazer
- No Preview do Framer, teste larguras como 320, 390, 810 e 1200 px, além de tamanhos intermediários. São exemplos para começar, não uma regra para todos os projetos.
- Confira textos, botões, elementos sobrepostos e se a página exige rolagem horizontal. Teste o zoom e se botões e links são fáceis de tocar.
- Se a jornada ficar difícil de usar em uma tela estreita, escolha entre simplificar a apresentação ou oferecer uma imagem estática.
- Se usar uma imagem, indique que ela não é interativa e explique onde explorar a demonstração completa. Não reduza toda a interface até ficar ilegível.
Resultado esperado: Uma apresentação que se adapta à largura disponível, com limites claros.
Como conferir: Os textos continuam legíveis e os controles oferecidos realmente funcionam?
Se algo não sair como esperado: Remova molduras rígidas, simplifique a composição e teste novamente.
12. Revisar e escolher o próximo passo
Objetivo: Revisar o conjunto antes de decidir publicar.
O que fazer
- No Preview do seu case, percorra a jornada inteira. Teste voltar, cancelar e reiniciar onde essas ações existirem, além dos links e das instruções.
- Confira teclado, foco visível, contraste e os tamanhos de tela escolhidos.
- Reabra a página no editor para confirmar que o trabalho está salvo em Draft.
- Peça ao ChatGPT um resumo do que foi testado, do que foi conferido visualmente e do que ainda precisa de atenção. Escolha um caminho: manter a página em Draft para revisar mais ou publicar depois que todas as verificações passarem. Se publicar, abra a página ao vivo e teste também a jornada e os links. Uma conferência visual não substitui os testes de interação nem uma avaliação completa de acessibilidade.
Resultado esperado: Uma revisão completa, a escolha de publicação e a conferência pública se você publicar.
Como conferir: Você consegue repetir pessoalmente as ações principais sem erros?
Se algo não sair como esperado: Mantenha em Draft, corrija o problema e repita os testes afetados.