Importieren Sie einen Figma-Frame mit Page Builder Sandwich in WordPress

Page Builder Sandwich Pro verwandelt einen Figma-Frame in eine bearbeitbare WordPress-Seite. Die Website kommuniziert über Ihr eigenes Figma-Konto mit Figma und verwendet dabei ein von Ihnen erstelltes persönliches Zugriffstoken; kein Design und kein Token wird über Zinn Digital® übertragen.

Figma verbinden (einmalig, als Administrator)

1. Öffnen Sie in Figma Settings → Security → Personal access tokens und generieren Sie ein Token mit dem Bereich File content: read.
2. Gehen Sie in wp-admin zu Page Builder Sandwich → Import from other builders and Figma → Import from Figma, fügen Sie das Token ein und klicken Sie auf Connect Figma.

Das Token wird mit Figma überprüft, verschlüsselt gespeichert und nie wieder angezeigt (nur die letzten vier Zeichen). Durch Disconnect wird es entfernt. Über die Befehlszeile: echo <token> | wp pbs importers figma-token set (das Token wird aus der Standardeingabe gelesen, sodass es nicht in Ihrem Shell-Verlauf gespeichert wird).

Einen Frame importieren

1. Klicken Sie in Figma auf einen Frame, klicken Sie mit der rechten Maustaste darauf und wählen Sie Copy/Paste as → Copy link to selection.
2. Fügen Sie den Link in Figma frame link ein und klicken Sie auf Import the frame. Es wird eine neue Beitragsseite als Entwurf erstellt, die nach dem Frame benannt ist.

Wie das Design konvertiert wird

• Auto layout wird zu Flex-Zeilen und -Spalten (und Rastern bei Raster-Auto-Layout) mit demselben Abstand, Innenabstand und derselben Ausrichtung; ein frei angeordneter Frame wird in Lesereihenfolge gestapelt, und der Bericht weist darauf hin, wenn sich Ebenen überlappen.
• Ein aus Bändern mit voller Breite bestehender Seiten-Frame wird zu einem Abschnitt mit voller Breite pro Band.
• Text behält Schriftart, Größe, Strichstärke, Zeilenhöhe, Zeichenabstand, Groß-/Kleinschreibung, Ausrichtung und Farbe bei; großer Text wird zu Überschriften, Abschnitte in Fettschrift und Kursivschrift sowie Links bleiben erhalten.
• Füllungen, Konturen, Eckenradien und Schlagschatten werden übernommen, einschließlich Farbverläufen.
• Bilder werden in Ihre Mediathek kopiert, und Vektorgrafiken (Icons, Illustrationen) werden von Figma gerendert und als Bild kopiert (bis zu 200 Zeichnungen pro Import). Beim erneuten Importieren desselben Frames werden die Kopien wiederverwendet.
• Ein kleiner Frame mit einer Füllung, abgerundeten Ecken und einer kurzen Beschriftung (oder einer Ebene namens „button“) wird zu einem Button-Block.

Auf einem Smartphone werden Zeilen aus Elementen mit fester Breite zu einer Spalte gestapelt, da ein Figma-Frame mit einer festen Breite gezeichnet wird.

Über die Befehlszeile: wp pbs importers figma <frame link>.