Antes de começar
Quem pode usar esse recurso
O Figma Make está disponível para acessos Full em planos pagos.
Você pode experimentar o Figma Make em outros planos e acessos.
O plano Educação inclui um arquivo Figma Make publicado, que está sujeito a limitações de largura de banda.
Quando estiver tudo pronto para compartilhar seu protótipo funcional, aplicativo web ou UI interativa com o mundo, você pode publicá-lo. A publicação disponibiliza seu protótipo funcional ou aplicativo na web pública, com sua própria URL dedicada.
Depois de publicar, você pode fazer mudanças incrementais no seu protótipo funcional ou aplicativo web, ou cancelar a publicação para removê-lo da web pública.
Você também pode atribuir um domínio personalizado a um aplicativo web. O número de domínios personalizados que você pode atribuir depende do seu plano. O limite é compartilhado com o Figma Sites.
Publicar um protótipo funcional ou aplicativo web
Atenção: antes de publicar, verifique se você tem os direitos de todo o conteúdo do protótipo funcional ou aplicativo e se está seguindo a Política de Uso Aceitável do Figma. Lembre-se de que as imagens fornecidas pelo Figma Make vêm do Unsplash. Se planejar usar qualquer imagem do Figma Make, você será responsável por examiná-las para seu caso de uso específico. Elas estão sujeitas aos Termos e Condições do Unsplash, disponíveis em https://unsplash.com/terms.
Para publicar seu protótipo funcional ou aplicativo web:
- Abra o arquivo do Figma Make que você quer publicar.
- No canto superior direito, clique em Publicar.
- No modal Publicar, defina um título.
- Opcionalmente, no canto superior direito da interface do Figma Make, clique em Configurações do Make para alterar as configurações adicionais do seu site.
- Clique em Publicar.
Depois de clicar em publicar, seu protótipo funcional ou aplicativo web ficará disponível na web pública. O Figma Make fornece uma URL pública gerada aleatoriamente, que você pode usar para acessar seu protótipo funcional ou aplicativo web publicado e compartilhar com outras pessoas. A URL gerada será assim: three-random-words.figma.site
Atenção: ocasionalmente, a publicação um protótipo funcional ou app pode falhar. Se isso ocorrer, recomendamos que você aguarde alguns minutos e tente novamente.
Depois de publicar seu protótipo funcional ou aplicativo web, a janela de publicação exibirá o seguinte:
- A URL do aplicativo web, gerada automaticamente pelo Figma. Clique na URL para visitar seu protótipo funcional ou aplicativo web publicado. Agora, você pode alternar para usar um domínio personalizado, se preferir.
- O status é Publicado.
- Um novo campo que mostra a última data de publicação.
Importante: consulte um advogado para garantir que você entenda suas obrigações legais ao usar imagens ou publicar via Figma Make. Não confie nessas diretrizes para garantir que você está em conformidade com a lei.
Você é responsável por qualquer informação que coletar dos usuários (como itens enviados para sites ou informações de visitantes) e por garantir que os dados sejam gerenciados de forma compatível.
Atualizar um protótipo funcional ou aplicativo web publicado
Se precisar modificar o conteúdo existente, você pode publicar uma atualização no seu protótipo funcional ou aplicativo web.
Todas as alterações feitas em seu protótipo funcional, aplicativo web ou UI interativa só aparecerão depois que você atualizar a versão publicada. Por exemplo, se a interface do seu aplicativo web mudar, essa alteração não aparecerá no protótipo funcional ou aplicativo web publicado até que você publique uma atualização.
Para publicar as alterações, siga as mesmas instruções em Publicar um protótipo funcional ou aplicativo web. Em seguida, no modal Publicar, clique em Atualizar.
Adicionar um domínio personalizado
Se você quiser que seu protótipo funcional ou aplicativo web publicado tenha uma URL diferente daquela gerada aleatoriamente pelo Figma Make, é possível atribuit um domínio personalizado. Por exemplo, ao adicionar um domínio personalizado, você pode definir https://www.yourdomain.com como a URL do seu protótipo funcional ou aplicativo web publicado.
Para atribuir um domínio personalizado, siga os passos em Gerenciar um domínio personalizado para seu site. Os passos são os mesmos para o Figma Make.
Cancelar a publicação de um protótipo funcional ou aplicativo web
Cancelar a publicação do seu protótipo funcional ou aplicativo web o removerá da web pública. Se você decidir republicar mais tarde, o Figma reutilizará a mesma URL. Para cancelar a publicação:
- No arquivo do Figma Make do protótipo funcional ou aplicativo web que você quer despublicar, clique em Configurações do Make no canto superior direito.
- Clique em Cancelar publicação.
Nota: se você fizer uma redução de um plano pago para um plano gratuito, quaisquer arquivos do Figma Make previamente publicados na web ou na Comunidade do Figma permanecerão publicados e disponíveis em seu subdomínio no figma.site.
Modal Publicar
O modal Publicar inclui o seguinte:
- Título: o título do seu protótipo funcional ou aplicativo web conforme aparece nas abas do navegador, nos resultados dos mecanismos de busca e nas redes sociais. Adicionar um título ajuda as pessoas a entender qual site estão vendo, melhora o SEO e a acessibilidade.
- URL: se o protótipo funcional ou o aplicativo web nunca foram publicados, aparece um exemplo de URL. Caso contrário, a URL real do protótipo funcional ou aplicativo web publicado é exibida. Caso sejam despublicados, a URL exibida não muda, mas não fica mais ativa na web pública.
- Status: o status padrão é Não publicado. Se o protótipo funcional ou o aplicativo web estiver no ar, você verá Publicado em vez disso.
- Quem pode visualizar (apenas para planos Organização e Enterprise): você pode publicar seu app para que esteja disponível para todos na web, ou restringir o acesso apenas para um público interno.
Modal Configurações do Make
Há uma série de configurações avançadas opcionais que você pode definir antes ou depois de publicar seu protótipo funcional ou aplicativo web. Para visualizar o modal Configurações do Make, no canto superior direito da interface do Figma Make, clique em Configurações do Make.
No modal Configurações do Make, é possível especificar os metadados e a capacidade de descoberta do seu protótipo funcional ou aplicativo web publicado. No modal Configurações do Make, você pode ver se seu protótipo funcional foi publicado ou não, publicá-lo ou despublicá-lo e definir o seguinte:
- Título
- Meta descrição
- Idioma
- ID do Google Analytics
- Excluir todas as páginas dos resultados da busca
- Favicon
- Gerenciar o acesso ao app publicado
- Imagem para compartilhamento em redes sociais
- Código personalizado para o cabeçalho e o texto do site
Título
Use a configuração de Título para especificar um título para seu protótipo funcional ou aplicativo web publicado. O título aparece nas abas do navegador, nos resultados dos mecanismos de busca e nas redes sociais. Adicionar um título ajuda as pessoas a entender em qual página estão no navegador, auxilia no SEO e melhora a acessibilidade.
Se nenhum título for fornecido, o Figma gerará um para você.
Meta descrição
Use a configuração Meta descrição para fornecer uma descrição do seu protótipo funcional ou aplicativo web publicado. Uma meta descrição é um breve resumo do conteúdo do seu site ou página e é projetada para atrair usuários e melhorar as taxas de cliques das páginas de resultados dos mecanismos de busca (SERPs).
Se nenhuma descrição for fornecida, o Figma gerará uma para você.
Idioma
Use a configuração Idioma para definir o idioma principal do conteúdo do seu protótipo funcional ou aplicativo web. Definir o código de idioma para o seu protótipo funcional ou aplicativo web melhora a acessibilidade e auxilia os recursos de tradução do navegador, indicando claramente o idioma principal.
Os códigos ISO de idiomas atribuem identificadores únicos aos idiomas. Alguns dos códigos de idiomas mais comuns são:
- ar – Árabe
- de – Alemão
- en – Inglês
- es – Espanhol
- fr – Francês
- ja – Japonês
- hi – Hindi
- ru – Russo
- pt – Português
- zh – Chinês
Confira a lista completa de códigos ISO de idiomas na Wikipedia.
ID do Google Analytics
Use a configuração ID do Google Analytics para capturar métricas de uso com o Google Analytics. Conecte-se a uma propriedade do Google Análises para obter insights sobre como as pessoas estão usando seu site publicado.
Revise as instruções do Google sobre como encontrar seu ID do Google Analytics.
Atenção: no momento, apenas o Google Analytics é compatível, mas pretendemos aceitar mais provedores de análises no futuro. Você pode usar as configurações de código personalizadas para o cabeçalho e o texto do seu protótipo funcional ou aplicativo para fornecer trechos de código para outras plataformas de análise às quais não oferecemos suporte direto.
Lembre-se de que você é responsável por garantir que seu protótipo funcional ou aplicativo esteja em conformidade com as leis aplicáveis, incluindo quaisquer leis aplicáveis a cookies, privacidade e coleta de dados.
Excluir todas as páginas dos resultados da busca
Ative a configuração Excluir todas as páginas dos resultados de busca para instruir os robôs dos mecanismos de busca a não indexar seu protótipo funcional ou aplicativo web ou mostrá-lo nos resultados da busca.
Marque a caixa para adicionar uma tag <meta name="robots" content="noindex"> ao cabeçalho do seu protótipo funcional ou aplicativo web publicado.
Favicon
Use a configuração Favicon para fazer upload de uma imagem para usar como favicon. Um favicon fornece uma pequena representação visual do seu protótipo funcional ou app web publicado nas abas do navegador, nos resultados da busca e nos favoritos. Recomendamos usar uma imagem de 48 px x 48 px.
Gerenciar acesso ao site publicado
Escolha quem pode acessar o app publicado Organização Enterprise
Nos planos Organização e Enterprise, você pode escolher se publica seu app na rede aberta ou se o restringe a um público interno. Se um arquivo for publicado internamente:
- Qualquer membro logado da sua organização pode visualizá-lo
- Convidados e qualquer pessoa fora da sua organização não podem acessá-lo
Nota: se você não tiver a opção de definir o público como Qualquer pessoa na web, é provável que um administrador tenha desativado a publicação na rede aberta.
Adicionar proteção por senha
Quando a proteção por senha está ativada, os visitantes precisam inserir uma senha para ver o conteúdo publicado do seu app web, incluindo metadados como o título ou descrição.
Você pode criar sua própria senha ou usar uma gerada automaticamente pelo Figma:
- As senhas que você cria devem ter no mínimo 4 caracteres e podem conter qualquer tipo de caractere
- Senhas geradas pelo Figma combinam quatro palavras aleatórias, tornando-as fortes e únicas
A senha será aplicada automaticamente ao seu app web publicado assim que você salvá-la. Você não precisa republicar, embora as mudanças possam levar um ou dois minutos para surtir efeito.
Nota: se você adicionar uma senha a um app web publicado que não foi excluído dos resultados de mecanismos de busca, alguns metadados podem continuar a aparecer nas listagens de busca. Uma vez ativada a proteção por senha, os mecanismos de busca não poderão mais indexar o conteúdo do seu app web, e ele tipicamente desaparecerá dos resultados ao longo do tempo. Se você deseja acelerar o processo, pode fazer uma solicitação de remoção através do Google Search Central.
Depois de definida, você não pode visualizar a senha novamente. Se você esquecer de copiá-la, precisará criar uma nova. Quando você altera a senha, qualquer pessoa com acesso anterior precisará inserir a nova senha na próxima vez que atualizar o app.
Nota: você pode enfrentar algumas restrições ao definir uma senha:
- Se você não consegue criar sua própria senha, provavelmente sua organização exige apenas senhas geradas automaticamente. Sua organização também pode exigir proteção por senha para todos os sites publicados.
- Você não pode adicionar uma senha se o público estiver definido como apenas interno.
Imagem para compartilhamento em redes sociais
Use a configuração de imagem de compartilhamento social para fazer upload de uma imagem que aparece quando seu protótipo funcional ou app web publicado é compartilhado nas redes sociais. Recomendamos usar uma imagem com 1200 px de largura por 630 px de altura. Se uma imagem de compartilhamento social não for fornecida, o Figma utilizará uma captura de tela do seu app.
Código personalizado para o cabeçalho e o texto do site
Você pode adicionar trechos de código personalizados no começo ou no final das tags de cabeçalho ou texto do protótipo funcional ou aplicativo web.
Por exemplo, carregar tags críticas, como análises, no cabeçalho garante que elas sejam executadas logo no início, enquanto elementos não críticos, como um widget de chat, podem ser colocados no final do texto para evitar que ele deixe o conteúdo principal do seu protótipo ou aplicativo web lento.
Perguntas frequentes
Compartilhar um link para o meu app mostra metadados desatualizados ou incorretos. Como posso resolver isso?
Primeiro, certifique-se de que você publicou a versão mais recente do seu app com todos os metadados atualizados. Se tudo estiver publicado, mas outras plataformas ainda mostrarem informações antigas, é provável que isso se deva ao armazenamento em cache.
A maioria das plataformas sociais armazena em cache os metadados dos links — como títulos, descrições e imagens de visualização — na primeira vez que um URL é compartilhado. Mesmo depois de atualizar sua página, essas plataformas podem continuar exibindo os dados antigos. Para atualizar a visualização, você pode limpar o cache executando seu URL na ferramenta de depuração ou visualização da plataforma, o que força a plataforma a coletar novamente os metadados mais recentes.
Ferramentas para atualizar metadados:
- Facebook: Depurador de Compartilhamento
- LinkedIn: Post Inspector
- X (Twitter): Card Validator
-
Slack: as visualizações são atualizadas automaticamente ao longo do tempo, ou você pode forçar uma nova visualização compartilhando um link ligeiramente modificado (por exemplo, adicionando
?v=2ao final do URL).