Flowstep y Figma son herramientas complementarias, no competidoras. Flowstep te ayuda a generar y explorar ideas de interfaz de usuario con rapidez; Figma es donde refinas, colaboras y desarrollas el trabajo listo para producción. Usar ambas juntas te da lo mejor de cada una.
Cómo copiar un diseño de Flowstep a Figma
1
Selecciona una o varias pantallas en Flowstep
Haz clic en una pantalla para seleccionarla, o selecciona varias para copiarlas todas de una vez. Asegúrate de que la selección esté resaltada en el lienzo.
2
Copia la selección
Pulsa **Cmd+**⇧+C en Mac o **Ctrl+**⇧+C en Windows. Flowstep muestra “Preparing your design. Stay on the current tab.” (Preparando tu diseño. Permanece en la pestaña actual.) mientras trabaja; la copia se completa en un momento.
3
Pega en tu archivo de Figma
Cambia a Figma y abre el archivo donde quieres colocar el diseño. Pulsa Cmd+V en Mac o Ctrl+V en Windows para pegar. Las pantallas de Flowstep aparecen en tu lienzo de Figma, listas para editar.
Copiar a Figma usa el portapapeles de tu navegador, así que el navegador debe permitir a Flowstep acceder al portapapeles. Si ves un error de permisos, permite el acceso al portapapeles en la configuración del navegador e inténtalo de nuevo. Cambiar de pestaña durante la copia interrumpe la transferencia; mantén la pestaña de Flowstep enfocada hasta que termine la copia.
Importar un diseño desde Figma
También puedes hacer el recorrido inverso y traer un marco de Figma a Flowstep como pantallas editables. La importación está disponible para todos: conecta tu cuenta de Figma una vez y luego importa desde un enlace de marco.1
Conecta Figma
Conecta tu cuenta de Figma a Flowstep desde tus ajustes. Flowstep usa la autorización de Figma para leer los archivos a los que tienes acceso.
2
Copia un enlace de marco en Figma
En Figma, haz clic derecho en el marco que quieres y elige Copy link to selection (copiar enlace a la selección). También puedes copiar un enlace a una página completa para importar todos sus marcos de nivel superior a la vez.
3
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 marco en elementos editables en tu lienzo. Cada importación añade una pantalla nueva: importar el mismo marco de nuevo no reemplaza la importación anterior, así que elimina la pantalla antigua si ya no la necesitas.
Qué se importa
Flowstep recrea un marco de Figma como elementos nativos y editables, no como una imagen plana. Una importación incluye:- Marcos y sus capas anidadas
- Texto, incluido el estilo por carácter, como grosor, color y negrita
- Colores de tus variables de Figma
- Rellenos de imagen, y iconos y formas SVG
- Sombras paralelas e internas, y desenfoques de capa y de fondo
- Trazos discontinuos y punteados
La organización del archivo debe tener Figma conectado. Si un marco no se importa, Flowstep muestra un mensaje con instrucciones que te indica qué hacer a continuación: por ejemplo, volver a conectar Figma si tu autorización caducó; esperar y reintentar si Figma limita las solicitudes o responde con lentitud; o, en el caso de una plantilla de la Comunidad, duplicarla primero en tu equipo y pegar el nuevo enlace.