¿Cómo convertir Figma a WordPress? [Formas gratuitas y de pago]

Figma es mejor conocida como herramienta de diseño y creatividad, mientras que WordPress es conocido por su flexibilidad, personalización y facilidad de uso. ¿Qué pasaría si pudieras combinar lo mejor de estas plataformas para crear un sitio web impresionante?

Sí, es posible. Puede diseñar su sitio web usando Figma y luego convertirlo a WordPress. Aunque alguna vez fue una tarea desalentadora que involucraba procesamiento HTML y temas preinstalados, ahora las cosas se han vuelto mucho más fáciles.

Si buscas lo mismo, estás en el lugar correcto.

En esta publicación, lo guiaremos sobre cómo convertir Figma a WordPress de una manera muy fácil y amigable para principiantes sin requerir ninguna experiencia técnica.

Opción 1: utilice un complemento gratuito para convertir Figma a WordPress

Aunque hay varias formas de convertir Figma a WordPress, puedes elegir el método gratuito, utilizar el complemento de conversión premium o seguir el método manual. (Tienen sus pros y sus contras)

Paso 1: En primer lugar, debes crear un diseño de Figma que luego te gustaría convertir a WordPress. Pero nunca debes olvidarte de seguir todas las mejores prácticas y principios de diseño de la industria.

Paso 2: Una vez que haya creado y diseñado con éxito la página Figma, es hora de generar su clave API. Esta clave API ayudará a recuperar la página de Figma a través del complemento e incrustarla en WordPress.

Para ello, haga clic en el icono de Figma ubicado en la parte superior izquierda de la pantalla. Se abrirán las opciones del Menú en las que deberá seleccionar Ayuda y Cuenta> Configuración de la cuenta.

Se abrirá un nuevo mensaje en el que deberá desplazarse hacia abajo hasta la sección "Tokens de acceso personal" y hacer clic en el enlace Generar nuevo token .

Además, se abrirá un nuevo mensaje en el que se le pedirá que proporcione algunos detalles básicos del token que está creando, como el nombre y la fecha de vencimiento.

Nota : en la sección Vencimiento, seleccione siempre " Sin vencimiento " para que su página Figma no desaparezca de su sitio web después de un período de tiempo específico.

Debajo de eso, configure todos los ámbitos como "Escribir" y haga clic en el botón "Generar token". Serás redirigido a la sección "Token de acceso personal" desde donde podrás copiar fácilmente el token generado y guardarlo en el Bloc de notas o en cualquier editor.

Paso 3: Ahora que ha generado y guardado con éxito el token, es hora de convertir su página Figma en WordPress.

Para comenzar con el proceso, debe instalar y activar un complemento de WordPress simple pero potente llamado “Convertidor de animación y diseño para Gutenberg Block – Complementos avanzados” en su sitio de WordPress.

Después de una instalación y activación exitosas, abra la página o publicación de su sitio de WordPress en la que desea incrustar su página Figma diseñada.

En esa página o publicación, haga clic en el botón " Importar desde Figma " en la parte superior izquierda de la pantalla.

Se abrirá un mensaje pidiéndole que proporcione el "Token de acceso Figma" que generó y guardó anteriormente. Ingrese la URL del archivo Figma.

Para obtener la URL del archivo Figma, regrese a su archivo Figma, copie la URL en la pestaña del navegador a continuación y péguela en el cuadro URL del archivo Figma.

Por lo demás, el complemento hará su trabajo y convertirá el archivo Figma en bloques de WordPress. Después de eso, puedes realizar tantas personalizaciones como quieras desde el panel de bloques.

Una vez hecho esto, haga clic en el botón "Publicar" o "Actualizar" para guardar su configuración.

Opción 2: utilice un complemento pago para convertir Figma a WordPress (más eficiente y sin complicaciones)

Para este método, utilizaremos un complemento de conversión más popular y eficiente, 'Uichemy'. Este complemento ofrece un flujo de trabajo sencillo y sin complicaciones, lo que hace que el proceso de conversión sea fluido. Es más adecuado para principiantes sin experiencia en codificación, así como para desarrolladores que desean acelerar su proceso.

