Flowstep en Figma vullen elkaar aan en zijn geen concurrenten. Met Flowstep genereer en verken je snel UI-ontwerpideeën; in Figma verfijn je je werk, werk je samen en bouw je het uit tot productieklaar werk. Door beide tools samen te gebruiken, haal je het beste uit beide.
Een Flowstep-ontwerp naar Figma kopiëren
1
Selecteer een of meer schermen in Flowstep
Klik op een scherm om het te selecteren, of selecteer meerdere schermen om ze in één keer te kopiëren. Zorg dat de selectie in het canvas is gemarkeerd.
2
Kopieer de selectie
Druk op **Cmd+**⇧+C op Mac of **Ctrl+**⇧+C op Windows. Flowstep toont “Preparing your design. Stay on the current tab.” (Je ontwerp wordt voorbereid. Blijf op het huidige tabblad.) terwijl het bezig is. Het kopiëren is na een moment klaar.
3
Plak in je Figma-bestand
Schakel over naar Figma en open het bestand waar je het ontwerp wilt plaatsen. Druk op Cmd+V op Mac of Ctrl+V op Windows om te plakken. De Flowstep-schermen verschijnen op je Figma-canvas, klaar om te bewerken.
Voor het kopiëren naar Figma gebruikt Flowstep het klembord van je browser. Je browser moet Flowstep daarom toegang tot het klembord geven. Zie je een toestemmingsfout? Sta klembordtoegang toe in je browserinstellingen en probeer het opnieuw. Als je tijdens het kopiëren van tabblad wisselt, wordt de overdracht onderbroken. Houd het Flowstep-tabblad daarom actief tot het kopiëren klaar is.
Een ontwerp uit Figma importeren
Je kunt ook de andere kant op gaan en een Figma-frame importeren als bewerkbare schermen in Flowstep. Importeren is voor iedereen beschikbaar. Koppel je Figma-account één keer en importeer daarna vanuit een framelink.1
Verbind Figma
Verbind je Figma-account met Flowstep via je instellingen. Flowstep gebruikt de autorisatie van Figma om de bestanden te lezen waar je toegang toe hebt.
2
Kopieer een framelink in Figma
Klik in Figma met de rechtermuisknop op het frame dat je wilt en kies Copy link to selection. Je kunt ook een link naar een hele pagina kopiëren om alle frames op het hoogste niveau van die pagina in één keer te importeren.
3
Importeer in Flowstep
Gebruik de Figma-importoptie in de Flowstep-werkbalk en plak de link. Flowstep zet het frame om in bewerkbare elementen op je canvas. Elke import voegt een nieuw scherm toe. Als je hetzelfde frame opnieuw importeert, vervangt dat de eerdere import niet. Verwijder het oude scherm dus als je het niet meer nodig hebt.
Wat wordt geïmporteerd
Flowstep maakt een Figma-frame opnieuw aan als native, bewerkbare elementen en niet als platte afbeelding. Een import neemt het volgende mee:- Frames en hun geneste lagen
- Tekst, inclusief opmaak per teken, zoals gewicht, kleur en vet
- Kleuren uit je Figma-variabelen
- Afbeeldingsvullingen, en SVG-iconen en -vormen
- Schaduwen (buiten en binnen), en laag- en achtergrondvervaging
- Gestreepte en gestippelde lijnen
De organisatie van het bestand moet Figma gekoppeld hebben. Als een frame niet wordt geïmporteerd, toont Flowstep een melding met een concrete vervolgstap. Je kunt bijvoorbeeld Figma opnieuw verbinden als je autorisatie is verlopen, even wachten en opnieuw proberen als Figma het aantal verzoeken beperkt of traag reageert, of bij een Community-sjabloon het sjabloon eerst naar je team dupliceren en daarna de nieuwe link plakken.