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

# Designs zwischen Flowstep und Figma verschieben

> Kopieren Sie jeden Flowstep-Frame mit Copy-and-Paste in Figma, oder importieren Sie Figma-Frames als editierbare Screens in Flowstep. Arbeiten Sie in beiden Tools ohne Wechsel.

<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 ist darauf ausgerichtet, sich in Ihren bestehenden Design-Workflow einzufügen – nicht ihn zu ersetzen. Sie können ein Design in Flowstep generieren und es sofort mit einfachem Copy-and-Paste in Figma bringen, oder gehen Sie den umgekehrten Weg und importieren Sie einen Figma-Frame in Flowstep. Das bedeutet, Sie erhalten die Geschwindigkeit der KI-gestützten Design-Generierung kombiniert mit den Präzisions- und Collaborations-Features, auf die Sie sich in Figma verlassen.

<Note>
  Flowstep und Figma sind komplementäre Tools, keine Konkurrenten. Flowstep hilft Ihnen, schnell UI-Design-Ideen zu generieren und zu erkunden; Figma ist der Ort, wo Sie verfeinern, zusammenarbeiten und produktionsreife Arbeiten aufbauen. Die Kombination beider Tools gibt Ihnen das Beste aus beiden.
</Note>

## Ein Flowstep-Design in Figma kopieren

<Steps>
  <Step title="Wählen Sie einen oder mehrere Screens in Flowstep aus">
    Klicken Sie auf einen Screen, um ihn auszuwählen – oder wählen Sie mehrere Screens aus, um sie alle auf einmal zu kopieren. Achten Sie darauf, dass die Auswahl auf der Canvas hervorgehoben ist.
  </Step>

  <Step title="Kopieren Sie die Auswahl">
    Drücken Sie \*\*Cmd+\*\*⇧+**C** auf Mac oder \*\*Ctrl+\*\*⇧+**C** unter Windows. Flowstep zeigt „Preparing your design — stay on this tab and keep the screen selected" an, während es funktioniert; das Kopieren ist in einem Moment abgeschlossen.
  </Step>

  <Step title="Fügen Sie in Ihre Figma-Datei ein">
    Wechseln Sie zu Figma und öffnen Sie die Datei, in die Sie das Design platzieren möchten. Drücken Sie **Cmd+V** auf Mac oder **Ctrl+V** unter Windows zum Einfügen. Die Flowstep-Screens erscheinen auf Ihrer Figma-Canvas und sind bereit zum Bearbeiten.
  </Step>
</Steps>

<Note>
  Das Kopieren in Figma verwendet die Zwischenablage Ihres Browsers, daher muss der Browser Flowstep-Zugriff auf die Zwischenablage erlauben – wenn Sie eine Berechtigungsmitteilung sehen, erlauben Sie den Zugriff auf die Zwischenablage in Ihren Browser-Einstellungen und versuchen Sie es erneut. Wenn Sie während des Kopierens die Registerkarten wechseln, wird die Übertragung unterbrochen; behalten Sie die Flowstep-Registerkarte im Fokus, bis das Kopieren abgeschlossen ist.
</Note>

<Tip>
  Fügen Sie den Frame auf einer eigenen Seite „AI imports" in Figma ein, um Ihre Arbeitsdateien organisiert zu halten. Von dort aus können Sie Elemente in Ihr Design-System oder in die Component Library in Ihrem eigenen Tempo verschieben.
</Tip>

## Ein Design aus Figma importieren

Sie können auch den umgekehrten Weg gehen und einen Figma-Frame als editierbare Screens in Flowstep bringen. Der Import ist für alle verfügbar – verbinden Sie Ihr Figma-Konto einmal, und importieren Sie dann über einen Frame-Link.

<Steps>
  <Step title="Verbinden Sie Figma">
    Verbinden Sie Ihr Figma-Konto mit Flowstep aus Ihren Einstellungen. Flowstep nutzt Figmas Authentifizierung, um die Dateien zu lesen, auf die Sie Zugriff haben.
  </Step>

  <Step title="Kopieren Sie einen Frame-Link in Figma">
    Klicken Sie in Figma mit der rechten Maustaste auf den Frame, den Sie importieren möchten, und wählen Sie **Copy link to selection**. Sie können auch einen Link zu einer ganzen Seite kopieren, um alle Top-Level-Frames auf einmal zu importieren.
  </Step>

  <Step title="Importieren Sie in Flowstep">
    Verwenden Sie die Figma-Import-Option in der Flowstep-Symbolleiste und fügen Sie den Link ein. Flowstep konvertiert den Frame in editierbare Elemente auf Ihrer Canvas. Das erneute Importieren desselben Frames aktualisiert ihn an Ort und Stelle.
  </Step>
</Steps>

### Was wird importiert

Flowstep erstellt einen Figma-Frame als native, editierbare Elemente neu – nicht als flaches Bild. Ein Import bringt folgende Elemente mit:

* Frames und ihre verschachtelten Layer
* Text, einschließlich zeichenweise Stilisierung wie Gewicht, Farbe und Fettdruck
* Farben aus Ihren Figma-Variablen
* Bild-Fills und SVG-Icons und -Formen
* Drop- und Inner-Shadows sowie Layer- und Background-Blurs
* Gestrichelte und gepunktete Striche

<Note>
  Die Organisation der Datei muss Figma verbunden haben. Wenn ein Frame nicht importiert wird, zeigt Flowstep eine aussagekräftige Meldung an, die Ihnen sagt, was Sie als Nächstes tun sollten – zum Beispiel Figma erneut verbinden, wenn Ihre Authentifizierung abgelaufen ist, warten und erneut versuchen, wenn Figma eine Rate-Limitierung hat oder langsam antwortet, oder bei einem Community-Template zuerst in Ihr Team duplizieren und den neuen Link einfügen.
</Note>