Variables Ultra｜Management, Rebind, Import & Export, Templates

About this plugin

Variables Ultra | Management, Rebind, Import & Export, Templates

Variables Ultra is a powerful variable management plugin that implements almost all of the vanilla variable management functionalities in Figma, but with some differences.

We have optimized it based on user feedback and added several premium features such as `Import/Export`, `Variable Rebinding`, and `Generating Variable Set Templates`, among others.

⚡️ Quick Start

After opening the plugin, create your variable collection.

1. A brand new, unified UI/UX design
2. Place `Collection` in the same viewport to avoid dropdown menus, enabling quick selection
3. Click the icon button before the variable name to view/edit details
4. More user-friendly options for single selection, multi-selection, and select all
5. More intuitive linking of variables (alias), making operations smoother
6. Batch modification of multiple variable's scopes

---

One More Thing

1. [Variable Rebinding]
2. [Import/Export]
3. [Material3 Specification Templates]

---

Variable Rebinding

Want to switch themes?

Modes amount limit?

Use variable sets as your themes to quickly switch different variable

sets for layers, making theme switch effortless.

Follow these steps to prepare:

1. Prepare two variable sets with different names to represent your different themes.
2. Create a variable set `Collection A` and create a variable `background`.
3. Create a variable set `Collection B` and create a variable `background`.
4. Select any layer and bind its Fill to a variable.
5. Open the plugin and switch to the `Rebind Var` tab.
6. Select `Collection A` in the Source and `Collection B` in the Target.
7. Ensure the red layer is selected in Figma and press the `Rebind` button.
8. You will see the layer's Fill rebind to `Collection B - background`.

This applies to any nested layers and any number of variables. For more usage, please try playground

---

Import and Export

We often need to apply variables to multiple Figma files, and manually recreating them one by one can be a massive task.

1. We have prepared a Shared Collection:
2. a-background links to Collection A - background
3. b-background links to Collection B - background
4. blue is set to #0000FF
5. blue-alias links to blue
6. a-background-alias links to a-background

Click the export button in the bottom right corner to generate a JSON file containing all the variable sets and variables.

2. Import

Switch to Import/Export tab and select the JSON file to import.

---

Material3 Specification Templates

Material3 specification templates are provided to help you quickly set up variables according to the Material3 design guidelines.

---

Variables Ultra是一款强大的变量管理插件，实现了几乎所有香草的变量管理的功能，但又不完全一样，我们统计了一些样本，专门针对使用体验进行了优化，同时也增加了一些付费功能: 导入/导出、变量重绑定、生成变量集模板等等

⚡️ 快速开始

打开插件后，创建你的变量集

1. 全新且统一设计语言的 UI/UX
2. 将 `Collection` 放入同一视口避免使用下拉框，方便快速选择
3. 点击变量名前面的图标按钮以查看/编辑详情
4. 更人性化的单选、多选、全选
5. 更人性化的链接变量（别名），操作更流畅
6. 批量修改多个变量的可选范围

---

One more thing

1. [变量重绑定](#变量重绑定)
2. [导入/导出](#导入和导出)
3. [Material3 规范模版](#Material3规范模版)

> 请注意，这些功能需要一个可用的订阅以解锁

---

变量重绑定

想要切换主题？Mode数量限制？使用变量集作为你的主题，快速为图层切换不同的变量集合，轻松实现主题替换

为你的设计增加一个不同的主题风格，很简单。

你需要按照以下步骤做一些准备：

1. 准备两个不同名称的变量集，以表示你的不同主题
2. 创建变量集 Collection A，并创建变量 background
3. 创建变量集 Collection B，并创建变量 background
4. 选择任意一个图层，将它的 Fill 绑定一个变量，比如 Collection A - backgroud
5. 打开插件，切换到 Rebind Var 标签页
6. 在 Source Collection 中选择 Collection A
7. 在 Target Collection 中选择 Collection B
8. 确保在 figma 中已经选中了红色图层，并按下 Rebind 按钮

最终你会看到图层的 Fill ，重新绑定到 Collection B - backgroud

***这适用于任意嵌套的图层，以及任意数量的变量。更多的用法请尝试playground***

> 请注意，Rebind Var 无法对以下属性进行重新绑定

1. 带有渐变颜色的 Fill
2. 对于富文本来说，你只能在以下二选一

- 将 String Variable 绑定到 Text Content

- 将任意变量绑定到 Text Style 而不是文本内容本身

---

导入和导出

我们经常需要将变量应用到多个 figma 文件中，一个一个手动重建将会是一个巨大的工程。但现在有了导入/导出，只需要两个按钮就可以做到

1. 让我们准备一个 `Shared Collection`
2. a-background 链接到 Collection A - backgroud
3. b-background 链接到 Collection B - backgroud
4. blue 设置为 #0000FF
5. blue-alias 链接到 blue
6. a-background-alias 链接到 a-background

点击右下角的导出按钮，将会生成一个 json 文件，包含了所有的变量集和变量

2. 导入

1. 切换到 Import Var 标签页，并选择刚才导出的 json 文件

2. 正如我们刚才导出的一样，你会看到所有的变量集和它们的依赖关系

3. 选择需要导入的变量集，对于有依赖关系的变量集，插件会自动导入依赖的变量集

4. 点击导入按钮，完成操作

---

Material3规范模版

只需要选择一个种子色，即可生成一个 Material3 规范的变量集

生成多个变量集，即可使用 `Rebind Var` 功能，快速切换主题