Explore o Figma Sites
O Figma Sites foi lançado em versão beta aberta durante a Config 2025. Atualmente, está disponível em todos os planos pagos, com uma experiência limitada no plano Iniciante chegando em breve. Saiba mais sobre o que está incluído na versão beta.
O que é o Figma Sites?
O Figma Sites permite que você crie, faça protótipos e publique sites de alta qualidade, tudo em um só lugar.
- Crie layouts responsivos atraentes para qualquer tamanho de tela
- Use as mesmas ferramentas de design às quais você está acostumado no Figma Design, como quadros, layout automático, formas, componentes responsivos — e muito mais.
- Copie e cole sem dificuldades entre o Figma Design e o Figma Sites
- Dê vida a seu site com interações e animações fáceis de usar, como rolagem de letreiro, cursores personalizados e efeitos de foco
- Compartilhe sites ao vivo com colaboradores para explorar suas ideias, testar a usabilidade e continuar evoluindo seu trabalho
Dica: marque como favorito https://figma.com/site/new para que você sempre tenha um novo arquivo do Figma Sites à mão quando a inspiração surgir!
Saiba como fazer
Barra de navegação esquerda e barra lateral
A barra de navegação esquerda ajuda você a alternar rapidamente entre tarefas no Figma Sites:
- Arquivo: essa é a visualização onde a criação ocorre. Você pode ver uma lista completa de páginas da web e camadas em seu arquivo, e publicar seu site quando estiver pronto.
- Inserir: adicione elementos pré-construídos (como barras de navegação, rodapés, modelos de páginas da web e incorporações) e acesse suas bibliotecas de design.
- Pesquisa: localize rapidamente elementos em seus designs.
- Make: use camadas de código para transformar ideias e designs em realidade. (Em breve!)
- CMS: crie e gerencie conteúdo para seu site. (Em breve!)
- Configurações: atualize as configurações de seu site para ajudar os mecanismos de pesquisa a entender seu conteúdo, melhorar a acessibilidade e facilitar para os usuários encontrar o que procuram.
Barra de ferramentas
A barra de ferramentas contém todas as ferramentas necessárias para você criar seu site:
- Adicione objetos como páginas da web, quadros, imagens, texto e formas
- Acesse as ferramentas do Figma AI no menu Ações.
Dica: se você já passou tempo projetando no Figma Design, trabalhar no Figma Sites parecerá muito familiar. Confira esta lista de ferramentas de design disponíveis no Figma Sites.
Barra lateral à direita
A barra lateral à direita é onde você controla a aparência dos elementos de design na tela de trabalho ou em páginas da web.
Quando você seleciona um objeto na tela de trabalho, suas propriedades são exibidas na guia Design.
Suas permissões no arquivo (seja para edição ou apenas visualização) determinam o que você pode ver e fazer na barra lateral direita.
Adicione animações, transições e efeitos visuais para tornar seu site mais dinâmico.
Quer seja uma animação sutil ao passar o mouse sobre botões, adicionar profundidade e movimento usando paralaxe ou efeitos interessantes acionados por ações do usuário, as interações podem ajudar suas páginas da web a parecerem mais responsivas e vibrantes.
Construir um site
Comece com um design existente
Existem algumas maneiras de obter uma vantagem inicial com o Figma Sites se você não quiser começar a partir do zero:
Comece com um modelo
Cada novo arquivo é aberto com o seletor de modelos.
Esses modelos, e muitos outros, também estão disponíveis em Modelos e ferramentas no navegador de arquivos.
Copie e cole a partir do Figma Design
Pegue seus designs e copie e cole-os diretamente em uma página da web — ou acesse-os por meio de suas bibliotecas de design existentes.
Saiba mais sobre como copiar e colar entre o Figma Design e o Figma Sites.
Montar um site utilizando blocos
Arraste e solte blocos pré-construídos (como páginas de destino, cabeçalhos, rodapés e seções personalizáveis) para montar um site em pouco tempo.
Criar de forma responsiva
O Figma Sites oferece um grande controle ao criar layouts perfeitos em pixels para diferentes tamanhos de telas.
Adicionar páginas da web
Ao criar um novo site, você verá um contêiner cinza. Essa é uma página da web. Cada página da web possui um nome, um botão para pré-visualização e uma forma de adicionar novos pontos de quebra.
Clique no ícone Página da web na barra de ferramentas para adicionar uma nova página da web.
Adicionar pontos de quebra
Os pontos de quebra definem larguras de telas específicas, onde o layout da sua página da web muda para atender às necessidades de diferentes tamanhos de telas.
Adicionar novos pontos de quebras permite que você ajuste a aparência e a sensação da página da web e otimize a experiência do usuário em todos os dispositivos.
Editar em pontos de quebra
Se sua página da web tiver mais de um ponto de quebra, você pode adicionar, selecionar e editar objetos em todos os pontos de quebra simultaneamente.
Saiba mais sobre como realizar alterações em múltiplos pontos de quebra em uma página da web.
Pré-visualizar seu trabalho
Quando estiver pronto, pré-visualize seu site para vivenciá-lo como seus usuários. É uma excelente forma de verificar rapidamente animações, interações e responsividade, sem a necessidade de publicar antes. Basta tocar no ícone Pré-visualizar em qualquer página da web ou pressionar o atalho de teclado Shift Space para abrir a pré-visualização em linha.
Compartilhar com o mundo inteiro
Publicar seu site é a etapa final antes de compartilhá-lo com o mundo.
Após a publicação, você pode fazer alterações em seu site, adicionar ou remover páginas da web ou conectar um domínio personalizado próprio.