Actualmente, este complemento solo puede convertir diseños de Figma en editores de sitios web Elementor y Bricks, pero la compañía ha prometido brindar soporte para bloques de Gutenberg en el futuro.

Paso 1: abra su diseño de Figma e instale el complemento Uichemy en el panel de Figma para iniciar el proceso de conversión.

• Para hacer esto, busque " UiChemy " en la barra de búsqueda y busque el complemento UiChemy.

Haga clic en el botón "Comencemos" y siga las instrucciones de instalación y activación.

• Ingrese su clave de serie para finalizar la activación. (Para obtener la clave de serie, cree una cuenta gratuita haciendo clic en el botón "Comenzar gratis". Después de crear su cuenta, encontrará su clave de licencia en el panel de su cuenta de Posimyth Store).

Paso 2: Después de una activación exitosa, seleccione el diseño o marco de Figma que desea convertir a WordPress y haga clic en el botón " Convertir a Elementor " en la ventana emergente.

(Asegúrese de haber instalado y activado el complemento Elementor en su sitio de WordPress antes del proceso de conversión y también lea todas las condiciones antes de convertir su diseño Figma).

Paso 3: Ahora puede obtener una vista previa de su diseño ingresando la URL de su sitio y la clave del token. Si no lo desea, simplemente haga clic directamente en el botón "Convertir a Elemetor". (Consulte el tutorial de UiChemy sobre "¿Qué es la vista previa en vivo?" para obtener orientación sobre cómo generar su clave token y la URL del sitio web).

Paso 3: Su diseño se convertirá y descargará el archivo JSON.

Ahora abra su panel de administración de WordPress> Vaya a Plantillas> Plantillas guardadas.

Ahora haga clic en el botón " Importar plantillas " en la parte superior de la página y cargue el archivo JSON.

Paso 4: ¡Felicitaciones! Su diseño de Figma ahora aparecerá en la sección 'Plantillas guardadas', donde podrá abrirlo y realizar más ediciones o personalización.

Paso 5: Después de completar la personalización o las ediciones, vea su diseño en la interfaz. Asegúrese de que todas las imágenes y botones estén alineados correctamente y funcionen correctamente. Además, verifique si el diseño responde en todos los tamaños de pantalla.

Opción 3: convertir Figma a WordPress manualmente (para desarrolladores)

Este método es bastante técnico, por lo que requiere un buen conocimiento del CMS de WordPress y poca paciencia, por lo que es más adecuado para quienes aman codificar.

Paso 1: El primer paso es exportar todas las piezas de diseño, como íconos e imágenes, de Figma. Para ello, abre tu Figma Design y elige lo que quieres exportar. Ahora haga clic en el botón "Exportar" y seleccione el formato y la resolución correctos.

Nota: Se recomienda encarecidamente que, al exportar imágenes, elija PNG o JPG, y para iconos y vectores, elija SVG para mantener la calidad. Además, tenga cuidado al exportar sus archivos y asegúrese de que estén en el formato correcto; de lo contrario, afectará gravemente la apariencia de su sitio web.

Paso 2: Ahora tenemos que crear un tema de WordPress personalizado para convertir todos los diseños de Figma en un sitio de WordPress. Esto se debe a que un tema de WordPress es lo que controla cómo aparece y funciona su sitio web.

Un archivo de tema típico de WordPress consta de código PHP, archivos JavaScript y archivos de hojas de estilo CSS.

• Cree una nueva carpeta en WordPress para su tema en el directorio wp-content/themes y asígnele el nombre que desee. (Puede acceder a estos archivos, ya sea a través de Cpanel, WordPress Editor o clientes FTP) O consulte nuestro blog dedicado sobre "¿Cómo instalar el tema de WordPress?"

Si eres usuario de WPOven puedes acceder al archivo de WordPress siguiendo este tutorial. "Nuevo Administrador de archivos para administrar fácilmente los archivos y carpetas de su sitio".

Ahora, agregue archivos como index.php, header.php, footer.php y funciones.php. (Deje estos archivos en blanco por ahora). Además, agregue el archivo style.css para configurar la hoja de estilos CSS de su tema en la misma carpeta.

(Este archivo style.css en particular es responsable de mostrar todos los colores, fuentes, bordes, márgenes y otros elementos visuales del sitio web).

