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.
Ein Flowstep-Design in Figma kopieren
1
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.
2
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.
3
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.
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.
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.1
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.
2
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.
3
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.
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
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.