Editor de Wix Studio: exportar diseños desde Figma
10 min
En este artículo
- Paso 1 | Prepara la exportación
- a | Sube fuentes personalizadas a Wix Studio
- b | Compara el ancho del marco con el tamaño de edición
- Paso 2 | Instala el complemento
- a | Instala el complemento en Figma
- b | Abre la herramienta en el sitio de tu cliente
- Paso 3 | Elige qué exportar de Figma
- Paso 4 | Completa la importación en el editor
- Preguntas frecuentes
- Solución de problemas
¿Estás usando Figma para diseñar secciones y elementos? El complemento de Wix Studio te permite en un solo proceso simplificado convertir tus diseños estáticos en un sitio online adaptativo. Puedes importar marcos completos de Figma, componentes y secciones específicos, o usar nuestros wireframes (kits de IU).
Una vez en Wix Studio, puedes mejorar tus diseños con animaciones sin código, CSS personalizado, conexión a soluciones comerciales como Wix Stores y mucho más.
- Recomendamos mantener Figma y el Editor de Wix Studio abiertos, en pestañas separadas del navegador, ya que necesitarás ambos para realizar este proceso.
- ¿Estás en medio del proceso y necesitas ayuda? Consulta nuestras preguntas frecuentes y la información para la solución de problemas a continuación.
Paso 1 | Prepara la exportación
Antes de intentar importar diseños de Figma, te recomendamos verificar algunas cosas. Esto garantizará una transición fluida de Figma a Wix Studio.
a | Sube fuentes personalizadas a Wix Studio
Asegúrate de que todas las fuentes que estás usando en Figma también estén disponibles en tu cuenta de Wix. Conviene subir las fuentes a Wix con antelación; de lo contrario, las fuentes del sistema reemplazarán a las fuentes que pretendías mostrar.
b | Compara el ancho del marco con el tamaño de edición
El ancho del marco de Figma debe coincidir con el tamaño de edición de la página correspondiente en el sitio de tu cliente. Si hay una discrepancia, tu diseño no se exportará en la misma proporción, lo que significa que no aparecerá en las proporciones correctas en Wix Studio.
¿Estás exportando elementos?
Aun así, debes verificar el ancho del marco que los contiene para garantizar un resultado 1:1.
Paso 2 | Instala el complemento
Si aún no lo has hecho, instala el complemento de Wix Studio desde el archivo que deseas exportar. Una vez instalado, puedes acceder fácilmente al complemento desde cualquier otro diseño en tu cuenta.
A continuación, abre el panel de complementos desde el Editor de Wix Studio.
a | Instala el complemento en Figma
- Abre el archivo que deseas exportar en tu cuenta de Figma.
- Pulsa Ctrl + K en tu teclado (Cmd + K en Mac).
- Haz clic en la pestaña Complementos y widgets.
- Busca "Wix Studio" y selecciona Figma a Wix Studio en los resultados.
- Selecciona Ejecutar.
- Inicia sesión en tu cuenta de Wix en el complemento.
b | Abre la herramienta en el sitio de tu cliente
- Ve al sitio de tu cliente en el editor.
- Haz clic en el icono de Wix Studio
en la parte superior izquierda. - Pasa el cursor sobre Herramientas.
- Haz clic en Importar desde Figma.
Consejo: Esto agrega un nuevo icono
a la izquierda del editor.
Paso 3 | Elige qué exportar de Figma
Después de instalar el complemento, vuelve al archivo en tu cuenta de Figma. El complemento te permite elegir qué exportar: un marco o los estilos.
Recomendamos exportar primero los estilos (es decir, la tipografía y los colores), de modo que ya estén configurados en el Editor de Wix Studio en el momento en que comiences a exportar los marcos.
¿Qué elementos reconoce automáticamente el complemento?
Para exportar desde Figma:
- (Si aún no está abierto) Abre el archivo Figma correspondiente.
- Accede al complemento de Wix Studio:
- Haz clic en el icono de Figma
para abrir el menú principal. - Pasa el cursor sobre Pluggins (Complementos) y haz clic en Figma to Wix Studio (De Figma a Wix Studio).
- Haz clic en el icono de Figma
- Haz clic en Set up Export (Configurar exportación).
- Haz clic en Siguiente.
- Verifica que el tamaño de edición en Wix Studio coincida con el ancho del marco de Figma. Cuando lo tengas todo listo, haz clic en Start Export (Iniciar exportación).
- Elige qué exportar y sigue los pasos:
Estilos
Frame
Paso 4 | Completa la importación en el editor
Una vez que finalice la exportación en Figma, vuelve al editor y asegúrate de que no falten fuentes o que no haya diferencias de tamaño.
¿Estás trabajando con un marco? Puedes elegir si deseas importarlo como contenedor, sección, etc.
Para completar la importación:
- Ve al sitio de tu cliente en el editor.
- (Si aún no está abierto) Haz clic en el icono Importar desde Figma a la izquierda.
- Dependiendo de si ya has importado desde Figma a la cuenta de Wix actual, actualiza el panel:
- Primera importación: haz clic en Actualizar.
- Has importado anteriormente: haz clic en el icono Actualizar importación
.
- Según lo que estés importando, sigue los pasos a continuación:
Estilos
Frame
Preguntas frecuentes
Haz clic en una de las siguientes preguntas para obtener más información sobre cómo importar diseños de Figma.
¿Puedo importar diseños de Figma a un sitio existente?
¿Puedo importar varias páginas a la vez?
¿Se conectan automáticamente los diseños de Figma a las apps de Wix (por ejemplo, Wix Stores)?
¿Qué sucede al importar menús, formularios y botones? ¿Funcionarán en el sitio de mi cliente?
¿Cómo se verá el diseño importado en los distintos breakpoints?
Si realizo más cambios en el diseño de mi Figma después de importarlo a Wix Studio, ¿se sincronizarán automáticamente?
¿Puedo exportar diseños en la dirección contraria, de Wix Studio a Figma?
Solución de problemas
¿Tienes problemas al exportar los diseños de Figma a Wix Studio? Haz clic en uno de los siguientes problemas para saber qué lo causó y cómo resolverlo.
Antes de intentar solucionar el problema:
Si no puedes exportar tu diseño, te recomendamos verificar si has alcanzado el límite de tasas en tu cuenta de Figma.
(En Figma) No aparecen estilos en el panel al intentar exportar
(En el editor) No se ve la opción para agregar un frame como página o sección
(En el editor) El diseño no se ve proporcionado después de importarlo
¿Todavía necesitas ayuda?
¿Qué información debo incluir si necesito solicitar ayuda?