Importar desde Figma

La importación funciona en sentido contrario a la exportación: un frame de Figma existente se convierte en una pantalla editable de UXMagic sobre la que después puedes iterar con IA.

Pasos#

1. Conecta Figma desde Integraciones (una conexión OAuth: autorizas UXMagic una sola vez).
2. Pega la URL del frame de Figma, o elige el archivo y el frame en el selector.
3. Elige si quieres importar los estilos propios del frame como tema de tu proyecto, o mapearlo sobre el tema que ya tienes.
4. Importa.

Qué se traslada#

• Maquetación y jerarquía, incluida la estructura de auto layout.
• Texto, con sus estilos tipográficos.
• Colores y efectos, incluidos degradados y sombras.
• Imágenes, copiadas a los recursos de tu proyecto.
• Vectores e iconos, reconstruidos como marcado.

Qué esperar#

Figma es un lienzo vectorial y la web es un modelo de cajas, así que la importación es una traducción fiel, no una copia idéntica byte a byte. Espera una estructura y un espaciado muy próximos, con pequeñas diferencias en el renderizado del texto y en efectos que no tienen equivalente directo en la web.

Las importaciones son más precisas cuando el frame de Figma usa auto layout. Las maquetaciones libres con posicionamiento absoluto se importan, pero con menos fidelidad estructural.

Copiar bien la URL#

Selecciona el frame en Figma y después haz clic derecho → Copiar enlace a la selección. Un enlace al archivo sin un nodo seleccionado importa lo que no es, o nada.

Después de importar#

La pantalla importada se comporta como cualquier otra: ediciones por chat, modo edición, temas, versiones, exportación. Esta es la vía más rápida para «ya tenemos diseños, pero ahora queremos ir más deprisa».

Sistemas de diseño y bibliotecas de componentes#

También puedes importar una biblioteca de componentes o un sistema de diseño para que las pantallas generadas usen tus componentes. Consulta Bibliotecas de componentes.