Flowstep und Figma ergänzen sich, sie sind keine Konkurrenten. Flowstep hilft Ihnen, UI-Design-Ideen schnell zu erzeugen und zu erkunden. Figma ist der Ort, an dem Sie Ergebnisse verfeinern, im Team zusammenarbeiten und produktionsreife Arbeit ausarbeiten. Mit beiden Tools nutzen Sie die Stärken beider Welten.
So kopieren Sie ein Flowstep-Design nach Figma
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 in einem Schritt zu kopieren. Achten Sie darauf, dass die Auswahl auf der Canvas hervorgehoben ist.
2
Kopieren Sie die Auswahl
Drücken Sie **Cmd+**⇧+C auf dem Mac oder **Ctrl+**⇧+C unter Windows. Flowstep zeigt während des Vorgangs die Meldung „Preparing your design. Stay on the current tab.“ an (sinngemäß: Ihr Design wird vorbereitet. Bleiben Sie auf dem aktuellen Tab). Der Kopiervorgang ist gleich abgeschlossen.
3
Fügen Sie in Ihre Figma-Datei ein
Wechseln Sie zu Figma und öffnen Sie die Datei, in die Sie das Design einfügen möchten. Drücken Sie Cmd+V auf dem Mac oder Ctrl+V unter Windows, um einzufügen. Die Flowstep-Screens erscheinen auf Ihrer Figma-Canvas und sind direkt bearbeitbar.
Das Kopieren nach Figma nutzt die Zwischenablage Ihres Browsers. Der Browser muss Flowstep den Zugriff darauf erlauben. Wenn ein Berechtigungsfehler erscheint, erlauben Sie den Zugriff auf die Zwischenablage in den Browser-Einstellungen und versuchen Sie es erneut. Wenn Sie während des Kopierens den Tab wechseln, wird die Übertragung unterbrochen. Lassen Sie den Flowstep-Tab bis zum Abschluss des Kopierens im Vordergrund.
Ein Design aus Figma importieren
Sie können auch den umgekehrten Weg gehen und einen Figma-Frame als bearbeitbare Screens in Flowstep importieren. Der Import steht allen zur Verfügung. Verbinden Sie Ihr Figma-Konto einmal und importieren Sie dann über einen Frame-Link.1
Mit Figma verbinden
Verbinden Sie Ihr Figma-Konto in den Einstellungen mit Flowstep. Flowstep nutzt die Autorisierung von Figma, 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 gewünschten Frame und wählen Sie Copy link to selection. Sie können auch einen Link zu einer ganzen Seite kopieren, um alle obersten Frames dieser Seite auf einmal zu importieren.
3
In Flowstep importieren
Verwenden Sie die Option für den Figma-Import in der Flowstep-Werkzeugleiste und fügen Sie den Link ein. Flowstep wandelt den Frame in bearbeitbare Elemente auf Ihrer Canvas um. Jeder Import erstellt einen neuen Screen. Wenn Sie denselben Frame erneut importieren, ersetzt das den früheren Import nicht. Löschen Sie den alten Screen, wenn Sie ihn nicht mehr brauchen.
Was importiert wird
Flowstep baut einen Figma-Frame als native, bearbeitbare Elemente nach, nicht als flaches Bild. Ein Import übernimmt:- Frames und ihre verschachtelten Ebenen
- Text, einschließlich Formatierung einzelner Zeichen wie Schriftstärke, Farbe und Fettdruck
- Farben aus Ihren Figma-Variablen
- Bildfüllungen sowie SVG-Icons und Formen
- Innere und äußere Schlagschatten sowie Unschärfe bei Ebenen und Hintergründen
- Gestrichelte und gepunktete Striche
Die Organisation, zu der die Datei gehört, muss Figma verbunden haben. Wenn ein Frame nicht importiert werden kann, zeigt Flowstep eine Meldung mit den nächsten Schritten an. Zum Beispiel: Verbinden Sie Figma erneut, wenn Ihre Autorisierung abgelaufen ist. Warten Sie und versuchen Sie es erneut, wenn Figma Anfragen drosselt oder langsam antwortet. Bei einer Community-Vorlage duplizieren Sie diese zuerst in Ihr Team und fügen dann den neuen Link ein.