El plugin de Adapty para Figma convierte los frames de tu archivo de diseño en un flow. Selecciona los frames en Figma, envíalos a Adapty y la importación crea un borrador de flow que puedes editar en el flow builder como cualquier otro.

Cómo funciona la importación

El plugin lee los frames de Figma seleccionados y los sube a Adapty, que los convierte en las pantallas de un nuevo flow en borrador. El plugin nunca modifica tu archivo de Figma, y nada sale de Figma hasta que hagas clic en Export to Adapty. El resultado se parece a tu diseño y funciona como un flow básico: los botones llevan a la siguiente pantalla, las opciones de los cuestionarios son seleccionables y el paywall está listo para que vincules tus productos.

Consulta Limitaciones de la importación para conocer los ajustes que puede que tengas que hacer manualmente.

Antes de empezar

Para importar un diseño, necesitas:

• Un archivo de diseño en Figma: El plugin solo funciona en archivos de diseño. Los tableros de FigJam y las diapositivas de Figma no son compatibles.
• Acceso de edición al archivo: El plugin no puede ejecutarse en un archivo en el que solo tienes permiso de visualización. Tus propios borradores funcionan bien.
• Una app en Adapty con privilegios de edición de flows: La importación crea el flow dentro de una de tus apps. Asegúrate de poder editar los flows dentro de la app de Adapty de destino.

1. Instala el plugin

Para instalar el plugin:

1. Abre la página del plugin Import to Adapty.
2. Haz clic en Save. El plugin estará disponible en el menú Plugins de Figma.
   

Figma actualiza los plugins publicados automáticamente, así que siempre ejecutas la versión más reciente.

2. Envía tu diseño a Adapty

Para enviar pantallas a Adapty:

1. En Figma, selecciona los frames que quieres importar. Selecciona varios a la vez para enviar una secuencia completa de pantallas.
2. Ve a Plugins > Import to Adapty.
3. Revisa la selección que muestra el plugin y haz clic en Export to Adapty.
4. Haz clic en Open in Adapty.

El plugin muestra el nombre del elemento seleccionado y el número de pantallas resultantes. Confírmalo antes de continuar.

Una vez finalizada la carga, el plugin muestra la pantalla Done. Para continuar:

1. Inicia sesión en Adapty. Si abres el enlace de importación en un navegador sin autenticar, la importación no funcionará.
2. Abre el enlace de importación en un navegador:
   • Haz clic en Open in Adapty para abrir la importación en tu navegador predeterminado
   • Haz clic en Copy link para copiar el enlace al portapapeles e iniciar la importación en un navegador o perfil diferente.

Cómo los frames se convierten en pantallas

Lo que selecciones determina cuántas pantallas obtienes:

• Varios frames: Cada frame se convierte en su propia pantalla.
• Una sección: Cada frame dentro de la sección se convierte en una pantalla.
• Un único frame: El frame completo se convierte en una sola pantalla, aunque contenga otros frames. Para importar esos frames internos como pantallas independientes, activa Split into separate screens.

Los pantallas siguen el orden de los fotogramas en el panel Layers de Figma, de abajo a arriba, no su posición en el lienzo ni el orden en que los seleccionaste. La navegación sigue el mismo orden, así que organiza los fotogramas en el panel Layers antes de exportar, o reordena las pantallas en el builder después. Selecciona fotogramas individuales o una sección en lugar de una página completa. De lo contrario, importarás también todos los demás fotogramas de esa página.

Configuración de la exportación

Para cambiar qué incluye la exportación, haz clic en Customize export:

• Export images: Incluye recursos de imagen y foto. Activado por defecto.
• Image resolution: Exporta las imágenes a 1×, 2× o 3×. Una resolución mayor aumenta la nitidez y el tamaño del archivo. 2× por defecto.
• Split into separate screens: Importa cada fotograma dentro de tu selección como su propia pantalla. Desactivado por defecto.

3. Finaliza la importación en Adapty

Open in Adapty abre una pestaña del navegador en tu Adapty Dashboard. La conversión se ejecuta en los servidores de Adapty; la pestaña muestra el progreso y crea el flow al finalizar.

