> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Traslada diseños entre Flowstep y Figma

> Copia cualquier frame de Flowstep a Figma con copiar y pegar, o importa frames de Figma a Flowstep como pantallas editables. Trabaja en ambas herramientas sin cambiar entre ellas.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep está diseñado para adaptarse al flujo de trabajo de diseño que ya usas — no para reemplazarlo. Puedes generar un diseño en Flowstep e inmediatamente llevarlo a Figma usando un simple copiar y pegar, o hazlo al revés e importa un frame de Figma a Flowstep. Esto significa que obtienes la velocidad de la generación de diseño asistida por IA combinada con las funciones de precisión y colaboración en las que confías en Figma.

<Note>
  Flowstep y Figma son herramientas complementarias, no competidoras. Flowstep te ayuda a generar y explorar rápidamente ideas de diseño de interfaz; Figma es donde refinas, colaboras y construyes trabajo listo para producción. Usar ambas juntas te da lo mejor de ambas.
</Note>

## Cómo copiar un diseño de Flowstep a Figma

<Steps>
  <Step title="Selecciona una o más pantallas en Flowstep">
    Haz clic en una pantalla para seleccionarla — o selecciona varias pantallas para copiarlas todas a la vez. Asegúrate de que la selección esté resaltada en el lienzo.
  </Step>

  <Step title="Copia la selección">
    Presiona \*\*Cmd+\*\*⇧+**C** en Mac o \*\*Ctrl+\*\*⇧+**C** en Windows. Flowstep muestra "Preparing your design — stay on this tab and keep the screen selected" mientras funciona; la copia se completa en un momento.
  </Step>

  <Step title="Pega en tu archivo de Figma">
    Cambia a Figma y abre el archivo donde quieras colocar el diseño. Presiona **Cmd+V** en Mac o **Ctrl+V** en Windows para pegar. Las pantallas de Flowstep aparecen en tu lienzo de Figma, listas para editar.
  </Step>
</Steps>

<Note>
  Copiar a Figma usa el portapapeles de tu navegador, por lo que el navegador debe permitir el acceso al portapapeles de Flowstep — si ves un error de permiso, permite el acceso al portapapeles en la configuración de tu navegador e intenta de nuevo. Cambiar de pestaña a mitad de la copia interrumpe la transferencia; mantén la pestaña de Flowstep enfocada hasta que se complete la copia.
</Note>

<Tip>
  Pega el frame en una página dedicada "AI imports" en Figma para mantener tus archivos de trabajo organizados. Desde allí, puedes mover elementos a tu sistema de diseño principal o biblioteca de componentes a tu propio ritmo.
</Tip>

## Importa un diseño desde Figma

También puedes hacer lo contrario y traer un frame de Figma a Flowstep como pantallas editables. La importación está disponible para todos — conecta tu cuenta de Figma una sola vez, luego importa desde un enlace de frame.

<Steps>
  <Step title="Conecta Figma">
    Conecta tu cuenta de Figma a Flowstep desde tu configuración. Flowstep usa la autorización de Figma para leer los archivos a los que tienes acceso.
  </Step>

  <Step title="Copia un enlace de frame en Figma">
    En Figma, haz clic derecho en el frame que deseas y elige **Copy link to selection**. También puedes copiar un enlace a una página completa para importar todos sus frames de nivel superior a la vez.
  </Step>

  <Step title="Importa a Flowstep">
    Usa la opción de importación de Figma en la barra de herramientas de Flowstep y pega el enlace. Flowstep convierte el frame en elementos editables en tu lienzo. Reimportar el mismo frame lo actualiza en su lugar.
  </Step>
</Steps>

### Lo que se importa

Flowstep recrea un frame de Figma como elementos nativos y editables — no como una imagen plana. Una importación trae:

* Frames y sus capas anidadas
* Texto, incluyendo estilos por carácter como peso, color y negrita
* Colores de tus variables de Figma
* Rellenos de imagen e iconos SVG y formas
* Sombras interiores y exteriores, y desenfoque de capas y fondos
* Trazos punteados y discontinuos

<Note>
  La organización del archivo debe tener Figma conectado. Si un frame no se importa, Flowstep muestra un mensaje accionable que te dice qué hacer a continuación — por ejemplo, reconecta Figma si tu autorización ha expirado, espera e intenta de nuevo si Figma está limitando la velocidad o responde lentamente, o, para una plantilla de Community, duplícala en tu equipo primero y pega el nuevo enlace.
</Note>