Importeer een Figma-frame naar WordPress met Page Builder Sandwich

Page Builder Sandwich Pro zet een Figma-frame om in een bewerkbare WordPress-pagina. De site communiceert met Figma via uw eigen Figma-account, met behulp van een persoonlijk toegangstoken dat u aanmaakt; er gaan geen ontwerpen of tokens via Zinn Digital®.

Figma verbinden (eenmalig, als beheerder)

1. Open in Figma Settings → Security → Personal access tokens en genereer een token met het bereik File content: read.
2. Ga in wp-admin naar Page Builder Sandwich → Import from other builders and Figma → Import from Figma, plak het token en klik op Connect Figma.

Het token wordt gecontroleerd bij Figma, versleuteld opgeslagen en nooit meer getoond (alleen de laatste vier tekens). Met Disconnect verwijdert u het. Op de opdrachtregel: echo <token> | wp pbs importers figma-token set (het token wordt gelezen uit de standaardinvoer, waardoor het niet wordt opgeslagen in uw shell-geschiedenis).

Een frame importeren

1. Klik in Figma op één frame, klik met de rechtermuisknop en kies Copy/Paste as → Copy link to selection.
2. Plak de link in Figma frame link en klik op Import the frame. Er wordt een nieuwe conceptpagina gemaakt met de naam van het frame.

Hoe het ontwerp wordt geconverteerd

• Auto layout wordt flex-rijen en -kolommen (en rasters voor grid auto layout) met dezelfde tussenruimte, padding en uitlijning; een frame met een vrije indeling wordt gestapeld in leesvolgorde, en het rapport meldt het wanneer lagen elkaar overlapten.
• Een paginaframe dat bestaat uit stroken over de volledige breedte, wordt één sectie over de volledige breedte per strook.
• Tekst behoudt het lettertype, de grootte, het gewicht, de regelhoogte, de letterspatiëring, het hoofdlettergebruik, de uitlijning en de kleur; grote tekst wordt koppen, vet- en cursiefgedrukte delen en links blijven behouden.
• Vullingen, randen, hoekradii en slagschaduwen worden overgenomen, inclusief kleurverlopen.
• Afbeeldingen worden naar uw mediabibliotheek gekopieerd en vectorafbeeldingen (iconen, illustraties) worden gerenderd door Figma en gekopieerd als een afbeelding (tot 200 tekeningen per import). Als u hetzelfde frame opnieuw importeert, worden de kopieën hergebruikt.
• Een klein frame met een vulling, afgeronde hoeken en één kort label (of een laag met de naam "button") wordt een Button-blok.

Op een telefoon worden rijen van items met een vaste breedte gestapeld in een kolom, omdat een Figma-frame op één breedte wordt getekend.

Vanaf de opdrachtregel: wp pbs importers figma <frame link>.