Ahora agregue el siguiente comentario de encabezado a su archivo style.css como se indica a continuación:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Aquí, debe proporcionar el nombre del tema de su tema personalizado de WordPress y su autor. Esto ayudará a WordPress a identificar su tema personalizado.

Además, no olvide agregar una imagen para su tema de WordPress, para que pueda ser fácilmente reconocible en el directorio de WordPress, como una miniatura de YouTube.

El tamaño preferible debe ser de 800×600 píxeles y debe estar en formato PNG. Nombra cualquier cosa que elijas y agrégala a la carpeta de temas.

Paso 3: Ahora tenemos que agregar todos los recursos de Figma exportados dentro de su carpeta de temas personalizados.

Consejo: si su sitio es complejo, es mejor administrar todos sus activos en una subcarpeta específica, tal como se muestra en la siguiente imagen:

Paso 4: Para que su tema de WordPress sea completamente funcional, debe agregar HTML, CSS y JavaScript a los archivos del tema.

Veamos cómo puedes hacer esto,

Primero, debe convertir sus maquetas de Figma en código y, para ello, deberá tener una herramienta de edición de código.

Comience configurando una estructura HTML con elementos como encabezados, pies de página, barras de navegación y secciones. Agregue sus códigos a los archivos PHP (index.php, header.php y footer.php).

Ahora use CSS para diseñar sus elementos HTML. Agregue sus estilos en el archivo 'style.css', configurando colores, fuentes, tamaños y otros aspectos de diseño.

• Para un mejor peinado, puedes utilizar:
  • Preprocesadores CSS como SASS o LESS
  • Marcos como Bootstrap o Tailwind
  • Un tema inicial de WordPress
• Para diseños complejos, no necesitas poner todo tu CSS en un solo archivo, sino de una manera más organizada. Puede agregar archivos CSS separados para diferentes partes en la carpeta de activos para que le resulte más fácil administrarlos y solucionar problemas en el futuro.

Por último, para Javascript, determine los elementos que deben ser interactivos, como menús desplegables, controles deslizantes, etc.)

Considere usar jQuery para facilitar tareas como llamadas AJAX y manipulación DOM y cargue adecuadamente sus archivos CSS (hojas de estilo) y JavaScript (scripts) en su tema de WordPress usando el archivo functions.php .

Paso 5: Ahora aquí viene la parte de prueba, después de seguir con éxito todos los pasos anteriores, guarde sus archivos y verifique si todo funciona bien. Pero antes de eso, tenemos que activar el complemento.

Para activar el complemento, vaya a su panel de WordPress> Apariencia> temas . Su tema personalizado comenzará a aparecer con la imagen que cargó anteriormente en la carpeta de temas. Haga clic en él para activarlo y su sitio de WordPress estará listo para ser probado.

Estas son algunas de las sugerencias de prueba que puede seguir:

• Compruebe cómo se ve y funciona su sitio en diferentes navegadores y tamaños de pantalla.
• Utilice herramientas para optimizar sus imágenes para una carga más rápida.
• Implemente el almacenamiento en caché para acelerar su sitio.
• Haga una copia de seguridad de su sitio antes de publicarlo.

Resumen

Convertir de Figma a WordPress no es tan fácil como parece, dependiendo de la complejidad del sitio web. Cuanto más complejo sea el diseño, más complejo será el proceso a seguir. Hemos intentado abarcar todas las opciones para todo tipo de usuarios.

Hacerlo manualmente puede darle más control, pero consumirá mucho tiempo y esfuerzo. Sin embargo, puede utilizar complementos para acelerar el proceso de conversión, pero es posible que aún deba realizar ciertos cambios para obtener mejores resultados.

Depende completamente de sus preferencias y facilidad de comprensión qué método elija.

Raúl

Rahul Kumar es un entusiasta de la web y estratega de contenidos especializado en WordPress y alojamiento web. Con años de experiencia y el compromiso de mantenerse actualizado con las tendencias de la industria, crea estrategias en línea efectivas que generan tráfico, aumentan la participación y aumentan las conversiones. La atención de Rahul al detalle y su capacidad para crear contenido atractivo lo convierten en un activo valioso para cualquier marca que busque mejorar su presencia en línea.