Explorar Figma Sites
Figma Sites se lanzó en versión beta abierta en Config 2025. Actualmente, está disponible en todos los planes de pago, y próximamente habrá una experiencia limitada en el plan Inicial. Obtén más información sobre lo que se incluye en la versión beta.
¿Qué es Figma Sites?
Figma Sites te permite diseñar, crear prototipos y publicar sitios web de alta calidad, todo en un solo lugar.
- Crea hermosas disposiciones adaptables para cualquier tamaño de pantalla
- Utiliza las mismas herramientas de diseño a las que estás acostumbrado en Figma Design, como marcos, disposición automática, formas, componentes responsivos y mucho más
- Copia y pega sin problemas entre Figma Design y Figma Sites
- Dale vida a tu sitio con interacciones y animaciones fáciles de usar, como el desplazamiento de marquesina, los cursores personalizados y los efectos de desplazamiento
- Comparte sitios web en vivo con colaboradores para explorar tus ideas, probar la usabilidad y seguir impulsando tu trabajo
Consejo: Guarda como favorito https://figma.com/site/new para que siempre tengas un nuevo archivo de Figma Sites al alcance de la mano cada vez que te llegue la inspiración.
Encuentra tu forma
Barra de navegación izquierda y barra lateral
La barra de navegación izquierda te permite cambiar rápidamente entre tareas en Figma Sites:
- Archivo: esta vista es donde se lleva a cabo la construcción. Puedes ver una lista completa de páginas web y capas en tu archivo, y publicar tu sitio cuando estés listo.
- Insertar: añade elementos prediseñados, como barras de navegación, pies de página, plantillas de sitios web e incrustaciones, y accede a tus bibliotecas de diseño.
- Búsqueda: localiza rápidamente elementos en tus diseños.
- Creación: usa capas de código para dar vida a ideas y diseños. (¡Próximamente!)
- CMS: Crea y gestiona contenido para tu sitio web. (¡Próximamente!)
- Configuraciones: actualiza la configuración de tu sitio web para ayudar a los motores de búsqueda a comprender tu contenido, mejorar la accesibilidad y facilitar a los usuarios la búsqueda de lo que necesitan.
Barra de herramientas
La barra de herramientas alberga todas las herramientas que necesitarás para crear tu sitio:
- Añade objetos como páginas web, marcos, imágenes, texto y formas
- Accede a las herramientas de Figma AI en el menú Acciones.
Consejo: Si has pasado tiempo diseñando en Figma Design, trabajar en Figma Sites te resultará muy familiar. Consulta esta lista de herramientas de diseño disponibles en Figma Sites.
Barra lateral derecha
La barra lateral derecha es donde se controla el aspecto de los elementos de diseño en el lienzo o en las páginas web.
Cuando seleccionas un objeto en el lienzo, sus propiedades se muestran en la pestaña Diseño.
Tus permisos sobre el archivo, ya sean de edición o solo de visualización, determinan lo que puedes ver y hacer en la barra lateral derecha.
Añade animaciones, transiciones y efectos visuales para que tu sitio se sienta dinámico.
Ya sea una sutil animación al pasar el ratón sobre los botones, añadir profundidad y movimiento usando paralaje, o efectos interesantes disparados por acciones del usuario, las interacciones pueden hacer que tus páginas web se sientan más dinámicas y vibrantes.
Crea un sitio web
Comienza desde un diseño existente
Existen varias formas de obtener una ventaja inicial con Figma Sites si no deseas comenzar desde cero:
Comenzar con una plantilla
Cada nuevo archivo se abre con el selector de plantillas.
Estas plantillas, y muchas más, también están disponibles en Plantillas y herramientas en el explorador de archivos.
Copia y pega desde Figma Design
Toma tus diseños y cópialos y pégalos directamente en una página web, o accede a ellos a través de tus bibliotecas de diseño existentes.
Obtén más información sobre cómo copiar y pegar entre Figma Design y Figma Sites.
Arma un sitio utilizando bloques
Arrastra y suelta bloques preconstruidos, como páginas de destino, encabezados, pies de página y secciones personalizables, para ensamblar un sitio rápidamente.
Construye de manera responsiva
Figma Sites te ofrece un gran control al crear disposiciones perfectas en píxeles para diferentes tamaños de pantalla.
Añadir páginas web
Cuando creas un nuevo sitio, verás un contenedor gris. Esta es una página web. Cada página web tiene un nombre, un botón para previsualizarla y una manera de añadir nuevos puntos de interrupción.
Haz clic en el ícono página web en la barra de herramientas para añadir una nueva página web.
Obtén más información sobre cómo añadir y organizar páginas web.
Añadir puntos de interrupción
Los puntos de interrupción definen anchos de pantalla específicos donde la disposición de tu página web cambia para adaptarse a las necesidades de diferentes tamaños de pantalla.
Añadir puntos de interrupción te permite ajustar el aspecto del sitio web y optimizar la experiencia del usuario en todos los dispositivos.
Obtén más información sobre cómo trabajar con puntos de interrupción.
Editar en todos los puntos de interrupción
Si tu página web tiene más de un punto de interrupción, puedes añadir, seleccionar y editar objetos en todos los puntos de interrupción simultáneamente.
Obtén una vista previa de tu trabajo
Cuando estés listo, previsualiza tu sitio para experimentarlo como lo harán tus usuarios. Es una excelente manera de revisar rápidamente las animaciones, las interacciones y la capacidad de respuesta, sin necesidad de publicar primero. Simplemente toca el ícono de vista previa en cualquier página web, o presiona el atajo de teclado Mayús + Espacio para abrir la vista previa integrada.
Obtén más información sobre la previsualización en Figma Sites.
Compártelo con el mundo
Publicar tu sitio es el paso final antes de compartirlo con el mundo.
Después de publicar, puedes hacer cambios en tu sitio, añadir o eliminar páginas web, o conectar un dominio personalizado propio.