Como usar o Framer: um guia para iniciantes em 2025

Quer criar sites ou aplicativos incríveis, mas não sabe por onde começar?

É difícil, né?

Todas essas ferramentas de design parecem extremamente confusas.

Adivinha só? O Framer não precisa ser difícil.

Este guia mostrará como usar o Framer para criar coisas incríveis, mesmo que você seja um iniciante completo.

Vamos explicar tudo passo a passo para que você possa começar a criar seus próprios sites e aplicativos rapidinho.

Emoldurador

Junte-se aos milhares de projetos de construção incríveis. A velocidade do Framer? Usuários relatam fluxos de trabalho de design até 50% mais rápidos. Comece seu teste gratuito agora mesmo!

Experimente o Framer gratuitamente Leia a resenha completa

Preparando o enquadrador

Em primeiro lugar, você precisa obter o Framer. É como se cadastrar em qualquer outro site.

Criar uma conta:

Acesse o site da Framer. Você verá um botão com a inscrição "Cadastre-se" ou "Comece agora". Clique nele.

Você precisará inserir seu endereço de e-mail e criar uma senha. Bem fácil, não é? Às vezes, você pode até se cadastrar com sua conta do Google.

Após se cadastrar, você poderá receber um e-mail para confirmar sua conta. Basta clicar no link presente no e-mail.

Compreendendo o Espaço de Trabalho:

Ok, agora você está dentro! A tela pode parecer um pouco confusa no início, mas não se preocupe.

O grande espaço aberto no meio é onde você criará seus desenhos. É como sua tela.

Nas laterais, você verá ferramentas e painéis. Eles ajudam você a realizar ações como adicionar formas, alterar cores e mover elementos.

Criando um novo projeto:

Para começar a criar algo, você precisa de um novo projeto. Procure um botão que diga "Novo Projeto" ou algo semelhante. Clique nele.

Você pode começar com um projeto em branco, que é como uma folha de papel limpa. Ou pode escolher um modelo. Os modelos são como designs predefinidos que você pode modificar.

Se você escolher um projeto em branco, poderá criar seu próprio design do zero. Se optar por um modelo, você economizará tempo.

Ferramentas básicas de projeto

Agora, vamos à parte divertida: criar coisas! O Framer tem várias ferramentas para te ajudar a projetar.

Adicionando formas e texto:

Quer desenhar um quadrado ou um círculoProcure as ferramentas de forma. Clique na forma desejada e, em seguida, clique e arraste na tela para desenhá-la.

Para adicionar palavras, clique em texto ferramenta. Em seguida, clique onde deseja que as palavras apareçam e comece a digitar.

Você pode alterar a cor das suas formas e do texto. Basta procurar o seletor de cores. Você também pode aumentar ou diminuir o tamanho dos elementos arrastando os cantos.

Trabalhando com imagens:

Tem uma imagem que deseja usar? Clique na ferramenta de imagem. Em seguida, você poderá escolher uma imagem do seu computador.

Depois que a imagem estiver no Framer, você pode movê-la e redimensioná-la. Você também pode recortá-la para que se ajuste perfeitamente.

Utilizando camadas:

As camadas são como folhas de papel transparentes empilhadas umas sobre as outras. Elas ajudam a manter as coisas organizadas.

Ao adicionar uma forma ou imagem, ela é colocada em sua própria camada. Você pode mover as camadas para cima ou para baixo para alterar o que fica por cima.

Isso é importante porque, se você quiser uma imagem atrás de uma forma, a camada da imagem precisa estar abaixo da camada da forma.

Fazendo as coisas se moverem: Animações

Vamos dar vida aos nossos projetos! As animações são o que fazem as coisas se moverem e mudarem.

Animações simples:

Você pode fazer com que os elementos apareçam gradualmente, deslizem pela tela ou mudem de tamanho. É como mágica!

Procure as configurações de animação. Você verá opções como "fade", "slide" e "scale".

Você também pode definir a duração. Isso indica ao Framer a velocidade da animação.

Transições:

Transições são o que acontece quando você passa de uma tela para outra. Pense nisso como virar as páginas de um livro.

Você pode fazer as telas deslizarem, desaparecerem gradualmente ou darem zoom.

Transições suaves dão ao seu site ou aplicativo uma aparência realmente profissional.

Interações:

Interações são coisas que acontecem quando alguém clica ou toca em algo.

Por exemplo, você pode fazer com que um botão mude de cor quando o cursor passar sobre ele.

Ou você pode ampliar a imagem clicando nela.

Esses elementos tornam seus projetos interativos e divertidos de usar.

Criando um site simples

Ok, vamos juntar tudo e construir um site simples. É mais fácil do que você imagina!

Planejando seu site:

Primeiro, pense no que você quer que seu site faça. Você precisa de uma página inicial, uma página "sobre nós" ou uma página de contato?

Anote o que você deseja em cada página. Isso ajuda você a saber o que construir.

Criando a página inicial:

Comece com um projeto em branco ou use um modelo.

Adicione um cabeçalho na parte superior com o nome do seu site.

Coloque algum conteúdo no meio, como texto e imagens.

Adicione um rodapé na parte inferior com informações de contato ou links.

Use as ferramentas que você aprendeu para fazer com que fique com uma boa aparência.

Adicionando mais páginas:

Para criar outra página, clique no botão "Nova Página".

Crie cada página da mesma forma que criou a página inicial.

Conecte as páginas usando botões ou links no cabeçalho.

Pré-visualização e publicação:

Clique no botão "Visualizar" para ver como ficará seu site.

Se você gostou, clique no botão "Publicar" para colocá-lo online.

O Framer vai te dar um link para o seu site. Agora, qualquer pessoa pode vê-lo!

Alternativas ao Framer

Aqui estão alguns outros sites construtores Você pode querer conferir:

• Gama: Concentra-se na criação de apresentações e documentos com aparência de sites.
• Durável: Utiliza inteligência artificial para criar rapidamente um site para sua empresa em minutos.
• Abóbora: Ajuda você a criar sites com IA, com foco na geração de conteúdo.
• CodeDesign: Outra ferramenta com inteligência artificial para criação de sites, com ênfase no design.
• Siter: Permite criar sites com foco em design visual e animações.
• 10Web: Uma plataforma com inteligência artificial para criar e hospedar sites WordPress.
• Construtor de Abacaxi: Oferece um construtor baseado em blocos para criar sites com facilidade.
• Dorik: Oferece uma interface simples de arrastar e soltar para a criação de sites, especialmente para SaaS e startups.
• Typedream: Permite criar sites que parecem documentos escritos, de forma muito simples.
• Jimdo: Um construtor de sites intuitivo, com foco na simplicidade e facilidade de uso.
• B12: Oferece criação de sites com inteligência artificial e opções de serviços profissionais.
• Torta Apetitosa: Conhecido por seu construtor de aplicativos, mas também oferece um construtor de sites.

Conclusão

Então, você aprendeu bastante! Agora você conhece o básico de como usar o Framer.

Abordamos a configuração da sua conta, o uso das ferramentas de design, a criação de animações e até mesmo a construção de um site simples.

Você já viu como adicionar formas, texto e imagens.

Você descobriu como usar camadas e componentes para manter tudo organizado. E aprendeu a fazer elementos deslizarem, desaparecerem gradualmente e reagirem quando as pessoas clicam.

Qual o próximo passo? Continue explorando o Framer!

Experimente ferramentas diferentes e veja o que você consegue criar.

Existem inúmeros vídeos e tutoriais online se você quiser aprender mais.

Continue praticando e logo você estará criando designs incríveis.

Perguntas frequentes