Importați un cadru Figma în WordPress cu Page Builder Sandwich

Page Builder Sandwich Pro transformă un cadru Figma într-o pagină WordPress editabilă. Site-ul comunică cu Figma prin propriul dumneavoastră cont Figma, utilizând un token personal de acces pe care îl creați; niciun design sau token nu trece prin Zinn Digital®.

Conectați Figma (o singură dată, ca administrator)

1. În Figma, deschideți Settings → Security → Personal access tokens și generați un token cu domeniul de aplicare File content: read.
2. În wp-admin accesați Page Builder Sandwich → Import from other builders and Figma → Import from Figma, lipiți tokenul și apăsați Connect Figma.

Tokenul este verificat cu Figma, stocat criptat și nu mai este afișat niciodată (doar ultimele sale patru caractere). Opțiunea Disconnect îl elimină. În linia de comandă: echo <token> | wp pbs importers figma-token set (tokenul este citit de la intrarea standard, astfel încât nu este salvat în istoricul shell-ului dumneavoastră).

Importați un cadru

1. În Figma, faceți clic pe un cadru, faceți clic dreapta pe acesta și alegeți Copy/Paste as → Copy link to selection.
2. Lipiți linkul în Figma frame link și apăsați Import the frame. Este creată o nouă pagină ciornă, denumită după cadru.

Cum este convertit designul

• Auto layout devine rânduri și coloane flex (și grile pentru grid auto layout) cu aceleași spațieri (gap), padding și aliniere; un cadru poziționat liber este stivuit în ordinea de citire, iar raportul menționează acest lucru atunci când straturile s-au suprapus.
• Un cadru de pagină format din benzi pe toată lățimea devine câte o secțiune pe toată lățimea pentru fiecare bandă.
• Textul își păstrează fontul, dimensiunea, grosimea, înălțimea liniei, spațierea literelor, majusculele/minusculele, alinierea și culoarea; textul mare devine subtitluri, iar porțiunile aldine, cursive și linkurile sunt păstrate.
• Umplerile, contururile, raza colțurilor și umbrele exterioare sunt transferate, inclusiv gradienții.
• Imaginile sunt copiate în biblioteca dumneavoastră media, iar grafica vectorială (pictograme, ilustrații) este randată de Figma și copiată ca imagine (până la 200 de desene per import). Importarea aceluiași cadru din nou reutilizează copiile.
• Un cadru mic cu umplere, colțuri rotunjite și o etichetă scurtă (sau un strat denumit „button”) devine un bloc Button.

Pe un telefon, rândurile de elemente cu lățime fixă se stivuiesc într-o coloană, deoarece un cadru Figma este desenat la o singură lățime.

Din linia de comandă: wp pbs importers figma <frame link>.