Dropbox的设计系统

写人物传记前大家都希望有一个好的故事起源,Zach Johnston(后面简称扎克)的就是一部经典的旧金山故事。“七年前我和两个朋友开着Prius全国各地跑。我那是才发现我的HTML和CSS技能在西海岸的需求很高,也意识到比起在纽约参与广告设计我更应该把大二的暑期时光用来在旧金山搭建APP程序。” 扎克说,在那次决定性的公路旅行后三个月,让他充分认识到回宾夕法尼亚州就业前途渺茫。

今天扎克致力于搭建Dropbox设计系统,这个团队一年前尚不存在。作为文件存储巨头Dropbox的任期三年内,扎克有机会影响多个产品(包括团队和业务)以及见证了公司及设计团队的快速成长。

 

关于增长、规模和设计系统的需求

“当时我加入时,我的设计团队只有20人,我们都围坐在一起,现在我们有超过50位产品设计师和数十位文案、用研和插画师。” 扎克说。

尽管团队设法让大家协作更紧密,但产出却差强人意。就此公司开始对可复用的组件进行更多投资,去年成立了官方设计系统团队。

“我们启用设计团队的一种方法是通过UI Kits。我们首先为每个平台(网页、桌面和移动)制作了Sketch Libraries,最近刚刚发布了我们自己的Framer Kits。我们密切关注我们的设计团队最常使用的工具,然后试图帮助他们花更少的时间来完成诸如重绘按钮之类的乏味工作。”专注网络平台的扎克说。

 

 

他强调到设计系统不应该只是个第二选择,抑或是难以实施贯彻的繁重工程。Dropbox的使命是释放世界的创造力,他认为他的团队使命是释放Dropbox的创造力。

“对我们来说,拥有一个设计系统意味着我们可以花更少的时间在流程监管上从而释放更多可支配的时间。”

扎克与Adam Noffsinger一起支持Framer Desktop Kit,这是一个由UI组件、代码片段和原型样例组成的定制工具包,旨在加速任何桌面原型工作者的工作流程。Dropbox Design团队最初是为内部使用而创建的,最近开源分享给更大的Framer社区。

 

 

尽管最终创建出来的组件细节还原程度很高,但是扎克很快指出他并不是Dropbox设计团队中最高端的Framer用户。“但我绝对是最响亮的倡导者,”他笑着说。转向使用Framer对于这位非传统设计师来说绝对是一个有趣的事件转折,他早年的大部分时间都是坚定的Framer反对者。

 

关于设计工具和思维模式的切换

事实上,扎克非但不是 Framer的支持者,他甚至花了很多时间反对使用Framer。“Dropbox的每个人都喜欢Framer,我是角落里的反叛者,仍然使用简单的HTML / CSS / JS进行原型制作。Ed Chao(Dropbox的产品设计师)让我转向一个名为Cactus的静态站点生成器,有一段时间我用它来管理和部署HTML / CSS / JS原型。“

然后在2016年的一个晚上,扎克的一切都改变了:Framer的创始人Koen Bok和Jorn van Dijk为Bridge Fellows举办了一个研讨会,这是一个设计师基金会运作的设计项目。“那晚结束时,Koen来到我的餐桌旁,问道。我们如何找到新的Design Tab。我利用这个机会列出了我认为Framer不如原型制作工具Cactus的所有原因。他耐心地听了,最后说:“如果我告诉你我们做了一个Cactus怎么办?”

作为一名没有多少使用花哨工具制作原型的经历的设计师扎克来说,直接访问代码是最纯粹的创作形式。花了7年时间,他终于改变了主意。“Cactus帮助我意识到‘花哨’工具可以让你摆脱原型设计的痛苦部分,例如开辟新项目,安装软件包和部署到服务器,”扎克说。

“但Framer的Design Tab告诉我们,可视化布局的界面胜过成千上万行HTML和CSS代码。”

 

使用Framer在内部推销产品创意

尽管终于看到了光明,但是还有另一个关键时刻让扎克从一个纯粹的Framer粉丝转变成一个倡导者。“我的PM,Graciela Kincaid和我刚刚向高层领导提出了一个新的Dropbox Business入职流程,并得到反馈说平板模拟很难理解,”扎克说。

“他们希望能切身体验到操作流程,而不是仅仅看到界面。”

回到办公桌前,他们两人制定了下一步计划:扎克提议使用Framer制作更真实的桌面原型。“在这一点上,我知道Framer很强大,但它需要构建一个复杂的桌面原型来还原用户操作流程。Framer甚至可以简单地在菜单栏和Dock上添加背景模糊效果。“

“将所有布局细节整理到Design Tab并保持代码简洁,使其他设计人员可以轻松地进入并做出贡献。”

他补充说,他和Graciela最终成功使用Framer原型来推销他们的入职提案并获得其他团队的支持。

 

找寻设计之家

Dropbox的出色表现已路人皆知。一个强大的产品套件和据报道5亿用户使用量使得这家拥有11年历史的公司成为一个各方面条件都受求职者拥戴的工作场所。但是,正是像扎克他们这样的团队所培养的协作和试验环境使得Dropbox成为一个真正独具魅力的地方、一个可以成就设计事业的地方。“实际上令人惊讶的是,尽管我们增长快速,设计团队仍然感觉像一个紧密的家庭,”扎克说。

Dropbox喜欢聘请设计师,他们可以通过逼真的原型将设计变为现实 – 他们甚至聘请了设计系统团队经理!如果您对桌面原型设计感兴趣并计划使用Framer Kit,请阅读扎克的Medium帖子,了解如何在您自己的工作流程中有效地使用该套件。

以上译自Framer Team 的Medium文章 Design Systems at Dropbox,点击原文链接可查看原帖

 

刷牙君

View posts by 刷牙君
处女座设计师一枚,涉及的专业领域视觉,交互,前端。

Leave a Reply

Your email address will not be published. Required fields are marked *