Cómo convertir Figma a WordPress (4 maneras fáciles, incluyendo IA)

Nuestro equipo de diseño planifica la disposición de las páginas en Figma antes de construirlas en WordPress. Diseñar primero te permite decidir la disposición exacta y luego recrearla en tu sitio.

En esta guía, te mostraremos cuatro maneras de convertir Figma a WordPress, comenzando con el método de IA que probamos nosotros mismos.

Antes de empezar: Prepara tu marco de Figma

Un marco es un lienzo de tamaño fijo en Figma que contiene una pantalla o una página de tu diseño.

Los complementos de IA y de conversión leen tu marco directamente. Un marco limpio te ahorra una ronda de correcciones más adelante.

El plan gratuito Starter de Figma es suficiente para todo lo que se explica en esta guía, por lo que no necesitas una cuenta de Figma de pago para seguirla.

Primero, selecciona tu marco y presiona Shift + A, o haz clic en el botón Auto Layout en el panel derecho.

Auto Layout le dice a Figma que espacie y apile elementos por reglas en lugar de por posiciones fijas. Ayuda a que tu diseño se convierta para dispositivos móviles más adelante.

A continuación, renombra tus capas para describir su contenido, como "Imagen principal" o "Botón CTA" en lugar de "Rectángulo 47".

Las herramientas de IA y los complementos de conversión utilizan esos nombres para entender cada capa. Nombres claros significan menos correcciones después.

Si tienes tiempo, diseña un marco móvil junto con el de escritorio. Eso le da a cualquier herramienta una referencia real de cómo la página debe apilarse en un teléfono en lugar de dejarlo adivinar.

Finalmente, necesitas el enlace a ese marco específico. Haz clic derecho en el marco, ve a 'Copiar/Pegar como' y elige 'Copiar enlace a la selección'.

El enlace que obtienes contiene node-id=, que le dice a la herramienta qué marco leer. Un enlace de archivo simple sin node-id= apunta a todo el archivo en lugar de a tu marco seleccionado y no funcionará con las herramientas de IA o de conversión que se muestran a continuación.

Método 1: Convertir Figma a WordPress con IA

La forma más rápida de convertir un diseño de Figma en una página de WordPress es dejar que la IA lea tu marco y lo reconstruya por ti. Necesitas tres cosas, y las tres tienen planes gratuitos.

La primera es Claude, el asistente de IA que hace el trabajo. La segunda es el conector oficial de Figma, que es la pieza que le da a Claude permiso para leer tu archivo de Figma.

El tercero es WPVibe, un complemento gratuito que conecta tu sitio de WordPress a Claude y crea la página directamente en tu sitio.

En el plan gratuito Starter de Figma, obtienes hasta 20 lecturas de IA al mes. Eso es suficiente para un puñado de páginas. Los planes de pago ofrecen a los asientos Dev y Full hasta 200 lecturas al día, mientras que los asientos View y Collab se mantienen en 20 al mes.

Para comenzar, primero deberás conectar Figma. En la aplicación Claude, ve a Configuración » Conectores, busca Figma e inicia sesión con tu cuenta de Figma.

Si usas Claude Code, ejecuta el comando /mcp y elige Figma de la lista.

A continuación, instala y activa WPVibe en tu sitio de WordPress de la misma manera que instalas cualquier complemento. Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo instalar un complemento de WordPress.

Una vez que esté activo, la pantalla de WPVibe te guiará a través de tres pasos cortos. Copia la URL del servidor MCP que muestra, agrégala a Claude como un conector y verifica tu correo electrónico usando el código de seis dígitos que te envía el complemento.

Luego, pídele a Claude que conecte tu sitio y aprueba con un clic desde dentro de wp-admin. Nunca copies una contraseña en ningún lugar de este proceso.

Una vez que hayas conectado WPVibe a Claude con éxito, pega tu enlace de frame en Claude con este prompt.

Read this Figma frame: [paste your link]. Rebuild it as a new DRAFT page using native WordPress blocks only (group, columns, heading, paragraph, buttons, image). Upload the images to the media library. Match the colors, fonts and spacing. Do not publish.

La frase ‘bloques nativos’ en el prompt significa los bloques estándar que vienen con WordPress, por lo que la página que obtienes permanece editable en el editor de bloques normal y no necesita ningún plugin adicional para mostrarse.

La palabra BORRADOR también importa, ya que evita que la página aparezca en tu sitio en vivo hasta que la hayas revisado.

Cuando ejecutamos esto en nuestro sitio de prueba, una sola lectura del frame le dio a Claude los colores exactos en hexadecimal, tamaños de fuente, alturas de línea, valores de relleno y radios de esquina del diseño.

El primer borrador llegó en 3 minutos y 20 segundos, y esos valores se transfirieron en bloques nativos.

El diseño fue lo que necesitó arreglo antes de que la página se pareciera a nuestro frame de Figma. Claude también subió nuestras imágenes usando la herramienta de carga de medios de WPVibe.

Esto solo funciona cuando tu diseño contiene imágenes reales. Un rectángulo de marcador de posición en Figma no produce ninguna imagen, y no recibes ninguna advertencia al respecto.

Cuatro cosas salieron mal en nuestra prueba. Dos bloques de botones se guardaron en un estado que WordPress consideró inválido, y el editor mostró un aviso de “Intentar recuperación de bloque” en ellos.

Hacer clic en ese aviso arregló ambos botones, pero parece alarmante si no lo esperas.

El segundo problema apareció en el escritorio. Claude construyó nuestras secciones con el ancho de contenido normal del tema.

El diseño se veía en una columna estrecha en el medio de la pantalla, y las tres tarjetas de características se rompieron con una palabra por línea. No se parecía en nada al frame de Figma.

Le pedimos a Claude que arreglara la sección y eso funcionó. Sin embargo, cambiar solo el ancho completo no fue suficiente y también hubo que ampliar el ancho del contenido interior.

También puedes tomar una captura de pantalla del área que necesita arreglo y decirle a Claude que ajuste el ancho.

El tercer problema fue cosmético. Las esquinas redondeadas de las imágenes no se transfirieron en nuestra prueba. Deberás configurarlas tú mismo después.

El cuarto problema fue la vista móvil, donde Claude había copiado el relleno lateral fijo de 120px del diseño sin cambiarlo.

En un teléfono de 390px de ancho, eso dejaba solo 150px de espacio para el contenido.

Un mensaje de seguimiento arregló la vista del teléfono. Pedimos que el relleno lateral y el encabezado principal se escalaran con la pantalla en lugar de mantener tamaños fijos, y funcionó.

Antes de publicar, abre el borrador en un escritorio y en tu teléfono. Si algo se ve mal, describe la solución a Claude en palabras sencillas y luego revisa ambas vistas nuevamente.

Cuando todo se vea bien, publica la página desde el editor de WordPress.

Si tu diseño tiene varias páginas o diseños complejos, es posible que necesites repetir estos pasos varias veces para que todo quede bien.

Método 2: Créalo en SeedProd

Si prefieres no entregar tu archivo de Figma a una herramienta, puedes reconstruir el diseño directamente en WordPress con SeedProd, el mejor constructor de temas y páginas de destino de WordPress del mercado.

La versión gratuita incluye el constructor de arrastrar y soltar que necesita este método, y funciona en más de 600,000 sitios.

SeedProd no tiene importación de Figma. Esto significa que recreas el diseño tú mismo y controlas cada elemento desde el principio.

Abre tu marco de Figma en un lado de tu pantalla y el constructor de SeedProd en el otro, luego arrastra bloques al lienzo para que coincidan con lo que ves.

Puedes arrastrar imágenes, encabezados, videos, botones, formularios de opción y bloques de párrafos desde la columna izquierda.

