• Saltar a la navegación principal
  • Saltar al contenido principal

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Vibe coding
  • Product Design
  • Design system
  • Tutoriales de Figma
  • Blog
  • Newsletter
Figma / Cómo usar el CMS de Figma Sites

Cómo usar el CMS de Figma Sites

En el último directo retomé la plantilla que habíamos creado el día anterior y le metí una buena limpieza siguiendo todo el feedback que me dejó la comunidad en Discord. A partir de esa base, monté una nueva página para las notas de versión y comencé a probar cómo se comporta el CMS de Figma Sites cuando empiezas a añadir contenido real.

Cómo usar el CMS de Figma Sites
Tutorial: Crear un blog con el CMS de Figma Sites

Lo interesante aquí es ver cómo Figma Sites se integra con el CMS en esta fase beta. No es perfecto, pero ya te permite trabajar con contenido dinámico, probar flujos reales y validar decisiones de UX sin tener que escribir código. Esa mezcla entre diseño rápido y datos reales te obliga a pensar como diseñador y como editor al mismo tiempo.

Mientras añadía nuevos posts, revisaba slugs, ajustaba campos y conectaba todo con el layout, quedó claro que el CMS de Figma Sites todavía tiene carencias.

Ojito: funciona lo suficiente como para construir un blog que respire contenido real y que te permita iterar con rapidez, que es justo lo que buscamos quienes diseñamos bajo presión.

Conectando imágenes, contenido y texto enriquecido

Cuando empecé a trabajar con las imágenes quedó claro que Figma Sites tiene su carácter. Las tienes que asignar manualmente y darles cariño para que se comporten bien en responsive. Es un detalle pequeño, pero marca la diferencia cuando estás diseñando un blog que debe adaptarse sin romper la jerarquía visual.

El otro experimento interesante fue probar cómo interpreta el CMS el contenido en Markdown. Pegué textos generados con IA directamente en el campo de “rich content” y, aunque no renderizó todo perfecto, funcionó mejor de lo que esperaba. Para quienes trabajamos con copy, estructura y jerarquías, esto abre un flujo potente: generas contenido con IA, lo pegas en el CMS, y en segundos lo ves integrado en tu diseño.

No es todavía un sistema estable, pero sí una herramienta realista para validar ideas rápido. Y cuando estás enseñando UX (o usas Figma Sites en tus proyectos) esta rapidez se agradece muchísimo.

Rediseñando componentes responsive

La parte más intensa del directo fue reconstruir la tarjeta del post. Cambié la estructura, corregí la alineación, depuré el comportamiento en mobile y preparé un hover con overlay que funcionara igual en todas las variantes. Fue de esas tareas donde notas que Figma Sites sigue verde, pero también que puedes controlarlo si conoces los fundamentos.

Una vez resuelto el componente, revisé toda la navegación: Home, Blog, Versiones y los posts individuales. Y sí, navegar por una web completa diseñada directamente en Figma, con datos reales del CMS, sigue siendo una pequeña locura. Una buena, de las que te aceleran el proceso de diseño en serio.

Aunque Figma Sites está en beta, ya ofrece suficiente como para montar flujos de UX muy realistas. Permite validar arquitectura, contenido y comportamiento sin esperar al desarrollo. Y eso, para estudiantes y profesionales de diseño UX y UI, es oro puro.

Aprende sobre UX/UI + IA, Figma y Product Design

📣 Apúntate a mi newsletter semanal

🔥 Únete a la comunidad UX y UI fácil en Discord

🔴 Suscríbete al canal de YouTube para ver tutoriales

Acerca de Juanpol

Diseñando desde 1993 y todavía aprendiendo. Actualmente como Product Designer en Freepik, aquí comparto mis notas sobre lo que voy probando de UX/UI e IA.

Juanpol

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Acerca de
  • info@juanpol.com
  • LinkedIn
  • GitHub
  • YouTube
  • Discord
  • Telegram
  • X | @juanpol

  • Aviso legal, Privacidad y Cookies

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

Política de cookies

Más información sobre nuestra política de cookies.