¿Cómo integrar feeds de redes sociales en Figma Sites?

¡Sí! Figma tiene un nuevo constructor web llamado Figma Sites, y ahora puedes diseñar y publicar un sitio web en un entorno sin código.

Puedes crear páginas de destino responsivas y pulidas visualmente, portafolios o proyectos internos, todo impulsado por tus diseños de Figma. Pero, ¿qué pasa si deseas hacer tus páginas más dinámicas con prueba social en tiempo real?

Ahora puedes integrar cualquier widget de EmbedSocial (un feed de Instagram, un deslizador de reseñas de Google, o una galería de menciones de TikTok) directamente en tu Figma Site.

¿Qué son Figma Sites?

Figma Sites es una herramienta de publicación ligera que te permite convertir cualquier diseño de Figma en una página web activa y compartible sin necesidad de desarrolladores.

---

Piénsalo como una forma de crear micro-sitios, campañas o presentaciones usando tu sistema de diseño existente. Y ahora, con soporte de integración, puedes mejorar tus páginas con widgets activos de EmbedSocial.

Pasos para integrar widgets de Instagram o reseñas de Google en Figma Sites

Solo se admiten códigos iframe en Figma Sites. Esto significa que necesitas usar la opción de integración iframe de tu widget de EmbedSocial. Aquí se explica cómo hacerlo paso a paso:

Paso 1: Copia el código iframe del widget

1. Ve a tu cuenta de EmbedSocial o crea una nueva cuenta si eres usuario nuevo.
2. Ve a Widgets, crea uno nuevo o selecciona el widget que deseas integrar (Feed de Instagram, Reseñas de Google, TikTok, etc.)
3. En el Editor, en el panel de configuración de la izquierda, haz clic en la pestaña ‘Integrar’ y haz clic
4. Copia el código iframe (asegúrate de no usar la versión JavaScript)

Paso 2: Añade el bloque HTML en Figma Sites

Sigue estos pasos para pegar tu código dentro de tu Figma Site:

1. Abre tu proyecto de Figma Site.
2. Desde el panel de la izquierda, haz clic en el botón ➕ para añadir un bloque nuevo.
3. Selecciona Integraciones de las opciones de bloque.
4. Luego elige el bloque URL o HTML. Necesitarás ajustar el bloque en el área donde deseas integrar el código.
   
5. Verás un nuevo panel HTML a la derecha, donde necesitarás pegar tu código iframe.
   

Paso 3: Ajusta posición y publica

• Después de integrar, puedes ajustar la posición del bloque, ancho y alto.
• Tu widget se mostrará en vivo dentro del diseño de Figma Site, permitiéndote ver en vista previa y aplicar estilo al resto de tu contenido en consecuencia.
• Haz clic en Publicar para ver los cambios en vivo.

Aquí hay un Figma site en vivo con un widget de Instagram integrado por EmbedSocial - míralo en acción.

Ver Figma Site en vivo

Primeros pasos

Ahora tendrás un widget de EmbedSocial totalmente funcional dentro de tu Figma Site, ya sea que muestre UGC de Instagram, testimonios de clientes, un widget de envío, o reseñas de Google en tiempo real. Es una forma simple de convertir tu diseño estático en una experiencia viva impulsada por contenido auténtico.