Aus Figma importieren

Send to Vibr ist ein Figma-Plugin. Es liest die Datei, die Sie in Figma geöffnet haben (Variablen, Stile, Komponenten, Frames und Prototyp-Links), und speichert sie als eine Datei. Vibr importiert diese Datei und baut daraus mit Ihrem Designsystem und Ihrem Modell.

Das Plugin installieren

Öffnen Sie in Figma das Menü Plugins, suchen Sie nach Send to Vibr und führen Sie es aus. Das Plugin funktioniert mit jedem Figma-Tarif, auch mit Starter.

Auswählen, was gesendet wird

Das Plugin sendet jede Ebene der Datei, die Sie wählen, von der ganzen Datei bis zu einem einzelnen Element:

• Ganze Datei: die Prototyp-Flows jeder Seite oder sonst ihre Screens, Seite für Seite. Cover-, Thumbnail- und Trennseiten werden übersprungen.
• Eine Seite ohne Auswahl: ihre Flows oder sonst alle Screens darauf.
• Eine Section: ihre Frames, jeweils als Screen.
• Ein Frame: dieser Screen.
• Ein Element: eine Komponente, eine Instanz oder eine beliebige Ebene in einem Frame. Vibr baut es für sich als wiederverwendbare Komponente.

Wählen Sie aus, was Sie möchten, oder wählen Sie oben im Plugin This page or selection oder Whole file. Das Plugin listet auf, was es senden wird. Sie können mischen: Ein Screen und zwei Elemente gehen zusammen.

Wählen Sie darunter, was mitkommt:

• Screens and elements, with layout and prototype links und Include frames they link to, damit ein Flow vollständig ankommt. Fotos darin kommen ebenfalls mit, so zugeschnitten, wie Ihr Design sie zeigt.
• Variables, text styles and shadows aus der ganzen Datei.
• Components mit ihren Varianten. Die Komponenten, die Ihre Screens verwenden, kommen zuerst.

Eine Datei enthält bis zu 12 Screens und Elemente, 12 Fotos, 80 Komponenten und 1.500 Variablen.

Die Datei speichern

Wählen Sie Save file for Vibr. Das Plugin speichert eine Datei mit der Endung .vibr-figma.json. Copy legt stattdessen dasselbe in die Zwischenablage.

In Vibr importieren

Wählen Sie im Eingabefeld + und dann Aus Figma importieren und wählen Sie die Datei. Sie können die Datei auch im Eingabefeld ablegen oder einfügen, was Copy in die Zwischenablage gelegt hat.

Der Dialog listet auf, was Vibr erstellen wird. Entfernen Sie das Häkchen bei allem, was Sie nicht möchten:

• Farbtheme aus den Variablen, zu Ihrer Bibliothek hinzugefügt.
• Typo-Skalen, eine pro Schriftfamilie, zu Ihrer Bibliothek hinzugefügt.
• Fotos aus den Frames, zu Ihrer Bibliothek hinzugefügt wie hochgeladene Bilder, damit die Screens die echten Bilder zeigen.
• Zu bauende Screens und Elemente, in der Reihenfolge, in der Ihr Flow sie besucht.

Wählen Sie Screens bauen. Vibr baut jeden Screen als eigene Anfrage mit Ihrem Designsystem und Modell, speichert ihn unter dem Namen seines Frames und macht mit dem nächsten weiter. Eine Leiste über dem Eingabefeld zeigt, bei welchem Screen es gerade ist. Stoppen beendet den Durchlauf und behält die Screens, die schon gebaut sind.

Wenn der Durchlauf endet, öffnet Vibr den ersten Screen. Wählen Sie Abspielen, um den Flow durchzuklicken. Siehe Flows.

Wenn Sie dieselbe Datei erneut importieren, verwendet Vibr das Theme und die Typo-Skalen aus dem ersten Import wieder.

Was woraus wird

In Figma	In Vibr
Farbvariablen	Ein Farbtheme. Skalen wie Brand/500 und kurze Namen wie color/clay werden zu seinen Farben; Vibr baut daraus die hellen und dunklen Rollen und prüft sie auf Kontrast.
Radius- und Abstandsvariablen, Schattenstile	Ecken, Abstandseinheit und Schatten des Themes.
Textstile	Eine Typo-Skala pro Schriftfamilie, mit Größen, Schriftstärken, Zeilenhöhen und Laufweite. Vibr lädt die Schriften von Google Fonts, wenn es sie dort gibt.
Bildfüllungen	Fotos in Ihrer Bibliothek, benannt nach ihren Ebenen (eine Ebene namens Photo: latte pour wird zu @image/latte-pour), die die Screens verwenden.
Frames	Screens. Das Modell erhält ein Bild des Frames und eine Gliederung seiner Ebenen: Auto Layout, Text, Komponenten und die Tokens, die jede Ebene verwendet.
Prototyp-Links	Links zwischen den Screens. Zurück führt zum vorherigen Screen. Ein Overlay wird in den Screen eingebaut, der es öffnet, als Dialog oder Sheet, mit eigenen Links.
Komponenten	Das Modell erfährt von Ihren Komponenten und ihren Varianten und baut mit den passenden Bausteinen Ihres Designsystems.
Ein Element	Eine für sich gebaute Komponente, zentriert auf der Seite.

Datenschutz und Sicherheit

• Das Plugin hat keinen Netzwerkzugriff. Nichts verlässt Figma außer der Datei, die Sie speichern.
• Vibr prüft die Datei, bevor es sie liest. Text kommt als reiner Text an, ohne versteckte Zeichen, und jeder Wert wird geprüft und in der Größe begrenzt. Jedes Bild muss ein echtes Bild in einer Größe sein, die Vibr öffnet, und Vibr zeichnet es neu, wodurch seine Metadaten entfernt werden. Fotos kommen mit denselben Prüfungen in Ihre Bibliothek wie ein Upload. Text durchläuft dieselbe Inhaltsprüfung wie eine getippte Anfrage.
• Nichts in der Datei wird ausgeführt. Ihr Text geht mit jeder Anfrage als Material zum Gestalten an Ihr Modell, so wie ein angehängtes Dokument. Siehe Schlüssel, Datenschutz und Speicher.

Tipps

• Benennen Sie Frames so, wie die Screens heißen sollen. Ein Frame namens Checkout wird zu @screen/checkout.
• Senden Sie bei einer großen Datei eine Seite oder eine Auswahl statt der ganzen Datei.
• Verfeinern Sie nach einem Durchlauf jeden Screen mit einer normalen Anfrage, etwa „mach den Warenkorb zu einem Bottom Sheet“.