Import a Figma frame into WordPress with Page Builder Sandwich

Page Builder Sandwich Pro turns a Figma frame into an editable WordPress page. The site talks to Figma with your own Figma account, using a personal access token you create; no design or token passes through Zinn Digital®.

Connect Figma (once, as an administrator)

1. In Figma, open Settings → Security → Personal access tokens and generate a token with the

File content: read scope.

2. In wp-admin go to **Page Builder Sandwich → Import from other builders and Figma → Import from

Figma, paste the token and press Connect Figma**.

The token is checked with Figma, stored encrypted, and never shown again (only its last four characters). Disconnect removes it. On the command line: echo <token> | wp pbs importers figma-token set (the token is read from standard input, so it is not saved in your shell history).

Import a frame

1. In Figma, click one frame, right-click it and choose **Copy/Paste as → Copy link to

selection**.

2. Paste the link into Figma frame link and press Import the frame. A new draft page is

made, named after the frame.

How the design is converted

• Auto layout becomes flex rows and columns (and grids for grid auto layout) with the same gap,

padding and alignment; a frame laid out freely is stacked in reading order, and the report says so when layers overlapped.

• A page frame made of full-width bands becomes one full-width section per band.
• Text keeps its font, size, weight, line height, letter spacing, case, alignment and colour;

large text becomes headings, bold and italic runs and links are kept.

• Fills, strokes, corner radius and drop shadows carry over, including gradients.
• Images are copied into your media library, and vector art (icons, illustrations) is

rendered by Figma and copied as an image (up to 200 drawings per import). Importing the same frame again reuses the copies.

• A small frame with a fill, rounded corners and one short label (or a layer named "button")

becomes a Button block.

On a phone, rows of fixed-width items stack into a column, because a Figma frame is drawn at one width.

From the command line: wp pbs importers figma <frame link>.