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.
Quem pode usar este recurso
Disponível em todos os planos pagos
É necessário ter acesso de edição ao arquivo
O Figma Sites permite que você crie e publique sites utilizando as mesmas ferramentas poderosas disponíveis no Figma Design.
Criar designs no Figma Sites
Ao trabalhar no Figma Sites, você pode projetar diretamente dentro de uma página da web ou usar a tela de trabalho como um espaço para explorar ideias.
- Criar elementos de design. Assim como você faria em um arquivo de design, comece adicionando quadros, formas, texto (ou qualquer elemento de design) ao arquivo.
- Tornná-lo responsivo. Utilize o layout automático e as restrições para que seu site se adapte a diferentes tamanhos de telas.
- Reutilizar elementos de design. Mantenha seu site consistente criando componentes, estilos ou variáveis — ou usando recursos existentes de uma biblioteca.
- Publicar uma biblioteca. Compartilhe componentes, estilos ou variáveis, para que as pessoas possam acessá-los em outros arquivos.
- Adicione interatividade. Assim como na prototipagem no Figma Design, use interações para adicionar movimento e animações aos elementos de design.
Depois de adicionar designs a uma página da web, você pode pré-visualizar e publicar sem necessidade de codificação.
O que acontece quando copio e colo entre o Figma Design e o Figma Sites?
Em geral, alternar seu trabalho entre o Figma Design e o Figma Sites deve ser uma experiência tranquila e sem contratempos.
Os designs aparecem exatamente da mesma forma em ambos os produtos — e os recursos mais complexos são traduzidos automaticamente entre eles. Por exemplo, as conexões de prototipagem no Figma Design são automaticamente convertidas para suas interações correspondentes no Figma Sites.
Saiba mais sobre como mover entre os dois produtos.
Ferramentas compatíveis entre o Figma Design e o Figma Sites
Ao criar designs no Figma Sites, você terá acesso à maioria dos recursos encontrados no Figma Design. Você pode encontrar a documentação de como usar cada recurso nos links abaixo.
Ferramentas de design
|
|
Disponível no Figma Design |
Disponível no Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
As fontes personalizadas instaladas em seu computador não estão disponíveis atualmente para uso no Figma Sites, mas estarão no futuro. |
|
|
✓ |
✓ |
|
|
Editar caminhos vetoriais, incluindo operações booleanas |
✓ |
✓ |
|
✓ |
✓ |
|
|
✓ |
O Figma Sites possui funcionalidades adicionais para edição em vários pontos de quebra. |
|
|
✓ |
Atualmente não estão disponíveis, mas estarão no futuro. |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
✓ |
|
|
✓ |
Alguns recursos compartilhados com o Figma Design. Saiba mais. |
|
|
✓ |
✓ |
|
|
✓ |
As seções podem conter designs, mas não páginas da web. |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
X |
✓ |
Ferramentas de colaboração
|
|
Disponível no Figma Design |
Disponível no Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
Destacar não seguirá uma pessoa se ela estiver em uma visualização em tela cheia, como Make ou Configurações. |
|
|
✓ |
X |
Design systems e publicação
|
|
Disponível no Figma Design |
Disponível no Figma Sites |
|---|---|---|
|
✓ |
Você pode criar e gerenciar componentes como no Figma Design. Somente instâncias podem ser usadas em uma página da web. |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
Propriedades compatíveis entre o Figma Design e o Figma Sites
|
|
Disponível no Figma Design |
Disponível no Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |