¿Cómo exportar Figma a WordPress?

Desde su ingreso al mercado en 2016, Figma se ha convertido en una herramienta popular para construir sitios web en WordPress, tanto con como sin código. Usando Figma, los desarrolladores pueden colaborar para diseñar el esquema de una página y exportarlo a múltiples plataformas de construcción de sitios.

Este artículo es una guía breve para convertir diseños de Figma a WordPress exportando el código desde Figma e importándolo en tu sitio de WordPress.

Hacete una copia de seguridad de tu sitio primero

No importa lo cuidadoso que seas o qué tan bien realices los pasos a continuación, tené en cuenta que WordPress y Figma no siempre funcionan a la perfección juntos. Durante el proceso de exportación e importación, tu sitio web podría experimentar problemas que afecten su rendimiento y estabilidad.

Si no lo hiciste ya, respaldá tu sitio antes de continuar. Si algo sale mal, vas a poder volver a una versión anterior y funcional e intentarlo de nuevo.

5 formas de exportar tus diseños de Figma a WordPress

1. Exportá tus archivos de diseño de Figma como archivos HTML

Puedes convertir rápidamente tus diseños de Figma a HTML, los cuales podés usar en WordPress.

Con tu archivo Figma abierto, andá a Archivo > Exportar > HTML.

Luego podés cargar el archivo resultante en tu sitio de WordPress siguiendo estos pasos:

1. Accedé a tu panel de administración y andá a Páginas en la barra lateral.
2. Navegá a una página existente o creá una nueva.
3. Hacé clic en Añadir bloque, luego agregá un bloque de Archivo.
4. Elegí o arrastrá y soltá el archivo HTML que exportaste desde Figma.

2. Exportá tus archivos de diseño de Figma usando un plugin de terceros

Existen plugins de terceros diseñados para convertir tus archivos de Figma directamente en WordPress. pxCode es probablemente el más popular, permitiéndote convertir archivos de Figma a HTML/React.js como una alternativa sin código para construir sitios web en WordPress.

Podés importar archivos de Figma a pxCode y editarlos en la plataforma. Una vez que estés satisfecho con el diseño de la página, necesitás descargar el plugin pxCode en WordPress.

Una vez hecho eso, vas a poder importar páginas directamente desde pxCode a WordPress. Una vez importadas, podés editarlas aún más sin necesidad de código.

3. Conseguí un tema de inicio y completalo con el código HTML de Figma

Los temas de inicio son temas de WordPress con diseños y opciones de diseño mínimas. Son un lienzo en blanco para los desarrolladores para diseñar temas sin tener que codificarlos desde cero.

Con tu archivo HTML de Figma exportado en mano, podés simplemente seleccionar un tema de inicio desde la biblioteca de temas de WordPress. Ahora abrí el código del tema de inicio y simplemente empezá a completar el código del archivo de Figma.

Puede ser tedioso, pero es una buena forma de revisar el código mientras lo implementás.

4. Usá constructores visuales para convertir Figma a WordPress

Los constructores visuales son plugins que te permiten editar el esquema de tu sitio web sin codificación. Son conocidos principalmente por sus funciones de arrastrar y soltar.

Incluso hay plugins, como Fignel, que integran archivos de Figma en Elementor. Te permiten construir páginas arrastrando y soltando elementos en WordPress.

5. Contratá desarrolladores o proveedores de servicios Figma a WordPress

Para aquellos con poco o ningún conocimiento o experiencia en codificación, hay proveedores de terceros que se encargan de la mayor parte del proceso por vos. Pueden ser desarrolladores tradicionales de WordPress con experiencia en el uso de Figma o agencias especializadas en conversiones de Figma a WordPress.

De cualquier manera, son desarrolladores experimentados que pueden interpretar el código generado por tus archivos de Figma e implementarlo en WordPress sin depender de herramientas externas.

Explorá agencias de WordPress que tengan experiencia o se centren en conversiones de Figma y asociate con la que mejor se adapte a tus necesidades.

¿Por qué usar Figma para construir sitios en WordPress?

Figma apareció en la escena hace unos años y rápidamente se ha convertido en un actor importante en el desarrollo colaborativo de WordPress. Las principales razones para integrar Figma en tu flujo de trabajo de desarrollo de WordPress incluyen lo siguiente:

• Soporte multiplataforma
• Colaboración basada en navegador. Figma funciona muy parecido a Google Docs: puedes ver quién está viendo el diseño y configurar permisos de edición. Solo aquellos autorizados para editar pueden hacer cambios en el diseño.
• Un excelente sistema de retroalimentación en la aplicación
• Diversas herramientas para la creación de prototipos

¿Figma y WordPress están hechos para ser compatibles?

A pesar de los muchos métodos para convertir tus diseños en páginas de WordPress, Figma y WordPress no son totalmente compatibles. Esto es evidente cuando considerás que necesitás soporte de terceros para que varios de estos métodos funcionen.

Aun así, hay formas de sortear estas limitaciones, y los desarrolladores de WordPress se benefician mucho al integrar Figma en sus flujos de trabajo.

Es probable que los problemas de compatibilidad mejoren con el tiempo, pero por ahora, hay problemas evidentes al realizar conversiones de Figma a WordPress. Esto nos lleva a nuestro último punto.

Posibles problemas al exportar diseños de Figma a WordPress

Esta sería una guía incompleta si no incluyéramos los posibles problemas que podés encontrar al convertir Figma a WordPress. Estos son los más comunes.

La página web resultante a menudo no es muy responsiva

Figma es genial para previsualizar páginas antes del despliegue, pero por ahora, no es ideal para proporcionar código. Uno de los principales problemas que esto genera es la falta de capacidad de respuesta.

No solo el código de Figma a menudo no es responsivo por sí mismo, sino que también puede causar problemas si el entorno del sitio también carece de capacidad de respuesta. Factores comunes incluyen un tema que no está codificado para ser amigable con dispositivos móviles, plugins incompatibles y medios de tamaño inadecuado.

Introducir el código de Figma en este entorno puede llevar a una mayor falta de capacidad de respuesta sin una edición extensa.

El código resultante puede no conformarse con los estándares de tu equipo

Los equipos profesionales usan convenciones de nomenclatura para asegurar que su código esté altamente estructurado y funcione bien. Nuestros equipos usan BEM y SCSS, por ejemplo.

Los archivos de exportación HTML y CSS de Figma no se conforman con estas convenciones y como resultado, no son ideales para nuestras necesidades. Otras agencias de WordPress enfrentan problemas similares al intentar integrar la salida de Figma en su código.

Si bien es útil para determinar detalles como tamaños de fuentes y distancias entre elementos, la salida de Figma tiene dificultades para funcionar bien con los estándares y convenciones existentes.

Reflexiones finales

Figma es una excelente herramienta para la colaboración en equipo y para determinar los detalles del diseño web. Hay muchos métodos para integrar el código que produce Figma en tu sitio de WordPress.

Algunos de ellos requieren código mientras que otros no. Y algunos de ellos requieren plugins de terceros o incluso equipos de desarrollo externos para concretarse.

A pesar de los muchos métodos de integración, tené en cuenta que los archivos de salida de Figma a menudo no son aptos para “copiar y pegar”. Puede ser difícil incluir el código de Figma en tu sitio sin enfrentar varios problemas.

Sin embargo, eso no debería detenerte para usarlo. Si sos consciente de sus beneficios y limitaciones, tu equipo puede hacer que las características de Figma se conviertan en una parte productiva del flujo de trabajo.