知识库

使用 Page Builder Sandwich 将 Figma 框架导入 WordPress

关联您自己的 Figma 账户，将画框转换为可编辑的页面：包含自动布局、文本样式、颜色和图像。

Page Builder Sandwich Pro 可将 Figma 画框转换为可编辑的 WordPress 页面。该网站通过您自己的 Figma 账户与 Figma 通信，使用您创建的个人访问令牌；任何设计或令牌均不会经过 Zinn Digital®。

连接 Figma（作为管理员操作一次）

在 Figma 中，打开 Settings → Security → Personal access tokens 并生成一个具有 File content: read 权限范围的令牌。
在 wp-admin 中，前往 Page Builder Sandwich → Import from other builders and Figma → Import from Figma，粘贴该令牌并点击 Connect Figma。

系统将向 Figma 验证该令牌，并以加密方式存储，且不再显示（仅显示其后四位字符）。Disconnect 可将其移除。在命令行上： echo <token> | wp pbs importers figma-token set（令牌从标准输入读取，因此不会保存在您的 Shell 历史记录中）。

导入画框

在 Figma 中，点击一个画框，右键点击并选择 Copy/Paste as → Copy link to selection。
将链接粘贴到 Figma frame link 中，然后点击 Import the frame。系统将创建一个以该画框命名的全新草稿页面。

设计的转换方式

Auto layout 将转换为具有相同间距、内边距和对齐方式的弹性行与列（网格自动布局则转换为网格）；自由布局的画框按阅读顺序堆叠，并在图层重叠时在报告中注明。
由全宽通栏组成的页面画框，每个通栏转换为一个全宽区块。
文本保留其字体、大小、字重、行高、字间距、大小写、对齐方式和颜色；大号文本转换为标题，粗体、斜体片段及链接均予以保留。
填充、描边、圆角半径和投影均被沿用，包括渐变。
图像将复制到您的媒体库中，矢量图（图标、插图）由 Figma 渲染并作为图像复制（每次导入最多 200 个图形）。再次导入相同的画框将复用这些副本。
具有填充、圆角和一个简短标签的小画框（或名为“button”的图层）将转换为 Button 区块。

在手机上，固定宽度的项目行会堆叠成一列，因为 Figma 画框是以单一宽度绘制的。

从命令行操作：wp pbs importers figma <frame link>。