.XIA 2020新设计系统攻略 | 分步详解如何用Invision DSM + Sketch打造“原子设计系统”
加入收藏 评论

2020新设计系统攻略 | 分步详解如何用Invision DSM + Sketch打造“原子设计系统”

引言 这是小编的第二篇文章。主要是关于如何安装设计系统软件Invision DSM和如何通过它与Sketch进行关联管理设计系统。就在12周前Invision的DSM刚刚推出了新的设计系统,我有...

引言

这是小编的第二篇文章。主要是关于如何安装设计系统软件Invision DSM和如何通过它与Sketch进行关联管理设计系统。就在1-2周前Invision的DSM刚刚推出了新的设计系统,我有幸成为最早一批的试用者,通过对新老系统的对比,在这里给大家介绍一下新系统的构成和安装,也算是全球首发了🚀。小编也是写到吐血,感觉有帮助的话希望大家给点个赞。建议边阅读边安装。读完之后你应该对如何用软件构建一个设计系统框架有初步了解,在Invision DSM的介绍里提到了微软, IBM, Salesforce等大厂的设计系统案例,小编揣测大概他们也采用了Invision的设计系统。不管怎样,用的软件是Invision DSM还是Figma,核心都是通过原子设计理论创造出来的,不了解的小伙伴可以先去读我第一篇《原子设计原理》🔗的文章。

小厂不需要设计系统吗?

写完第一篇文章后,有一个小伙伴评论说如果只有1-2个设计师的小公司,是不是就没有必要搞设计系统了呢?小编觉得还是要搞的,而且越早越好。理由是如果小厂产品发展起来,极有可能在几个月半年内设计师人数翻番。当你意识到需要一个设计系统时,大概率已经晚了。要命的不是统一设计组件,而是如何能让慢慢变臃肿的产品在不影响A/B测试结果的前提下,还能一点点迭代达到设计统一,同时完美兼顾新增的产品需求。所以设计师们如果能在初期对设计系统有一定了解,同时把系统架构搭建起来,哪怕没有很多完善的功能和组件,只要工具用对架构搭好,设计可以同步与产品快速成长。同时大部分设计师从初级过渡到中高级都至少需要有了解建立设计系统的经验,所以设计系统也算是小白成长进阶的必经之路。当然因为设计系统的效果在初期并不是立竿见影,多半是在中后期才展现价值作为收敛规范,所以很多小厂在产品中后期也才开始搞但是困难和阻碍可想而知但又不得不做。

No.1设计系统工具Invision DSM

目前相对流行的软件是使用Invision DSM 和 Sketch共同构建,与此同时Figma基于其与各团队协作的友好特性也慢慢有越来越多公司采纳其作为设计及设计系统工具。小编这次主要介绍Invision DSM。免责声明:小编非上述任何一个公司员工同时本身也没有任何商业利益点,纯粹从设计师角度和团队协作方面跟大家分享。Invision DSM主要有如下几大优势:

  • 免费体验大部分功能
  • 从DSM的工具栏里直接拖拽组件到画板形成设计稿
  • 快速搜索并找到你需要的设计组件
  • 基于原子设计,修改某个组件可以快速同步到相关联组件
  • 新添加和修改的组件可以快速同步到任何采用设计系统的成员设计文档内。
  • 设计系统可以生成版本历史和进行版本部署
  • 自动生成在线样式指南
  • 通过设计标识(token)更高效的与开发人员同步组件库

接下来就让我们来看看这个软件是如何做到上述功能吧。前方高能📢📢详细安装教程》》建议大家边阅读边安装

No.2安装Invision DSM和sketch插件

1. 确保已有Sketch软件,没有的话请去下载。确保你的Sketch软件已升级到最新版本(65.1+)

2. 下载Invision的Craft插件,检查桌面上方状态栏是否有“C”图标按钮,点击“C”图标按钮出现下拉弹窗后去“设置>关于”检查是否升级到最新软件版本(1.0.95+)。同时检查下拉菜单里是否有“新设计系统管理”及其是否打开(toggle on)

8. 继续点击“⬆️按钮”。


9. 当上传成功后,点击”管理组件库”或者下拉菜单后就会看到你刚刚上传的“示例组件库”

10.点击“Add all to Sketch",把组件库加入本地组件系统里。

11. 想必如此繁琐的步骤你已经看懵圈了,那么让我们来看最后效果吧✨🌟。首先本地效果展示。打开任意一个空白Sketch文件。从右上角的下拉菜单就可以快速构建任何一个分子组件,生物组件和页面。

12.线上效果来了✨🌟,需要我们再稍微动动手指头。返回最开始的设计系统网页端。我们用按钮这一组件举例,按照如下图例点击进入到步骤4。

13. 这时你会发现,你之前通过Sketch软件上传的设计组件已全部于文件夹形式存在这里。找到“Button”按钮文件夹,点击进入“Primary”主按钮。

14. 点击下面蓝色链接全选或者一个个手动选,点击蓝色按钮选中至下一步。然后你就会发现所有按钮包括其层级都显示在线上了。

🎉🎉恭喜亲们,你们作为设计师完成了你的第一个线上线下组件库。同一个公司不管大小,可以由一个设计师或者多个设计师通力协作完成设计系统,再也不用担心设计稿不像是一个娘生的孩子了。同时最后一个是附加福利🧧我们来看一下如何在Sketch线下组件库里修改某个组件的特性例如颜色,然后快速同步到线上。

No.4快速同步线上线下组件

返回到原始Invision DSM 样例设计系统的sketch文件,注意不是上传到DSM的那个后来生成的Sketch文件。进入“Components”找到“Button/Primary”列的其中一个按钮,选中该按钮并在右边嵌板里面找到按钮颜色进行替换。最后刷新一下线上系统的网页就可以看见组件的更改。

10

10位设计师推荐

.XIA 767901887 DavidIsons Scottgling 熤織鵽濼 JoshuaWeera 小刚哥哥 哈哈镜 Mr.Sky Olgamar

.XIA
2020新设计系统攻略 | 分步详解如何用Invision DSM + Sketch打造“原子设计系统” 在这些因素的制约之下,才能选取出科学的配色方案
相关文章

Copyright © 2011 - 2020 UIYuan设计师交流平台, All Rights Reserved. 皖ICP备18024424号-2

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源,商业媒体及纸媒请先联系:service@uiyuan.com

UI园会员交流QQ群: 233748945 / 73425514