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

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

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

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

• 免费体验大部分功能

• 从DSM的工具栏里直接拖拽组件到画板形成设计稿

• 快速搜索并找到你需要的设计组件

• 基于原子设计，修改某个组件可以快速同步到相关联组件

• 新添加和修改的组件可以快速同步到任何采用设计系统的成员设计文档内。

• 设计系统可以生成版本历史和进行版本部署

• 自动生成在线样式指南

• 通过设计标识（token）更高效的与开发人员同步组件库

  
  

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

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

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

3. 打开Sketch工具栏“偏好设置>插件”，检查插件列表中是否有“新设计系统管理”（版本0.6.9+），确保该插件是选中☑️态。如果没有看到该插件的小伙伴可以去我公众号后台留下邮箱，我可以发给你。

4. 在Sketch状态栏中点击“插件>新设计系统管理>右箭头➡️进入子菜单>切换左侧嵌板“之后就会看到左侧页面栏上方有一个”DSM“图标和“上传文件”。“上传文件”和子菜单选项一“切换主页面”其实是同一个功能，允许你上传已命名打包好的组件库

题外话：在Craft插件装好以后，其实会看到右边嵌板的左侧有一个以“C”图标为首的纵向工具条 。其中第四个“六边形图标”其实是老的Invision DSM设计系统工具，现在不允许通过老系统工具自主创建新设计系统，但是大家可以查看系统自带的案例设计系统，和维护之前用老系统创建的设计系统。

现在软件都安好了吗？带大家利用Sketch本身的样例设计系统实际操作一遍。首先要在Invision DSM的网页端建一个设计系统页面，在网页端建立设计系统以后才可以通过Sketch的DSM插件上传已构建好的设计组件。

2. 登陆后，在导航菜单栏点击DSM

3. 点击红色按钮创建新设计系统, 首次登陆的小伙伴可能会看到左边按钮提示有一个现成的样例设计系统，我们这次的任务是复刻一个同样的Sketch样例系统，然后在新样例上面进行修改并与原样例进行比对。

4. 进入到设计系统界面网页端，顶部栏分别为Foundations 作为原子设计的原子组件库和设计理念，Components为主要的分子和有机物组件部分。

5. 大家在完成上面的封面构建后，需要返回Sketch软件进行组件库上传。在真实创建设计系统时，我们可以优先把组件库完成，现在在案例实操时，大家可以先用Invision DSM 样例设计系统🔗 进行上传练习，下载不下来的小伙伴可以给我公众号后台留邮箱领取。

6. 这一步需要用到上面👆提到的Sketch文件，打开“Invision DSM 样例设计系统”Sketch文件，在Sketch的左侧嵌板上点击“上传文件”。大家稍安勿躁，马上一个人畜无害的设计系统就快搞完了。

7. 确认你刚刚在网页端创建的设计系统文件名与弹框里横线显示的文件名一致，点击“上传Sketch文件”上传Invision DSM 样例设计系统🔗的sketch文件。

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

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

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

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

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

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

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

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

在下篇文章里，小编会继续讲如何构建设计系统，组件架构的原子设计部分及同开发协作的技巧。

参考资料：

https://medium.com/ux-power-tools/everything-you-need-to-know-about-invisions-new-design-system-manager-including-how-to-build-one-3d32a40c22ea (这个是老系统，不要被误导）

原创作品，转载请注明

作者：樊小花，原微软通用体验设计师，现居硅谷；b站：樊小花0901