Al hacer clic en cualquier bloque que hayas agregado, se abren sus configuraciones, donde puedes igualar el tamaño de fuente, el color, la alineación y el espaciado de tu diseño.

Reconstruimos nuestra página de destino de prueba de esta manera en la versión gratuita de SeedProd, y la captura de pantalla anterior muestra el resultado.

Para el proceso completo, consulta nuestro tutorial sobre cómo crear una página de destino en WordPress.

Si tu diseño es bastante estándar, SeedProd también ofrece un constructor de sitios web con IA que puede generar un sitio web completo a partir de una breve descripción de tu negocio, lo que te da un punto de partida para igualar tu diseño de Figma.

Puedes generar hasta tres sitios de forma gratuita y descargar cada uno como un archivo de tema. Para editar el resultado dentro de WordPress, necesitas un plan SeedProd Pro.

Luego ajustas ese resultado para que coincida con tu diseño de Figma en lugar de empezar desde un lienzo vacío. Para más detalles, consulta nuestra guía sobre cómo crear un sitio web con IA.

Método 3: Usa un plugin conversor de Figma a WordPress

Si quieres permanecer en Figma y convertir tu diseño sin que la IA haga la construcción, un plugin conversor es la mejor opción.

UiChemy es el mejor plugin conversor de Figma a WordPress que hemos encontrado, y está activo en más de 8,000 sitios.

Lo que más nos gusta de UiChemy es que funciona con constructores de páginas como Elementor y Bricks, no solo con el editor de bloques. La mayoría de los plugins de Figma creados para WordPress solo generan código para el editor de bloques.

Para usarlo, instalas dos piezas: el plugin UiChemy en tu sitio de WordPress y el plugin UiChemy dentro de Figma. Necesita WordPress 6.9 o más reciente, así que verifica que tu sitio cumpla con esto antes de empezar.

En tu panel de WordPress, abre UiChemy y ve a la pestaña 'Plugin de Figma'.

En 'Constructor de páginas', elige Elementor, Gutenberg o Bricks. Luego busca 'Enlace de conexión' debajo y haz clic en 'Copiar'.

Ese enlace tiene tu inicio de sesión y una contraseña de aplicación segura incorporada. Trátalo como una contraseña y guárdalo para ti.

UiChemy tiene un plugin de Figma separado para cada constructor que soporta, uno para Elementor, uno para Gutenberg y otro para Bricks. En Figma, abre el menú 'Herramientas', busca UiChemy y ejecuta el plugin que coincida con el constructor que elegiste en WordPress. Los pasos son los mismos en los tres.

Si es la primera vez que usas UiChemy, crea una cuenta y sigue el asistente de configuración.

A continuación, elige 'Conversión rápida' y selecciona tu biblioteca de destino, como Kadence, WordPress Core o Nexter.

Estos proporcionan bloques que puedes usar para construir páginas en el editor de WordPress en lugar de constructores de páginas separados. Elige WordPress Core para la salida estándar del editor de bloques, o selecciona la biblioteca que tu sitio ya utiliza.

Luego, selecciona tu marco de Figma y haz clic en ‘Importar’.

Cuando se te pida elegir un método para exportar tu diseño a WordPress, selecciona ‘Añadir otro sitio’ en ‘Conexión del sitio’.

Pega el enlace de conexión que copiaste de tu panel de WordPress y haz clic en ‘Conectar’. Tu sitio aparecerá entonces en la lista ‘Seleccionar sitio’ cada vez que conviertas un diseño.

UiChemy ahora te muestra dos opciones de importación.

‘Importación directa’ envía todo el diseño a tu sitio de WordPress como una página borrador, mientras que ‘Copiar al portapapeles’ te permite copiar una sección a la vez y pegarla en una página existente.

El plan gratuito cubre un proyecto pequeño cómodamente, dándote 1000 créditos al mes, un asiento de Figma, un proyecto de sitio y cinco páginas por sitio.

Los planes de pago empiezan en $8 al mes facturados anualmente cuando necesites más.

