Importez un cadre Figma dans WordPress avec Page Builder Sandwich

Page Builder Sandwich Pro transforme un cadre Figma en une page WordPress modifiable. Le site communique avec Figma à l’aide de votre propre compte Figma, via un jeton d’accès personnel que vous créez ; aucun design ni jeton ne transite par Zinn Digital®.

Connecter Figma (une seule fois, en tant qu’administrateur)

1. Dans Figma, ouvrez Settings → Security → Personal access tokens et générez un jeton avec la portée File content : read.
2. Dans wp-admin, accédez à Page Builder Sandwich → Import from other builders and Figma → Import from Figma, collez le jeton et appuyez sur Connect Figma.

Le jeton est vérifié auprès de Figma, stocké de façon chiffrée, et ne sera plus jamais affiché (seuls ses quatre derniers caractères restent visibles). Disconnect le supprime. En ligne de commande : echo <token> | wp pbs importers figma-token set (le jeton est lu à partir de l’entrée standard, il n’est donc pas enregistré dans l’historique de votre shell).

Importer un cadre

1. Dans Figma, cliquez sur un cadre, effectuez un clic droit dessus et choisissez Copy/Paste as → Copy link to selection.
2. Collez le lien dans Figma frame link et appuyez sur Import the frame. Une nouvelle page en brouillon est créée, portant le nom du cadre.

Comment le design est converti

• L'Auto layout devient des rangées et des colonnes flex (et des grilles pour le grid auto layout) avec les mêmes espacements, marges internes et alignements ; un cadre disposé librement est empilé selon l’ordre de lecture, et le rapport le signale en cas de superposition de calques.
• Un cadre de page constitué de bandes pleine largeur devient une section pleine largeur par bande.
• Le Texte conserve sa police, sa taille, sa graisse, sa hauteur de ligne, son espacement des lettres, sa casse, son alignement et sa couleur ; les textes de grande taille deviennent des titres, et les segments en gras, en italique ainsi que les liens sont préservés.
• Les Fonds, contours, rayons d’angle et ombres portées sont conservés, y compris les dégradés.
• Les Images sont copiées dans votre médiathèque, et les éléments vectoriels (icônes, illustrations) sont rendus par Figma et copiés en tant qu’images (jusqu’à 200 dessins par importation). Importer à nouveau le même cadre réutilise les copies existantes.
• Un petit cadre comportant un fond, des coins arrondis et une étiquette courte (ou un calque nommé « button ») devient un bloc Button.

Sur un téléphone, les rangées d’éléments à largeur fixe s’empilent en colonne, car un cadre Figma est conçu sur une seule largeur.

Depuis la ligne de commande : wp pbs importers figma <frame link>.