Explora Figma Sites
Figma Sites se lanzó en beta durante Config 2025. Actualmente está disponible en todos los planes de pago, y próximamente habrá una experiencia limitada en el plan Inicial. Descubre más 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 adaptativas para cualquier tamaño de pantalla
- Utiliza las mismas herramientas de diseño que las que ya conoces de Figma Design, como marcos, disposición automática, formas y componentes adaptativos, entre otras
- Copiar y pegar fácilmente entre Figma Design y Figma Sites
- Dale vida a tu sitio web con animaciones e interacciones 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 avanzando en tu trabajo
Consejo: añade a marcadores https://figma.com/site/new para que siempre tengas un nuevo archivo de Figma Sites al alcance de tu mano cuando te llegue la inspiración.
Hazlo a tu manera
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: en esta vista es donde se crea. 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 páginas web e incrustaciones— y accede a tus bibliotecas de diseño.
- Buscar: localiza rápidamente elementos en tus diseños.
- Hacer: utiliza 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!)
- Configuración: actualiza la configuración de tu sitio web para ayudar a los motores de búsqueda a entender el contenido, mejorar la accesibilidad y facilitar que los usuarios encuentren lo que buscan.
Barra de herramientas
La barra de herramientas muestra 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 diseñado a menudo 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 controlas la apariencia y el estilo 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 en 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 dar más vida a tu sitio.
Ya sea una sutil animación al pasar el ratón sobre los botones, añadir profundidad y movimiento con el efecto de paralaje o efectos interesantes activados por las acciones del usuario, las interacciones pueden hacer que tus páginas web sean más ágiles y vibrantes.
Crea un sitio web
Comienza desde un diseño existente
Hay varias maneras de no comenzar desde cero con Figma Sites:
Empieza 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
Busca 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ños existentes.
Obtén más información sobre copiar y pegar entre Figma Design y Figma Sites.
Monta un sitio utilizando bloques
Arrastra y suelta bloques preconstruidos, como páginas de destino, encabezados, pies de página y secciones personalizables, para montar un sitio rápidamente.
Crea diseños adaptativos
Figma Sites te ofrece un gran control al crear disposiciones perfectas hasta el último píxel para diferentes tamaños de pantalla.
Añade páginas web
Cuando crees 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 ver la vista previa y una forma de agregar nuevos puntos de interrupción.
Haz clic en el icono 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ñade puntos de interrupción
Los puntos de interrupción definen anchos de pantalla específicos en los que la disposición de la página web cambia para adaptarse a las necesidades de diferentes tamaños de pantalla.
Agregar puntos de interrupción adicionales te permite mejorar la apariencia y el uso de la página web y optimizar la experiencia de usuario en todos los dispositivos.
Obtén más información sobre cómo trabajar con puntos de interrupción.
Edita todos los puntos de interrupción
Si tu página web tiene más de un punto de interrupción, puedes agregar, seleccionar y editar objetos en todos los puntos de interrupción simultáneamente.
Obtén una vista previa de tu trabajo
Cuando hayas acabado, crea una vista previa de 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 icono de Vista previa en cualquier página web, o presiona el atajo de teclado Shift Space para abrir la vista previa en línea.
Obtén más información sobre cómo crear la vista previa en Figma Sites.
Compártelo con el mundo
Publicar tu sitio es el paso final para compartirlo con el mundo.
Después de publicarlo, puedes realizar cambios en tu sitio, añadir o eliminar páginas web, o conectar un dominio personalizado propio.