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

# Verplaats designs tussen Flowstep en Figma

> Kopieer een willekeurig Flowstep-frame naar Figma met kopiëren en plakken, of importeer Figma-frames in Flowstep als bewerkbare schermen. Werk naadloos tussen beide gereedschappen.

<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 is ontworpen om aan te sluiten op de ontwerpworkflow die je al gebruikt — niet om deze te vervangen. Je kunt een design in Flowstep genereren en dit onmiddellijk in Figma brengen via gewoon kopiëren en plakken, of andersom: importeer een Figma-frame in Flowstep. Dit betekent dat je de snelheid van AI-ondersteunde design generatie combineert met de precisie- en samenwerkingsfuncties waar je op Figma op rekent.

<Note>
  Flowstep en Figma zijn aanvullende gereedschappen, geen concurrenten. Flowstep helpt je snel UI-ontwerpen te genereren en te onderzoeken; Figma is waar je verfijnt, samenwerkt en productiegerede werk opbouwt. Het gebruik van beide samen geeft je het beste van beide.
</Note>

## Een Flowstep-design naar Figma kopiëren

<Steps>
  <Step title="Selecteer één of meer schermen in Flowstep">
    Klik op een scherm om het te selecteren — of selecteer meerdere schermen om ze allemaal in één keer te kopiëren. Zorg ervoor dat de selectie is gemarkeerd op het canvas.
  </Step>

  <Step title="Kopieer de selectie">
    Druk op \*\*Cmd+\*\*⇧+**C** op Mac of \*\*Ctrl+\*\*⇧+**C** op Windows. Flowstep toont "Preparing your design — stay on this tab and keep the screen selected" terwijl dit gebeurt; het kopiëren is in een moment klaar.
  </Step>

  <Step title="Plak in je Figma-bestand">
    Schakel naar Figma en open het bestand waar je het design wilt plaatsen. Druk op **Cmd+V** op Mac of **Ctrl+V** op Windows om in te plakken. De Flowstep-schermen verschijnen op je Figma-canvas, klaar om te bewerken.
  </Step>
</Steps>

<Note>
  Kopiëren naar Figma maakt gebruik van het clipboard van je browser, dus de browser moet Flowstep clipboard-toegang toestaan — als je een machtigingsfout ziet, sta je clipboard-toegang toe in je browserinstellingen en probeer het opnieuw. Als je tabbladen wisselt terwijl je aan het kopiëren bent, wordt de overdracht onderbroken; houd het Flowstep-tabblad gefocust totdat het kopiëren is voltooid.
</Note>

<Tip>
  Plak het frame op een speciale "AI-imports"-pagina in Figma om je werkbestanden georganiseerd te houden. Van daar kun je elementen op je eigen tempo in je designsysteem of componentbibliotheek verplaatsen.
</Tip>

## Een design vanuit Figma importeren

Je kunt ook andersom en een Figma-frame in Flowstep brengen als bewerkbare schermen. Importeren is beschikbaar voor iedereen — verbind je Figma-account eenmaal, importeer vervolgens via een framelink.

<Steps>
  <Step title="Verbind Figma">
    Verbind je Figma-account met Flowstep vanuit je instellingen. Flowstep gebruikt Figma's autorisatie om de bestanden waartoe je toegang hebt in te lezen.
  </Step>

  <Step title="Kopieer een framelink in Figma">
    Klik in Figma met de rechtermuisknop op het frame dat je wilt importeren en kies **Copy link to selection**. Je kunt ook een link naar een hele pagina kopiëren om al de frames op het hoogste niveau in één keer te importeren.
  </Step>

  <Step title="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. Het opnieuw importeren van hetzelfde frame werkt het in plaats ervan bij.
  </Step>
</Steps>

### Wat wordt geïmporteerd

Flowstep maakt een Figma-frame opnieuw als native, bewerkbare elementen — geen platte afbeelding. Een import brengt het volgende mee:

* Frames en hun geneste lagen
* Tekst, inclusief per-teken styling zoals gewicht, kleur en vet
* Kleuren uit je Figma-variabelen
* Afbeeldingsvullingen en SVG-pictogrammen en vormen
* Drukshaduw en binnenschaduw, en laag- en achtergrondvagen
* Gestippelde en puntgestippelde streken

<Note>
  De organisatie van het bestand moet Figma hebben verbonden. Als een frame niet wil importeren, toont Flowstep een bruikbaar bericht dat aangeeft wat je vervolgens moet doen — bijvoorbeeld Figma opnieuw verbinden als je autorisatie is verlopen, wachten en opnieuw proberen als Figma snelheidsbeperking toepast of traag reageert, of, voor een Community-sjabloon, dit eerst naar je team dupliceren en de nieuwe link plakken.
</Note>