Como criamos sites em Framer?¶
Este documento está em constante evolução. Se você encontrar algo que possa ser melhorado ou atualizado, entre em contato com o autor do artigo. Caso haja mais de um autor, sinta-se à vontade para procurar qualquer um deles.
Introdução¶
Este manual é o guia oficial para todo o time que trabalha com a criação de sites no Framer. Ele serve para garantir consistência, qualidade e eficiência em todos os projetos, do briefing à entrega final para o cliente.
Se você é designer, desenvolvedor ou colaborador envolvido em projetos Framer, este documento é sua referência principal. Siga as diretrizes e checklists aqui descritos para manter o padrão da equipe e, claro, para facilitar a vida de todo mundo.
Como começar um projeto no Framer?¶
Antes de qualquer coisa, a resposta certa é: use o nosso Starter File.
Veja: Framer Starter File
Esse arquivo inicial tem tudo o que você precisa para começar um projeto do jeito certo, com nossa estrutura e padrões já prontos para usar. É só duplicar e começar a trabalhar.
Nomenclatura dos arquivos no workspace¶
Para que qualquer pessoa entenda de imediato o status de cada projeto, usamos emojis da seguinte forma:
| Emoji + Nome | Significado | Quando editar? |
|---|---|---|
| 🚫 Nome‑do‑Site [LEGACY] | Backup pós‑entrega – cópia congelada criada assim que o projeto é duplicado para a conta do cliente. | Nunca (serve apenas como histórico/segurança). |
| 🔜 Nome‑do‑Site | Work in Progress – arquivo ativo dentro da conta da Apta enquanto o site está em produção. | Sempre (é aqui que o time trabalha até a aprovação final). |
| 🟢 Nome-do-Site | Site Live – versão oficial, agora dentro da conta do cliente e com domínio conectado. | Somente ajustes pontuais solicitados pelo cliente (ex.: trocar texto, imagem, bugfix). |
Exemplo real de organização dos arquivos:
Coleta e resolução de feedback¶
A etapa de comentários é chave para assegurar qualidade antes do checklist final. Para deixar claro quem faz o quê, especificamos os tipos de apontamentos, além das guidelines para quem resolve.
Apontamentos internos¶
Responsável: DC
- Seja preciso e objetivo. Aponte o elemento exato, descreva o ajuste e explique por que ele é necessário.
- Fundamente cada observação. Relacione-a ao briefing, à identidade visual ou à experiência do usuário.
- Pense no todo antes de comentar. Revise todas as páginas e breakpoints para evitar retrabalho em cadeia.
- Foque no propósito e no público-alvo. Pergunte-se sempre: "isso aproxima o site da meta definida?"
- Use linguagem construtiva. Indique a melhoria e, se possível, sugira um caminho de solução.
- Classifique a urgência. Marque como Must-fix, Nice-to-have ou Sugestão futura para facilitar a priorização.
Apontamentos do cliente¶
Responsável: PM
- Centralize tudo em um só canal. Copie mensagens de e-mail ou WhatsApp para o espaço de comentários do Framer.
- Peça clareza e contexto. Transforme feedback vago em pedidos objetivos: "Qual CTA exatamente não ficou claro?"
- Alinhe ao escopo. Verifique se a solicitação está dentro do combinado; se não, negocie ajustes ou cronograma.
- Agrupe e priorize se necessário. Ordene as demandas em Alta, Média ou Baixa impacto antes de repassar para o designer.
- Documente decisões. Registre concordâncias ou recusas com justificativa para evitar loops de feedback.
- Feche o ciclo. Confirme com o cliente quando as alterações forem entregues e atualize o status no tracker.
Quem resolve¶
Responsável: Designer
- Ler todos os comentários antes de começar a editar.
- Analisar criticamente: aplicar a intenção por trás do comentário, não necessariamente a letra.
- Testar em todos os breakpoints e verificar se o problema não se repete em outras partes.
- Responder quando um comentário não for aplicado, explicando o motivo.
- Após validação completa, clicar em "Resolver comentário" para manter o arquivo limpo.
Meta final: zero pendências visuais e todos os comentários fechados antes de partir para o Checklist Final.
Como funciona a transferência do projeto para o cliente?¶
Todo projeto começa dentro da conta da Apta. Quando ele estiver finalizado e aprovado, fazemos a transferência para a conta do cliente. Para isso, siga o processo referenciado abaixo.
Como e quando usar o Checklist Final do Framer¶
O checklist final é a última etapa antes de um projeto ser considerado realmente pronto para ir ao ar. Ele é uma revisão técnica completa que garante que o site está limpo, otimizado e dentro dos nossos padrões.
Importante: só use o checklist depois que o projeto já estiver na conta do cliente e os feedbacks visuais tiverem sido 100% resolvidos.
Quando usar¶
- Após a coleta e resolução de todos os comentários (internos e cliente)
- Quando o projeto já tiver sido transferido via Remix Link para a conta do cliente
- Antes de conectar o domínio e fazer o lançamento oficial do site
Como usar¶
- Acesse o Checklist Final do Framer
- Revise item por item, com calma, navegando pelo site publicado
- Marque apenas os itens que foram efetivamente revisados e corrigidos
- Se algo estiver fora do padrão, volte para o arquivo e ajuste antes de prosseguir
Esse checklist é o nosso selo de qualidade. Quando todos os itens estão ok, você pode seguir com segurança para a publicação final.
Glossário¶
A lista abaixo reúne os conceitos que mais aparecem no nosso fluxo — tanto no Framer quanto em web design em geral. Use como consulta rápida sempre que precisar.