Hoppa till huvudinnehåll
Screenshot 2026 05 06 At 14 19 04
Flowstep är byggt för att passa in i den designprocess du redan använder — inte för att ersätta den. Du kan generera en design i Flowstep och direkt föra över den till Figma med ett enkelt kopiera och klistra in, eller göra tvärtom och importera en Figma-ram till Flowstep. Då får du snabbheten i AI-assisterad designgenerering kombinerad med den precision och de samarbetsfunktioner du använder i Figma.
Flowstep och Figma är kompletterande verktyg, inte konkurrenter. Flowstep hjälper dig att snabbt generera och utforska UI-designidéer. Figma är där du förfinar, samarbetar och utvecklar färdigt arbete. Om du använder båda får du det bästa av dem.

Så kopierar du en Flowstep-design till Figma

1

Välj en eller flera skärmar i Flowstep

Klicka på en skärm för att välja den, eller markera flera skärmar för att kopiera alla på en gång. Kontrollera att markeringen är framhävd på canvas.
2

Kopiera markeringen

Tryck på **Cmd+**⇧+C på Mac eller **Ctrl+**⇧+C på Windows. Flowstep visar “Preparing your design. Stay on the current tab.” medan den arbetar. Kopieringen är klar inom kort.
3

Klistra in i din Figma-fil

Byt till Figma och öppna filen där du vill placera designen. Tryck på Cmd+V på Mac eller Ctrl+V på Windows för att klistra in. Flowstep-skärmarna visas på ditt Figma-canvas, redo att redigeras.
Kopiering till Figma använder webbläsarens urklipp, så webbläsaren måste tillåta att Flowstep får åtkomst till urklippet. Om du ser ett behörighetsfel tillåter du urklippsåtkomst i webbläsarens inställningar och försöker igen. Om du byter flik under kopieringen avbryts överföringen. Håll Flowstep-fliken aktiv tills kopieringen är klar.
Klistra in ramen på en dedikerad sida som heter “AI imports” i Figma för att hålla dina arbetsfiler ordnade. Därifrån kan du flytta element till ditt designsystem eller komponentbibliotek i din egen takt.

Importera en design från Figma

Du kan också gå åt andra hållet och föra in en Figma-ram i Flowstep som redigerbara skärmar. Import är tillgänglig för alla. Anslut ditt Figma-konto en gång och importera sedan från en ramlänk.
1

Anslut Figma

Anslut ditt Figma-konto till Flowstep från dina inställningar. Flowstep använder Figmas auktorisering för att läsa de filer du har åtkomst till.
2

Kopiera en ramlänk i Figma

I Figma högerklickar du på ramen du vill ha och väljer Copy link to selection. Du kan också kopiera en länk till en hel sida för att importera alla dess ramar på översta nivån på en gång.
3

Importera till Flowstep

Använd alternativet för Figma-import i Flowsteps verktygsfält och klistra in länken. Flowstep konverterar ramen till redigerbara element på ditt canvas. Varje import lägger till en ny skärm. Om du importerar samma ram igen ersätts inte den tidigare importen, så ta bort den gamla skärmen om du inte längre behöver den.

Vad som importeras

Flowstep återskapar en Figma-ram som inbyggda, redigerbara element, inte som en platt bild. En import tar med:
  • Ramar och deras kapslade lager
  • Text, inklusive styling per tecken som vikt, färg och fetstil
  • Färger från dina Figma-variabler
  • Bildfyllningar samt SVG-ikoner och former
  • Drop- och inre skuggor samt lager- och bakgrundsoskärpa
  • Streckade och prickade linjer
Filens organisation måste ha Figma anslutet. Om en ram inte går att importera visar Flowstep ett meddelande med nästa steg. Det kan till exempel vara att ansluta Figma igen om din auktorisering har gått ut, eller att vänta och försöka igen om Figma begränsar antalet anrop eller svarar långsamt. För en Community-mall duplicerar du den till ditt team först och klistrar sedan in den nya länken.