UiChemy necesita que tu diseño use ‘Auto Layout’ y siga ciertas reglas para funcionar correctamente. Convertir un diseño antiguo puede significar ajustarlo primero.

Figma a WordPress Block hace una versión más limitada del mismo trabajo. Este plugin de Figma convierte un marco en código para el editor de bloques. La versión gratuita limita cuántos marcos puedes exportar, y una licencia de pago elimina ese límite.

Seleccionas tu marco, abres el menú ‘Herramientas’ de la columna izquierda y buscas el plugin. Cuando lo encuentres, haz clic en el botón ‘Ejecutar’.

Esto abrirá una ventana emergente donde puedes hacer clic en ‘Convertir a WordPress’ y copiar el resultado. Luego pégalo en el editor de bloques de cualquier página para obtener tu diseño como bloques.

Método 4: Contratar una Agencia de WordPress

Para un sitio web completo o un diseño con funcionalidad compleja, contratar a un desarrollador suele ser la mejor opción.

Figma se encarga solo del lado del diseño, lo que significa que un desarrollador tiene que construir cualquier cosa que necesite funcionar en tu sitio, como contenido dinámico, tipos de publicación personalizados o un flujo de pago.

Una buena agencia también hace que el diseño funcione en teléfonos y tabletas. Aun así, deberías revisar las páginas terminadas en tu propio teléfono antes de aprobar el trabajo.

Consulta nuestra lista de las mejores agencias de desarrollo de WordPress para encontrar una que se ajuste a tu proyecto.

Preguntas frecuentes sobre Figma a WordPress

¿Puedo convertir mi diseño de Figma en un sitio web?

Sí, puedes convertir un diseño de Figma en un sitio web funcional de WordPress, y hay cuatro maneras de hacerlo. Puedes dejar que la IA lo reconstruya por ti, recrearlo en un constructor de páginas como SeedProd, ejecutarlo a través de un plugin conversor o contratar una agencia. Las tres primeras no requieren ningún código.

¿Hay algún plugin de Figma para WordPress?

Hay varios, y UiChemy y Figma to WordPress Block son los dos a los que te dirigiríamos primero. Figma en sí no tiene exportación integrada a WordPress, por lo que siempre necesitarás una de estas herramientas o un método como el de IA anterior para mover un diseño.

¿Puede la IA convertir diseños de Figma a WordPress?

Sí, y lo probamos para esta guía usando Claude con el conector de Figma y el plugin WPVibe.

Coincidió con los colores, tamaños de fuente y espaciado de una sola lectura del diseño, pero rompió la vista del teléfono al copiar el relleno lateral fijo del diseño sin cambios.

El método 1 anterior tiene la cuenta completa, incluido el mensaje que lo solucionó.

¿Cómo convierto diseños de Figma a Elementor?

UiChemy es la herramienta para esto, ya que convierte un marco de Figma en un diseño editable de Elementor en lugar de código plano. También funciona con Bricks y el editor de bloques, por lo que no estás limitado a un solo constructor.

¿Es WordPress mejor que Figma?

Ninguno es mejor, porque hacen trabajos diferentes. Figma es donde diseñas cómo debería verse una página, y WordPress es lo que ejecuta tu sitio web y lo sirve a los visitantes.

La mayoría de los sitios usan ambos, con el diseño resuelto primero en Figma y luego construido en WordPress.

¿Afecta negativamente al SEO la conversión de Figma a WordPress?

Convertir un diseño de Figma a WordPress generalmente no dañará tu contenido ni tus enlaces entrantes.

Las herramientas de conversión automatizada a veces pueden agregar código adicional que los desarrolladores llaman "bloat", y ese código más pesado puede ralentizar tu página en comparación con un tema codificado a mano.

Recomendamos ejecutar una prueba de velocidad después de cualquier conversión para ver en qué punto te encuentras.

Esperamos que este artículo te haya ayudado a aprender cómo convertir Figma a WordPress. También puedes consultar nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress sin código.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.