Como Incorporar Feeds de Redes Sociais no Figma Sites?

Sim! Figma tem um novo construtor web chamado Figma Sites, e agora você pode projetar e publicar um site em um ambiente sem código.

Você pode criar landing pages responsivas e polidas visualmente, portfólios ou projetos internos, todos alimentados por seus designs Figma. Mas e se você quiser tornar suas páginas mais dinâmicas com prova social em tempo real?

Agora você pode incorporar qualquer widget EmbedSocial (um feed do Instagram, um controle deslizante de Google Reviews ou uma galeria de menções do TikTok) diretamente no seu Figma Site.

O que é Figma Sites?

Figma Sites é uma ferramenta de publicação leve que permite transformar qualquer design Figma em uma página web ao vivo e compartilhável, sem necessidade de desenvolvedores.

---

Pense nisso como uma forma de distribuir micro-sites, campanhas ou apresentações usando seu sistema de design existente. E agora, com suporte para incorporações, você pode aprimorar suas páginas com widgets ao vivo do EmbedSocial.

Etapas para incorporar widgets do Instagram ou Google Reviews no Figma Sites

Apenas códigos iframe são suportados no Figma Sites. Isso significa que você precisa usar a opção de incorporação iframe do seu widget EmbedSocial. Aqui está como fazer passo a passo:

Etapa 1: Copie o código Iframe do widget

1. Vá para sua conta EmbedSocial ou crie uma nova conta se você é um novo utilizador.
2. Vá para Widgets, crie um novo ou selecione o widget que deseja incorporar (Instagram Feed, Google Reviews, TikTok, etc.)
3. No Editor, no painel de configurações do lado esquerdo, clique na aba ‘Embed’ e clique
4. Copie o código iframe (certifique-se de não usar a versão JavaScript)

Etapa 2: Adicione o Bloco HTML no Figma Sites

Siga estas etapas para colar seu código dentro do seu Figma Site:

1. Abra seu projeto Figma Site.
2. No painel esquerdo, clique no botão ➕ para adicionar um novo bloco.
3. Selecione Embeds nas opções de bloco.
4. Em seguida, escolha o bloco URL ou HTML. Você precisará ajustar o bloco na área onde deseja incorporar o código.
   
5. Você verá um novo painel HTML à direita, onde será necessário colar seu código iframe.
   

Etapa 3: Ajuste a posição e publique

• Após incorporar, você pode ajustar a posição do bloco, largura e altura.
• Seu widget será renderizado ao vivo dentro do layout do Figma Site, permitindo que você visualize e estilize o resto do seu conteúdo de acordo.
• Clique em Publish para ver as mudanças ao vivo.

Aqui está um Figma site ao vivo com um widget Instagram incorporado pelo EmbedSocial: veja em ação.

Veja o Figma Site ao vivo

Começar

Agora você terá um widget EmbedSocial totalmente funcional dentro do seu Figma Site, seja exibindo UGC do Instagram, depoimentos de clientes, um widget enviável ou Google Reviews em tempo real. É uma forma simples de transformar seu design estático em uma experiência viva alimentada por conteúdo autêntico.