> ## 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.

# Flytta designs mellan Flowstep och Figma

> Kopiera vilken Flowstep-ram som helst till Figma med kopiera-klistra in, eller importera Figma-ramar till Flowstep som redigerbara skärmar. Arbeta mellan båda verktygen utan att växla mellan dem.

<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 är utformad för att passa in i det designarbetsflöde du redan använder — inte för att ersätta det. Du kan generera en design i Flowstep och omedelbar föra in den i Figma med en enkel kopiera-klistra in, eller gå åt andra hållet och importera en Figma-ram till Flowstep. Det betyder att du får hastigheten av AI-assisterad designgenerering kombinerad med precision och samarbetsfunktioner som du förlitar dig på i Figma.

<Note>
  Flowstep och Figma är kompletterande verktyg, inte konkurrenter. Flowstep hjälper dig att snabbt generera och utforska idéer om UI-design; Figma är där du förfinar, samarbetar och bygger produktionsklar arbete. Att använda båda tillsammans ger dig det bästa av båda världarna.
</Note>

## Så kopierar du en Flowstep-design till Figma

<Steps>
  <Step title="Markera en eller flera skärmar i Flowstep">
    Klicka på en skärm för att markera den — eller markera flera skärmar för att kopiera dem alla på en gång. Se till att markeringen är framhävd på arbetsytan.
  </Step>

  <Step title="Kopiera markeringen">
    Tryck på \*\*Cmd+\*\*⇧+**C** på Mac eller \*\*Ctrl+\*\*⇧+**C** på Windows. Flowstep visar "Preparing your design — stay on this tab and keep the screen selected" medan det fungerar; kopieringen slutförts på ett ögonblick.
  </Step>

  <Step title="Klistra in i Figma-filen">
    Växla 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å Figma-arbetsytan och är klara att redigera.
  </Step>
</Steps>

<Note>
  Kopiering till Figma använder webbläsarens urklipp, så webbläsaren måste tillåta Flowstep-åtkomst till urklipp — om du ser ett åtkomstfel tillåter du åtkomst till urklipp i dina webbläsarinställningar och försöker igen. Om du växlar flik under kopieringen avbryts överföringen; håll Flowstep-fliken fokuserad tills kopieringen är klar.
</Note>

<Tip>
  Klistra in ramen på en dedikerad sida "AI imports" i Figma för att hålla arbetsfiler organiserade. Därifrån kan du flytta element till ditt designsystem eller komponentbibliotek i din egen takt.
</Tip>

## Importera en design från Figma

Du kan också gå åt andra hållet och föra en Figma-ram till Flowstep som redigerbara skärmar. Importen är tillgänglig för alla — anslut Figma-kontot en gång, och sedan importerar du från en ramlänk.

<Steps>
  <Step title="Anslut Figma">
    Anslut Figma-kontot till Flowstep från dina inställningar. Flowstep använder Figmas auktorisering för att läsa filerna du har åtkomst till.
  </Step>

  <Step title="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 översta ramar på en gång.
  </Step>

  <Step title="Importera till Flowstep">
    Använd Figma-importalternativet i Flowstep-verktygsfältet och klistra in länken. Flowstep konverterar ramen till redigerbara element på arbetsytan. Omimportering av samma ram uppdaterar det på plats.
  </Step>
</Steps>

### Vad som importeras

Flowstep återskapar en Figma-ram som inbyggda, redigerbara element — inte en platt bild. En import innehåller:

* Ramar och deras kapslade lager
* Text, inklusive formatering per tecken som vikt, färg och fet
* Färger från Figma-variabler
* Bilder och SVG-ikoner och former
* Släpp och inre skuggor och lager och bakgrundsoskärpa
* Streckade och prickade linjer

<Note>
  Organisationen måste ha Figma anslutet. Om en ram inte importeras visar Flowstep ett användbart meddelande som berättar vad du ska göra nästa — till exempel återansluta Figma om din auktorisering har upphört att gälla, vänta och försöka igen om Figma är hastighetsbegränsad eller långsam att svara, eller för en Community-mall dubblera den till ditt team först och klistra in den nya länken.
</Note>