Symbol 还能这么用？让设计效率轻松翻倍的「变体」组件正式上线

来了来了！

几天不见，我又带着更新来啦！

这次上线的「变体」

让我们工具的实用性又提升了一个 Level

而且操作起来得心应手

做设计的效率轻轻松松就能翻倍

什么？不信？

那仔细回忆一下

我们以往是怎么替换引用组件的呢

是不是只能像这样从大把的组件里筛出来 ↓

每次替换都觉得非常麻烦

尤其是项目里面引用组件多了之后

找起来简直灾难！

现在——

来感受一下用了「变体」后的效果 ↓

这些可都是在设计稿里就能做到的哦~

怎么样？

是不是突然对「变体」感兴趣了！

为了做这个逻辑异常复杂的功能

我们的程序员小哥可是头都大了一圈诶！

我敢保证

一旦用上它，你们绝对再也离不开了

 什么是变体

把多个引用组件（Symbol）合并为一个整体，只需要设置好属性就可以随意切换组件的不同状态，这就是一个「变体」。

而在使用了变体之后，设计过程中所有的组件替换都会变得像操作 App 一样简单！

总之这是一个对设计师十分友好的功能，它还有特别多优秀的特性，甚至会完全改变你使用引用组件的方式！

 组件数量无限制，

任意状态一键切换

有的小伙伴可能会说：

「你上面演示的就那么几个组件，我的项目里可是动不动好几百个啊？能用吗？」

答案当然是没问题了，在「即时设计」里，无论同类型的引用组件数量有多少，都可以全部选中，一口气合并为变体！

合并后，设计师只需要按照自己的思路，根据类型、颜色、功能、风格等自由地对组件分类，就算最后的变体里有几十上百个组件，我们也只用拿出来一个，剩下的在右侧面板中切换就好了，再不必反复手动替换。

  引用组件合并整理，

拖拽使用更方便

没有「变体」的时候，我们想使用资源库里的组件，在搜索关键词后，要从一大堆组件中分辨出来再拖拽到编辑区域，用到同类型的其他组件时，又必须重新再找一次。

而引用组件合并成「变体」后，资源库内的搜索结果会只剩一个变体，不管我们想用它的哪种状态，都只需要拖拽这一个到编辑区域。

而拖拽出来的变体，直接就是「实例组件」的形式，想要几个就复制几个，每一个需要什么状态，需要什么样式，在右侧面板的分类里选就可以了~

 支持上传个人资源库，

其他项目直接使用

还有我们不得不提的个人资源库！在整理设计资源方面真的是有着其他工具不可替代的优势。

所有你设计过的导航、按钮、开关之类的「变体」，也都和现有的组件、素材一样，支持选中后右键「上传至资源库」。

这样，以后不论在什么样的项目里需要用到哪种变体，都可以从我们的个人资源库中拖拽出来直接使用，不必再重新创建。

甚至可以通过我们即将上线的共享设计库分享到整个团队，建立通用的变体规范！一想到这些，我感觉自己又更爱这个功能了！

好啦！

「变体」的更新就介绍到这

最后再用一个小示例

给大家演示下如何快速上手吧~

↓↓↓

① 我们先创建三个弧度不同的圆角按钮，并复制一份修改颜色用来区分，然后将 6 个按钮分别创建为引用组件；

② 选中创建好的 6 个引用组件，点击右侧「变体」面板的「添加」将其合并为变体；

③ 选中「变体」，通过右上角的选项添加一个「可点击状态」的新分类，并将自动生成的「分类1」右键重命名为「圆角弧度」；

④ 选中对应的多个组件，通过右侧的输入框，将「可点击状态」的值分别命名为「是/否」，将「圆角弧度」的值分别命名为「5/15/25」;

⑥ 选中「变体」内的任意一个引用组件，按住 Alt 拖拽复制到编辑区域，就可以通过右侧面板来选择切换状态了。

怎么样？是不是感觉很简单很方便啊？

当然，这只是很基础的一种用法，我们还为大家准备了十分详细的使用教程，在开始之前，可以先到官网的帮助中心里查看完整的文档哦~

（复制链接，到电脑端浏览器中查看）

https://js.design/tutorial/#/content/1.Guide/19.Variant

说的再多都不如本人上手，而且这么好用的功能，大家一定要到「即时设计」里亲自体验一下才行，我相信，以后你的每个项目里都少不了变体啦！

对了，除了变体

最近我们还更新了两个非常实用的小功能哦~

• 「文本转路径」：可以根据设计需要将文本转为矢量路径，以便调整文本形状；

• 「剪刀工具」：矢量编辑模式下可以使用剪刀工具快速删除图形路径。

有需要的小伙伴们，可以直接用起来啦！

---

欢迎大家加入「即时设计」微信交流群，将你的使用感受、日常想要的功能需求提交给我们，说不定下次更新中就会有你想要的功能！

扫码加入微信交流群

---

即时设计为原生中文用户而生的专业 UI 设计工具