1. Selecciona la app a la que pertenece este flow. La conversión comienza en cuanto eliges.
2. Mantén la pestaña abierta hasta que termine la importación (puede tardar varios minutos). Si la cierras antes de tiempo, abre el mismo enlace de nuevo para reanudarla.

Adapty convierte el diseño e informa del progreso de la importación.

El flow terminado se abre en el flow builder como borrador, con el nombre del archivo de Figma del que procede y un nombre descriptivo para cada pantalla. Adapty te indica qué partes del diseño requieren una revisión.

Limitaciones de la importación

Una importación reproduce el aspecto de tu diseño y conecta los elementos básicos: navegación, grupos seleccionables, campos de entrada y acciones de compra. Estas partes de un diseño no se importan:

• Products: La importación crea tarjetas de producto, añade acciones de compra e inserta marcadores de posición para las variables de producto. Debes vincular tus productos reales y reemplazar los marcadores tú mismo. Consulta Configurar compras.
• Typefaces: La importación no asigna ninguna fuente a tu texto. Para restaurar tu tipografía, sube el archivo de fuente y selecciónala para el texto afectado.
• Videos: Un vídeo se exporta como marcador de posición. Añade el vídeo en el constructor después.
• Hidden layers: Una capa oculta no se exporta.

Una exportación incluye como máximo 50 pantallas y 20 MB de datos de diseño. La resolución de las imágenes es el principal factor que determina ese tamaño, por lo que una exportación grande se reduce al ajustar Image resolution a 1×.

Cada exportación genera un único flow. Para importar el mismo diseño una segunda vez, vuelve a exportarlo desde Figma.

Un enlace de importación es válido durante una hora tras la exportación. Completa la importación de una sola vez o empieza de nuevo.

Resolución de problemas

Exportar errores

Mensaje	Qué hacer
Too many screens to export	Divide tu selección en lotes más pequeños de 50 pantallas o menos.
Export data is too large	Reduce la Image resolution, o disminuye el número de capas en tus pantallas.
This frame is too large to export	Exporta una sección más pequeña del diseño.
Upload didn’t complete	Tu diseño cambió mientras se subía. Vuelve a exportarlo.
This import link has expired	Un enlace de importación es válido durante una hora. Vuelve a exportar el diseño desde Figma.
This design was already imported	Esa exportación ya generó un flow. Vuelve a exportar el diseño desde Figma.

Después de una importación

Lo que ves	Causa y solución
Una pantalla se ve lavada, como si hubiera una neblina sobre ella	Se importó una imagen de fondo como un elemento normal encima del contenido. Muévela detrás del resto de la pantalla.
El panel Products está vacío y los precios muestran marcadores de posición {{figma_import_…}}	La importación no vincula productos. Añade los tuyos en el panel Products, selecciónalos en cada tarjeta de producto y acción de compra, y reemplaza los marcadores de posición.
Las pantallas están desordenadas o los botones abren la pantalla incorrecta	Las pantallas y la navegación siguen el orden de los fotogramas en el panel Layers de Figma. Reordena las pantallas en el builder y revisa la acción Navigate to screen de cada botón.
Falta una imagen y solo queda su fondo	La capa era un vídeo, estaba oculta o se construyó con una operación de forma. Reemplaza la imagen en el builder.
Dos opciones de un grupo de selección única aparecen seleccionadas a la vez	El estado no seleccionado de la opción predeterminada no tiene el estilo correcto. Cambia el estilo manualmente.
Una cuenta atrás muestra un tiempo fijo y nunca cuenta	La cuenta atrás se importó como texto. Reemplázala por un temporizador de cuenta atrás.
El control de fuente muestra Select font	El tipo de letra no está disponible en el builder. Sube el archivo de fuente y selecciónalo.

Pasos siguientes

El flow importado es un borrador, no disponible para los usuarios. Mejora el flow en el builder y sigue los pasos a continuación para publicarlo:

1. Guarda y publica el flow.
2. Previsualiza el flow en un dispositivo real.
3. Crea un placement de flow y añade el flow a él.
4. Recupera ese placement en tu app con Adapty SDK v4.0 o posterior. Las versiones anteriores del SDK no pueden renderizar flows.