Estos días he estado investigando Figma Sites, viendo varios tutoriales.
Por si te lo preguntas, Figma sites sirve para diseñar, construir y publicar páginas web reales directamente desde Figma, sin tener que exportar el diseño y reconstruirlo después en otra plataforma.
Con esta herramienta puedes:
- Diseñar una web usando una interfaz muy similar a Figma Design.
- Crear diseños responsive para móvil, tablet y escritorio.
- Añadir interacciones y efectos como animaciones, parallax, marquesinas o cursores personalizados.
- Previsualizar el funcionamiento antes de publicar.
- Publicar la web directamente en Internet.
- Trabajar de forma colaborativa con otros diseñadores.
- Gestionar contenido dinámico mediante su CMS, útil para blogs, portfolios o páginas de eventos.
La diferencia principal respecto a Figma Design es esta:
- Figma Design crea principalmente diseños y prototipos.
- Figma Sites convierte esos diseños en una web navegable y publicada.
Es perfecto para crear rápidamente una landing de campaña, un micrositio promocional o un prototipo web que pueda compartirse públicamente sin depender inicialmente del equipo de desarrollo.
No está pensado necesariamente para sustituir una plataforma compleja de reservas, un e-commerce avanzado o un multi-portal complejo de 6 idiomas como www.centraldereservas.com (12 años desarrollo, 200K+ líneas de PHP, 22 módulos de negocio, 2+ bases MySQL propias/externas, 2 MongoDB (URLs + caché), 4 entornos…)
Su punto fuerte está en webs visuales, landings, portfolios, campañas y sitios corporativos relativamente sencillos.
Tienes más información en la página oficial de Figma Sites.
Me ha gustado este tutorial donde Raúl Marín usa Figma SItes para hacer un sistema de diseño.
Su objetivo con ello era doble: no pagar y no depender de herramientas SaaS “cerradas” que limitan lo que puedes personalizar.
Puntos interesantes de Figma Sites:
- tienes todo integrado en Figma: copiar/pegar funciona, y se pueden conectar librerías, variables, componentes, estilos y modos (dark/light) igual que en Figma Design.
- Componentes: admite properties, variantes y slots; los componentes de librerías externas se actualizan solos al republicar la librería (fundamental para documentación viva).
- Responsive con breakpoints: Se pueden crear tantos como quieras.
- Grid de maquetación (nueva) y autolayout en todas las páginas.
- Code Layer (la parte que, según él, da valor real): un mini-Make dentro de Figma para integraciones e IA.
- Embebidos: URL, YouTube, Google Maps, y ahora también Vimeo, Google Forms, Lottie y Typeform.
Pero aun está muy verde, de hecho Raul lo hizo porque es colaborador de Figma y quería explorar si Sites podría serivir para esto.
Y si te preguntas cual es la diferencia entre Sites vs. Make, aquí la tienes:
- Figma Sites compite con Webflow, Framer, Elementor: mantienes el control del diseño y del píxel, con el extra de la IA de Code Layer combinada con tu trabajo artesanal.
- Figma Make compite con Lovable, V0 y el “vibe coding”: monta plataformas enteras (login, permisos) en minutos, pero es no determinista y no controlas bien la estética (usa Tailwind y shadcn por defecto).
Iré investigando más y contándote!