Flowstep e Figma sono strumenti complementari, non concorrenti. Flowstep ti aiuta a generare ed esplorare rapidamente idee per l’interfaccia utente; Figma è dove rifinisci, collabori e sviluppi il lavoro pronto per la produzione. Usare entrambi insieme ti offre il meglio di entrambi.
Come copiare un design di Flowstep in Figma
1
Seleziona una o più schermate in Flowstep
Fai clic su una schermata per selezionarla, oppure selezionane diverse per copiarle tutte in una volta. Assicurati che la selezione sia evidenziata nel canvas.
2
Copia la selezione
Premi **Cmd+**⇧+C su Mac oppure **Ctrl+**⇧+C su Windows. Flowstep mostra “Preparing your design. Stay on the current tab.” mentre lavora; la copia si completa in pochi istanti.
3
Incolla nel file di Figma
Passa a Figma e apri il file in cui vuoi inserire il design. Premi Cmd+V su Mac oppure Ctrl+V su Windows per incollare. Le schermate di Flowstep compaiono sul canvas di Figma, pronte per essere modificate.
La copia in Figma usa gli appunti del browser, quindi il browser deve consentire a Flowstep di accedere agli appunti. Se vedi un errore di autorizzazione, consenti l’accesso agli appunti nelle impostazioni del browser e riprova. Passare a un’altra scheda durante la copia interrompe il trasferimento; mantieni la scheda di Flowstep in primo piano finché la copia non termina.
Importa un design da Figma
Puoi anche fare il percorso inverso e portare un frame di Figma in Flowstep come schermate modificabili. L’importazione è disponibile per tutti: collega il tuo account Figma una volta, poi importa da un link a un frame.1
Collega Figma
Collega il tuo account Figma a Flowstep dalle impostazioni. Flowstep usa l’autorizzazione di Figma per leggere i file a cui hai accesso.
2
Copia il link di un frame in Figma
In Figma, fai clic con il tasto destro sul frame che ti interessa e scegli Copy link to selection (copia link alla selezione). Puoi anche copiare il link di un’intera pagina per importare in una volta sola tutti i suoi frame di primo livello.
3
Importa in Flowstep
Usa l’opzione di importazione da Figma nella barra degli strumenti di Flowstep e incolla il link. Flowstep converte il frame in elementi modificabili sul tuo canvas. Ogni importazione aggiunge una nuova schermata: importare di nuovo lo stesso frame non sostituisce l’importazione precedente, quindi elimina la vecchia schermata se non ti serve più.
Cosa viene importato
Flowstep ricrea un frame di Figma come elementi nativi e modificabili, non come immagine piatta. Un’importazione porta con sé:- Frame e i relativi livelli annidati
- Testo, incluso lo stile per singolo carattere come peso, colore e grassetto
- Colori dalle variabili di Figma
- Riempimenti immagine, icone SVG e forme
- Ombre esterne e interne, e sfocature di livello e di sfondo
- Tratti tratteggiati e punteggiati
L’organizzazione a cui appartiene il file deve avere Figma collegato. Se un frame non viene importato, Flowstep mostra un messaggio utilizzabile che ti indica cosa fare dopo: ad esempio, ricollega Figma se la tua autorizzazione è scaduta, attendi e riprova se Figma limita le richieste o risponde lentamente, oppure, per un template della Community, duplicalo nel tuo team e incolla il nuovo link.