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.

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.