Comment intégrer les flux de réseaux sociaux dans les sites Figma ?

Oui ! Figma dispose d’un nouveau constructeur web appelé Figma Sites, et maintenant vous pouvez concevoir et publier un site web dans un environnement sans code.

Vous pouvez créer des pages d’atterrissage réactives et soignées, des portefeuilles ou des projets internes, le tout alimenté par vos conceptions Figma. Mais que se passe-t-il si vous souhaitez rendre vos pages plus dynamiques avec une preuve sociale en temps réel ?

Vous pouvez maintenant intégrer n’importe quel widget EmbedSocial, un flux Instagram, un curseur Google Avis ou une galerie de mentions TikTok, directement dans votre site Figma.

Qu’est-ce que Figma Sites ?

Figma Sites est un outil de publication léger qui vous permet de transformer n’importe quelle conception Figma en une page web en direct et partageable sans avoir besoin de développeurs.

---

Pensez-y comme un moyen de déployer des micro-sites, des campagnes ou des présentations en utilisant votre système de conception existant. Et maintenant, avec le support des intégrations, vous pouvez améliorer vos pages avec des widgets en direct d’EmbedSocial.

Étapes pour intégrer les widgets Instagram ou Google Avis dans Figma Sites

Seuls les codes iframe sont pris en charge dans Figma Sites. Cela signifie que vous devez utiliser l’option d’intégration iframe de votre widget EmbedSocial. Voici comment procéder étape par étape :

Étape 1 : Copier le code Iframe du widget

1. Accédez à votre compte EmbedSocial ou créez un nouveau compte si vous êtes un nouvel utilisateur.
2. Accédez à Widgets, créez un nouveau widget ou sélectionnez le widget que vous souhaitez intégrer (Flux Instagram, Google Avis, TikTok, etc.)
3. Dans l’Éditeur, dans le panneau des paramètres de gauche, cliquez sur l’onglet ‘Embed’ et cliquez
4. Copiez le code iframe (assurez-vous de ne pas utiliser la version JavaScript)

Étape 2 : Ajouter le bloc HTML dans Figma Sites

Suivez ces étapes pour coller votre code dans votre site Figma :

1. Ouvrez votre projet Figma Site.
2. À partir du panneau de gauche, cliquez sur le bouton ➕ pour ajouter un nouveau bloc.
3. Sélectionnez Embeds dans les options de bloc.
4. Puis choisissez le bloc URL ou HTML. Vous devrez ajuster le bloc dans la zone où vous souhaitez intégrer le code.
   
5. Vous verrez un nouveau panneau HTML sur la droite, où vous devrez coller votre code iframe.
   

Étape 3 : Ajuster la position et publier

• Après l’intégration, vous pouvez ajuster la position du bloc, la largeur et la hauteur.
• Votre widget s’affichera en direct dans la mise en page du site Figma, vous permettant d’aperçu et de styliser le reste de votre contenu en conséquence.
• Cliquez sur Publish pour voir les modifications en direct.

Voici un site Figma en direct avec un widget Instagram intégré par EmbedSocial - voyez-le en action.

Voir le site Figma en direct

Commencer

Vous aurez maintenant un widget EmbedSocial entièrement fonctionnel dans votre site Figma, qu’il affiche du contenu généré par les utilisateurs Instagram, des témoignages de clients, un widget expédiable ou des avis Google en temps réel. C’est un moyen simple de transformer votre conception statique en une expérience vivante alimentée par du contenu authentique.