构建

从 Figma 导入

将 Figma 设计带入 Vibr：变量成为主题，文本样式成为字体层级，画框成为按原型方式相互链接的界面。

Send to Vibr 是一个 Figma 插件。它会读取你在 Figma 中打开的文件（变量、样式、组件、画框和原型链接），并将其保存为一个文件。Vibr 导入该文件后，会使用你的设计系统和模型根据它进行构建。

安装插件

在 Figma 中打开 Plugins（插件）菜单，搜索 Send to Vibr 并运行。该插件适用于所有 Figma 套餐，包括 Starter。

选择要发送的内容

插件会发送你所选层级的内容，从整个文件到单个元素都可以：

整个文件： 逐页发送每个页面的原型流程，没有流程时则发送其中的界面。封面、缩略图和分隔页会被跳过。
未选中任何内容的页面： 发送它的流程，没有流程时则发送其中的所有界面。
分区（section）： 其中的每个画框各作为一个界面。
画框： 即该界面。
元素： 组件、实例，或画框内的任意图层。Vibr 会将它单独构建为可复用的组件。

选中你想要的内容，或在插件顶部选择 This page or selection（此页面或所选内容）或 Whole file（整个文件）。插件会列出将要发送的内容。你可以混合发送：一个界面和两个元素可以一起发送。

在下方选择要一并带上的内容：

Screens and elements, with layout and prototype links（界面和元素，包含布局和原型链接），以及 Include frames they link to（包含它们链接到的画框），这样流程会完整送达。其中的照片也会一并带上，并按设计中显示的样子裁剪。
Variables, text styles and shadows（变量、文本样式和阴影），来自整个文件。
Components（组件），包含其变体。界面中用到的组件排在最前面。

一个文件最多包含 12 个界面和元素、12 张照片、80 个组件和 1,500 个变量。

保存文件

选择 Save file for Vibr。插件会保存一个以 .vibr-figma.json 结尾的文件。Copy 则会将相同的内容放到剪贴板上。

导入到 Vibr

在输入框中选择 +，然后选择 从 Figma 导入，再选择该文件。你也可以将文件拖放到输入框中，或粘贴 Copy 放到剪贴板上的内容。

Kiln & Crema 文件的“来自 Figma”对话框。它提供基于 14 个变量的颜色主题，以及 Inter 和 Fraunces 字体层级，下方按流程顺序列出五个带缩略图的界面：Home、Menu、Item: Pour-over、Checkout 和 Order placed。 — Vibr 在构建任何内容之前，会先显示它将生成什么。

对话框会列出 Vibr 将生成的内容。取消勾选你不需要的项：

基于变量的颜色主题，添加到你的资源库。
字体层级，每个字体家族一个，添加到你的资源库。
来自画框的照片，像上传的图片一样添加到你的资源库，让界面显示真实的图片。
要构建的界面和元素，按流程访问它们的顺序排列。

选择构建。Vibr 会使用你的设计系统和模型，将每个界面作为一个独立请求进行构建，以其画框名称保存，然后继续下一个。输入框上方的进度条会显示当前正在构建的界面。停止会结束运行，并保留已构建的界面。

运行结束后，Vibr 会打开第一个界面。选择播放即可逐屏点击浏览流程。请参阅流程。

再次导入同一个文件时，会复用首次导入时创建的主题和字体层级。

对应关系

在 Figma 中	在 Vibr 中
颜色变量	一个颜色主题。Brand/500 这样的色阶和 color/clay 这样的简短名称会成为它的颜色；Vibr 据此构建浅色和深色角色，并检查对比度。
圆角和间距变量、阴影样式	主题的圆角、间距单位和阴影。
文本样式	每个字体家族一个字体层级，包含字号、字重、行高和字间距。如果 Google Fonts 提供这些字体，Vibr 会从那里请求它们。
图片填充	资源库中的照片，以其图层命名（名为 Photo: latte pour 的图层会成为 `@image/latte-pour`），供界面使用。
画框	界面。模型会获得画框的图片及其图层大纲：自动布局、文本、组件以及每个图层使用的令牌。
原型链接	界面之间的链接。返回会回到上一个界面。叠加层会以对话框或底部面板的形式，构建到打开它的界面中，并带有自己的链接。
组件	模型会获知你的组件及其变体，并使用你的设计系统中对应的部件进行构建。
元素	单独构建的组件，在页面上居中显示。

隐私与安全

插件没有网络访问权限。除了你保存的文件，任何内容都不会离开 Figma。
Vibr 在读取文件之前会先进行检查。文本以纯文本形式导入，隐藏字符会被移除，每个值都会经过检查并限制大小。每张图片都必须是 Vibr 能够打开的尺寸的真实图片，Vibr 会重新绘制它，从而移除其元数据。照片加入资源库时会经过与上传相同的检查。文本会经过与输入的请求相同的内容检查。
文件中的任何内容都不会运行。其文本会随每个请求发送给你的模型，作为设计素材，与附加文档的方式相同。请参阅密钥、隐私与存储。

