Empezar gratis
Menú de la documentación

Convertir desde Figma

Paso a paso: convierte un archivo o frame de Figma en contenido de WordPress con un enlace y un token de acceso personal, o con un JSON exportado.

Figma está disponible en todos los planes, también Free. Puedes conectar con un enlace y un token de acceso personal, o subir el JSON exportado de Figma.

Una página o un frame por proyecto

Tapeto convierte la primera página del archivo de Figma — o solo el frame concreto cuando tu enlace apunta a uno. Para convertir un sitio con varias páginas, crea un proyecto por frame (copia el enlace de cada frame). Cada proyecto cuenta para tu límite mensual.

Antes de empezar

  • Un archivo de Figma que puedas abrir (necesitas al menos acceso de lectura).
  • Un token de acceso personal de Figma (solo para el método del enlace).
  • Tu WordPress, si vas a publicar: consulta la guía de ZIP / HTML.

Paso 1 — Prepara el diseño en Figma

Tapeto lee la estructura de las capas, así que un archivo ordenado da mejor Fidelity Score.

  1. Construye cada página como un Frame con ancho de escritorio.
  2. Usa Auto layout siempre que puedas: el auto layout horizontal y vertical se convierte en filas y columnas con sus separaciones y relleno.
  3. Nombra las capas según su función — Header, Hero, Nav, Card, Button, Footer, H1, H2… Los nombres ayudan a Tapeto a decidir qué es una sección, un menú o un botón.
  4. Escribe el texto como capas de texto reales (no contornos) y usa fuentes disponibles en Google Fonts.
  5. Elimina o deja fuera las capas que no necesites: las capas ocultas se omiten.

Paso 2 — Crea el proyecto

Método A — Enlace y token

  1. En Figma, clic derecho sobre el frame → Copy/Paste as → Copy link to selection (o copia la URL del archivo para convertir la primera página).
  2. Crea un token: Figma → menú de tu perfil → Settings → Security → Personal access tokens → Generate new token. Basta con acceso de lectura al contenido del archivo. Cópialo (empieza por figd_).
  3. En Tapeto pulsa Nuevo proyecto, escribe un nombre y abre la pestaña Figma.
  4. Pega el enlace en URL del archivo o frame de Figma y el token en Token de acceso personal de Figma.
  5. Pulsa Crear proyecto.

El token se usa una vez para descargar el archivo y nunca se guarda. El enlace debe ser del tipo https://www.figma.com/design/….

Método B — Subir el JSON

  1. Exporta el JSON del archivo desde la API REST de Figma (GET /v1/files/:file_key con tu token) y guárdalo como un archivo .json de hasta 5–200 MB (según el plan).
  2. En Tapeto pulsa Nuevo proyecto, abre la pestaña Figma y suelta el .json en la zona de la parte inferior.
  3. Pulsa Crear proyecto.

Espera a que el proyecto esté «procesado». Si termina en «error», el mensaje te dice por qué (consulta la tabla de abajo).

Paso 3 — Elige el builder y convierte

  1. Abre el proyecto y elige Gutenberg (todos los planes) o Elementor (desde Starter).
  2. Pulsa Convertir y espera a que la conversión esté completada.
  3. Revisa la Preview y el Fidelity Score. Mira las imágenes: si falta alguna, sustitúyela desde la Biblioteca de medios después de importar.

Paso 4 — Lleva el resultado a WordPress

Cuenta Free

  1. Abre la pestaña Contenido y pulsa Descargar archivos (o Copiar).
  2. En WordPress: Páginas → Añadir nueva, menú de tres puntos → Editor de código, pega el contenido y vuelve al editor visual.
  3. Si el diseño tiene cabecera o pie, descárgalos desde la pestaña Header / Footer / Sidebar y pégalos en las partes de plantilla correspondientes.
  4. La pestaña Instrucciones detalla los pasos exactos. Exportar WXR y Publicar en WordPress están bloqueados en Free.

Cuenta de pago (Starter, Pro, Agency, Studio)

  1. Elige Elementor si lo prefieres (desde Starter).
  2. Pulsa Exportar WXR e impórtalo desde Herramientas → Importar → WordPress, o conecta tu sitio y pulsa Publicar en WordPress. Ambas opciones se explican paso a paso en la guía de ZIP / HTML.
  3. Al publicar, la página se crea como borrador para que la revises.
  4. En Agency y Studio, el WXR puede incluir además los tipos de contenido propios y los bucles detectados en el diseño.

Si algo falla

Mensaje Causa Qué hacer
Figma rechazó el token o no tienes acceso Token incorrecto, o el archivo no está compartido contigo Genera un token nuevo y comprueba que puedes abrir el archivo
No se encontró el archivo El enlace es incorrecto Copia el enlace de nuevo desde Figma
Figma limitó las peticiones Demasiadas peticiones en poco tiempo Espera un minuto e inténtalo de nuevo
La URL debe ser del tipo figma.com/design/… El enlace no es de un archivo de Figma Usa un enlace que empiece por https://www.figma.com/design/
JSON no reconocido El archivo no es una exportación de Figma Expórtalo de nuevo desde la API REST

Siguiente paso

Lee Exportar resultados para ver todas las formas de llevar la salida a WordPress.