提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
让 Symbol 更好用的进阶功能——变体,帮助按尺寸、样式等对组件统一管理,使用时在右侧快速切换组件类型。
来了来了!
几天不见,我又带着更新来啦~
这次上线的「变体」,让「即时设计」的实用性又提升了一个 Level,而且操作起来得心应手,做设计的效率轻轻松松就能翻倍!
啊?不信?
那大家仔细回忆一下,我们以往是怎么替换引用组件的呢~是不是只能像这样从大把的组件里筛出来 ↓
每次替换都觉得非常麻烦,尤其是项目里面引用组件多了之后,找起来简直灾难!
现在——来感受一下用了「变体」后的效果↓
这些可都是在设计稿里就能做到的哦~
怎么样?是不是突然对「变体」感兴趣了!
为了做这个逻辑异常复杂的功能,我们的程序员小哥可是头都大了一圈诶!我敢保证。一旦用上它,你们绝对再也离不开了~
把多个引用组件(Symbol)合并为一个整体,只需要设置好属性就可以随意切换组件的不同状态,这就是一个「变体」。
而在使用了变体之后,设计过程中所有的组件替换都会变得像操作 App 一样简单!
总之这是一个对设计师十分友好的功能,它还有特别多优秀的特性,甚至会完全改变你使用引用组件的方式!
有的小伙伴可能会说:
「你上面演示的就那么几个组件,我的项目里可是动不动好几百个啊?能用吗?」
答案当然是没问题了,在「即时设计」里,无论同类型的引用组件数量有多少,都可以全部选中,一口气合并为变体!
合并后,设计师只需要按照自己的思路,根据类型、颜色、功能、风格等自由地对组件分类,就算最后的变体里有几十上百个组件,我们也只用拿出来一个,剩下的在右侧面板中切换就好了,再不必反复手动替换。
没有「变体」的时候,我们想使用资源库里的组件,在搜索关键词后,要从一大堆组件中分辨出来再拖拽到编辑区域,用到同类型的其他组件时,又必须重新再找一次。
而引用组件合并成「变体」后,资源库内的搜索结果会只剩一个变体,不管我们想用它的哪种状态,都只需要拖拽这一个到编辑区域。
而拖拽出来的变体,直接就是「实例组件」的形式,想要几个就复制几个,每一个需要什么状态,需要什么样式,在右侧面板的分类里选就可以了~
还有我们不得不提的个人资源库!在整理设计资源方面真的是有着其他工具不可替代的优势。
所有你设计过的导航、按钮、开关之类的「变体」,也都和现有的组件、素材一样,支持选中后右键「上传至资源库」。
这样,以后不论在什么样的项目里需要用到哪种变体,都可以从我们的个人资源库中拖拽出来直接使用,不必再重新创建。
甚至可以通过我们即将上线的共享设计库分享到整个团队,建立通用的变体规范!一想到这些,我感觉自己又更爱这个功能了!
好啦!「变体」的更新就介绍到这,最后再用一个小示例,给大家演示下如何快速上手吧~
↓↓↓
① 我们先创建三个弧度不同的圆角按钮,并复制一份修改颜色用来区分,然后将 6 个按钮分别创建为引用组件;
② 选中创建好的 6 个引用组件,点击右侧「变体」面板的「添加」将其合并为变体;
③ 选中「变体」,通过右上角的选项添加一个「可点击状态」的新分类,并将自动生成的「分类1」右键重命名为「圆角弧度」;
④ 选中对应的多个组件,通过右侧的输入框,将「可点击状态」的值分别命名为「是/否」,将「圆角弧度」的值分别命名为「5/15/25」;
⑤ 选中「变体」内的任意一个引用组件,按住 Alt 拖拽复制到编辑区域,就可以通过右侧面板来选择切换状态了。
怎么样?是不是感觉很简单很方便啊?
当然,这只是很基础的一种用法,我们还为大家准备了十分详细的使用教程,在开始之前,可以先到官网的帮助中心里查看完整的文档哦~
(复制链接,到电脑端浏览器中查看)
https://js.design/tutorial/#/content/1.Guide/19.Variant
说的再多都不如本人上手,而且这么好用的功能,大家一定要到「即时设计」里亲自体验一下才行,我相信,以后你的每个项目里都少不了变体啦!
————————
欢迎大家加入「即时设计」的微信交流群,将你的使用感受、日常想要的功能需求提交给我们,说不定下次更新中就会有你想要的功能哟~
扫码加入微信交流群
欢迎关注即时设计公众号,第一时间获取「即时设计」的最新动向和免费设计资源。
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册