• Saltar a la navegación principal
  • Saltar al contenido principal

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Vibe coding
  • Product Design
  • Design system
  • Tutoriales de Figma
  • Blog
  • Newsletter
Figma / Cómo pasar un diseño de Figma Sites a WordPress

Cómo pasar un diseño de Figma Sites a WordPress

Ayer me dejaron una pregunta en YouTube que hablaba de “el salto” de Figma Sites a WordPress, y me pareció importante traerlo aquí porque es una duda que ya han preguntado más de una vez.

Una suscriptora me preguntaba cómo podía exportar su landing hecha en Figma Sites para verla en VS Code, abrirla con Live Server y, sobre todo, cómo convertir ese diseño en una página real usando WordPress, porque nadie lo explica claro en ningún tutorial.

de figma a wordpress
Cómo puedo pasar a WordPress un diseño hecho en Figma Sites?

Por mi parte, prometo responder esto mismo en mi canal.

Ahora bien…

Exportar un proyecto de Figma Sites a HTML

Voy directo: hoy por hoy, no.

Me explico:

Figma Sites no está pensado para “exportar a código”. No funciona como una herramienta que te tira HTML y CSS para llevártelo a Visual Studio Code.

Sites genera todo el sitio internamente y te deja publicarlo en “su propio hosting”.

Nada de abrir el código fuente, nada de manipularlo. A lo sumo te deja usar IA para hacer cosas un poco más complejas, pero descargar el código, no.

Y la verdad, las herramientas que hay por ahí para extraer HTML o rompen el diseño, o están obsoletas, porque Sites usa un sistema muy propio para renderizar.

Por eso, cuando alguien pregunta cómo pasar su landing de Figma Sites a un entorno local o a un hosting propio, mi respuesta realista es: no se puede automatizar, lo tienes que reconstruir.

Entonces…

Cómo pasar de Figma Sites a una página real en WordPress

Aquí es donde entra WordPress y donde casi todo el mundo se lía.

Si quieres que tu página esté online rápidamente, sin dolores de cabeza, puedes publicarla directamente desde Figma Sites, como lo harías con Framer, por dar un ejemplo.

En el momento de escribir este post, la publicación de un diseño en Figma Sites está disponible únicamente con una cuenta de pago de Figma.

Una vez tienes acceso, le das a “Publish” y listo: tu web queda online con su dominio tipo tusitio.figma.site. También podrías engancharla a un dominio de tu propiedad.

Funciona bien, Google la indexa y puedes usarla.

Pero…

La solución

Si lo que quieres es migrar de Figma Sites a WordPress, entonces sí o sí hay que montarla de nuevo.

WordPress no importa diseños de Sites, ni existe un plugin mágico que lo haga. Al menos yo no lo conozco, ni tampoco lo haría. Hoy, en noviembre de 2025, estoy dejando WordPress después de 20 años de uso.

Si quieres usar WordPress, mi recomendación es que construyas el diseño que hiciste con el editor de bloques de WordPress (el que antes se llamaba Gutenberg) o con GeneratePress. De Elementor no hablo porque es una basura.

Recuerda, Figma Sites te da el diseño, y en tu caso WordPress te da el motor.

La transición es manual, pero es la forma profesional de hacerlo.

Si estás empezando como web designer, es muy simple: publica tu landing en Figma Sites para salir al mundo cuanto antes. Cuando quieras un sitio más grande, más serio o con funcionalidades avanzadas, ahí sí das el salto a WordPress y construyes encima.

Si necesitas más ayuda, puedes dejar tus dudas en mi servidor de Discord.

Aprende sobre UX/UI + IA, Figma y Product Design

📣 Apúntate a mi newsletter semanal

🔥 Únete a la comunidad UX y UI fácil en Discord

🔴 Suscríbete al canal de YouTube para ver tutoriales

Acerca de Juanpol

Diseñando desde 1993 y todavía aprendiendo. Actualmente como Product Designer en Freepik, aquí comparto mis notas sobre lo que voy probando de UX/UI e IA.

Juanpol

Juanpol

Vibe Coding y diseño UX y UI con IA

  • Acerca de
  • info@juanpol.com
  • LinkedIn
  • GitHub
  • YouTube
  • Discord
  • Telegram
  • X | @juanpol

  • Aviso legal, Privacidad y Cookies

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

Política de cookies

Más información sobre nuestra política de cookies.