提示

按照你希望的界面名称来命名画框。名为 Checkout 的画框会成为 @screen/checkout。
对于大型文件，请发送一个页面或所选内容，而不是整个文件。
运行结束后，可以用普通请求优化任意界面，例如“把购物车改成底部面板”。

构建

从 Figma 导入

将 Figma 设计带入 Vibr：变量成为主题，文本样式成为字体层级，画框成为按原型方式相互链接的界面。

安装插件

在 Figma 中打开 Plugins（插件）菜单，搜索 Send to Vibr 并运行。该插件适用于所有 Figma 套餐，包括 Starter。

选择要发送的内容

插件会发送你所选层级的内容，从整个文件到单个元素都可以：

整个文件： 逐页发送每个页面的原型流程，没有流程时则发送其中的界面。封面、缩略图和分隔页会被跳过。
未选中任何内容的页面： 发送它的流程，没有流程时则发送其中的所有界面。
分区（section）： 其中的每个画框各作为一个界面。
画框： 即该界面。
元素： 组件、实例，或画框内的任意图层。Vibr 会将它单独构建为可复用的组件。

在下方选择要一并带上的内容：

Screens and elements, with layout and prototype links（界面和元素，包含布局和原型链接），以及 Include frames they link to（包含它们链接到的画框），这样流程会完整送达。其中的照片也会一并带上，并按设计中显示的样子裁剪。
Variables, text styles and shadows（变量、文本样式和阴影），来自整个文件。
Components（组件），包含其变体。界面中用到的组件排在最前面。

一个文件最多包含 12 个界面和元素、12 张照片、80 个组件和 1,500 个变量。

保存文件

选择 Save file for Vibr。插件会保存一个以 .vibr-figma.json 结尾的文件。Copy 则会将相同的内容放到剪贴板上。

导入到 Vibr

在输入框中选择 +，然后选择 从 Figma 导入，再选择该文件。你也可以将文件拖放到输入框中，或粘贴 Copy 放到剪贴板上的内容。

对话框会列出 Vibr 将生成的内容。取消勾选你不需要的项：

基于变量的颜色主题，添加到你的资源库。
字体层级，每个字体家族一个，添加到你的资源库。
来自画框的照片，像上传的图片一样添加到你的资源库，让界面显示真实的图片。
要构建的界面和元素，按流程访问它们的顺序排列。

运行结束后，Vibr 会打开第一个界面。选择播放即可逐屏点击浏览流程。请参阅流程。

再次导入同一个文件时，会复用首次导入时创建的主题和字体层级。

对应关系

在 Figma 中	在 Vibr 中
颜色变量	一个颜色主题。Brand/500 这样的色阶和 color/clay 这样的简短名称会成为它的颜色；Vibr 据此构建浅色和深色角色，并检查对比度。
圆角和间距变量、阴影样式	主题的圆角、间距单位和阴影。
文本样式	每个字体家族一个字体层级，包含字号、字重、行高和字间距。如果 Google Fonts 提供这些字体，Vibr 会从那里请求它们。
图片填充	资源库中的照片，以其图层命名（名为 Photo: latte pour 的图层会成为 `@image/latte-pour`），供界面使用。
画框	界面。模型会获得画框的图片及其图层大纲：自动布局、文本、组件以及每个图层使用的令牌。
原型链接	界面之间的链接。返回会回到上一个界面。叠加层会以对话框或底部面板的形式，构建到打开它的界面中，并带有自己的链接。
组件	模型会获知你的组件及其变体，并使用你的设计系统中对应的部件进行构建。
元素	单独构建的组件，在页面上居中显示。

隐私与安全

插件没有网络访问权限。除了你保存的文件，任何内容都不会离开 Figma。
Vibr 在读取文件之前会先进行检查。文本以纯文本形式导入，隐藏字符会被移除，每个值都会经过检查并限制大小。每张图片都必须是 Vibr 能够打开的尺寸的真实图片，Vibr 会重新绘制它，从而移除其元数据。照片加入资源库时会经过与上传相同的检查。文本会经过与输入的请求相同的内容检查。
文件中的任何内容都不会运行。其文本会随每个请求发送给你的模型，作为设计素材，与附加文档的方式相同。请参阅密钥、隐私与存储。

提示

按照你希望的界面名称来命名画框。名为 Checkout 的画框会成为 @screen/checkout。
对于大型文件，请发送一个页面或所选内容，而不是整个文件。
运行结束后，可以用普通请求优化任意界面，例如“把购物车改成底部面板”。