Figma 与设计师的角色变化，以及工具和角色、组织的相互影响
大家好！最近创业产品还在早期，且我们的领域相对垂直，平时的工作有非常多 hands on 的功能设计，我平时闲的没事思考的方向也和之前沉迷 PLG 时有一些变化：相比于之前 Growth 的重点：如何定义问题，目前的状态更像是，如何更好地解决一个已知问题。
这个点的变化，也会在这篇文章中得到提现：不聊 PLG，只是简单聊聊工具类产品设计的“哲学”和对我们后续工作的启发。
我要研究的对象，那自然要从我最熟悉的产品 Figma 开始说起。
前段时间 Figma 被 Adobe 收购，看了蛮多观点：
技术: WebAssembly 让 Figma 更快更可靠
协作: 协作让 Figma 之于 Adobe、Sketch 是降维打击
PLG: Figma 产品品质、社区发展和早期的标杆客户战略，是 PLG 的典型成功案例
大家看到了“协同” 赛道的光明未来，对于 Figma 这个产品的关注角度集中在商业成功和技术能力。但是，我还是想深深感慨，我们对于用户视角好容易忽视，也无人提及啊！
我想聊的就是在 Figma 诞生和发展的环境下，设计师群体这些年角色的变化，产品团队中设计文化的变化，以及工具和角色之间的互相影响。还有额外的不负责任的启发和反思。
文章近 8000 字，写了两个周末，写得我心力交瘁的。除了捋一捋这个行业的故事线，也包含了作为设计师的私人情怀。阅读需要20-30分钟。
设计师的工具和设计师的职责演进
在互联网产品开发领域，大家提到设计，会自动定位到负责 UI 的角色。其实早在 20 多年前，在这个语境下，交互设计是一个更容易被大家接受的词。注意了，不是那种捋流程，画架构，画线框图的狭义“交互”!
Interaction Design often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services."
交互设计最早上世纪 80 年代就被人提出了。源于工业设计领域出现了需要界面的场景，当时并没有准确的词汇去定义，于是就有了“交互设计”这一概念。后来软件设计需求量越来越大，设计的重担落在 developer 身上。Alan Cooper 的交互设计精髓 ( About Face: The Essentials of User Interface Design , 1995 ; • About Face 2.0: The Essentials of Interaction Design (with Robert Reimann) , 2003) 前一二版受众主要还是软件开发人员。
第一个学术性的交互设计项目来自于 1994 年的 Carnegie Mellon University, Master of Design in Interaction Design。起初项目围绕界面设计设置课程，但后续侧重点转化为 studying the “big picture” aspect of designing for interactions — people, organizations, cultures, contexts, and systems (一个小细节，Wiki 上记录的是 service，后续学校的官网已经改成了 contexts，感觉格局又大了。）
是不是有些熟悉，这不就是中文互联网内产品经理们的日常哲学反思吗？😄
这个定义我现在看到依然很感动，对于人，组织，文化，服务和系统的关怀和责任，这才是设计应有的愿景和气节，我也相信这是很多设计师进入这个行业的动力和初心。
设计行业内早些年间，经常出现 “UI not equals UX” 的段子，其实就是设计师群体对于自身定位和价值感的表达，后来 Norman 老爷子也说他为什么创造了 UX 这个词，因为界面的定义太狭隘了，会让人误会我们所做的事情的价值。
I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person's experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning.
— Donald Norman
商业成功让设计师被看到
商业成功让设计师被看到，这是一个非常现实的现象。正如 Figma 一样，除了协作， 它的商业成功也让很多人了解了互联网产品设计师的日常。
2007 年，苹果正式推出首款智能 iPhone，优秀的设计让大众知道，原来设计的好可以为产品带来这么大的收益，设计师开始渐渐受到重视。其实在当时，很多用户体验理论和设计方法的先进程度明显高于当时的工具，但是由于技术的限制，大部分设计师都被困在了“技能产出”（craft）上。
设计师的工具当时由 Adobe 家族 PS 和 AI 主导。Adobe 的这两套产品，本身并不是为用户界面而设计的，Photoshop 是一款图像处理软件，AI 是一个矢量绘画软件。他们用来做 UI 简直就是灾难：处理大量图层造成的混乱，人工调整间距等各种重复枯燥的工作，再加上 Adobe 常见的庞大和厚重，电脑卡机，文件全无更是雪上加霜。工具的不先进，导致一个界面产出的职责分得很细：
产品经理负责收集业务需求，写一个 PRD，比较草地画个原型图
交互设计负责用 Axure 帮产品经理完善细节，并给视觉设计师指导方向
UI / 视觉设计师负责上色，完成最后的 UI 产出
无论你是交互还是视觉， PS + AI + Axure 就是设计师的标配工具。他们几乎统治了我上学和实习阶段的各类项目。
是设计工具促进了角色的变化，还是因为工作需求的变化促进了工具的诞生
上面的阶段一直持续到 2012-2014 年左右，这个阶段出现了几件事：
2010 年 Sketch 诞生，2012 第二版在设计圈开始有比较大的反响，大有取代 Adobe 系列的趋势。
移动互联网的流行，对动效设计有了更高要求。于是大批移动优先的原型制作工具来取代Axure：Principle（基于时间线）、framer.js (基于 coffee script)、Justinmind，Pixate，Invision，XD，AE，Keynote，Marvel 数不胜数。
2014 年交付工具 Zeplin 出现。
2014 年 Google Material Design 第一次提出 Design Language 的概念。
这个时候也是我刚刚去出国读研的时期，记得当时上学期间，我对原型和动效制作疯狂迷恋，上面提到的工具，我全都玩了个遍，还有着自学前端和数据可视化的冲动。以及 Sketch 的出现更是一个拯救人生的存在，它是第一个为 UI 制作产生的工具，在操作上对于 PS、AI 可以称之为革命性的改变，Sketch 一经推出就获得了无数奖项。
如雨后春笋版的 UI 设计工具，让市场变得多样化和并提高了生产力，从而重新调整了大家的分工和职业发展：
动效和原型制作是一个必备能力，你无需做到 production level，但是至少可以表达
Design System 成为设计师的一个 track
交互和视觉合并，一个人可以干的，不需要两个人来干
2014 年真是个神奇年啊，那个时候也是硅谷 08-07 阶段诞生的独角兽的鼎盛时期。你会发现那个时候 Uber Airbnb Twitter Pinterest Facebook 等这些公司的设计师风格自成一体，明显区分于早期大厂的职位划分。视觉 + 交互 + 原型，设计师在 craft 上必须全栈，用户研究的方法到位，有足够的 business sense，有时还甚至加点 coding 的附加技能。如果在 personality 上再有点特点，哇。。。爱的不要不要的。
这里回到标题的问题，是设计工具促进了角色的变化，还是因为工作需求有变化促进了工具的诞生呢？我们来再次回顾，看看 UI 制作的流程：
用户场景分析和问题定义
方案设计
方案线框图
UI设计
原型制作
用户测试
迭代修改
交付
虽说生产力决定生产关系，但我觉得，在互联网行业，在产品开发团队的微观环境内，工具本身的优化和使用者的角色以及他在组织内的关系是相辅相成的，所以我会认为设计工具的发展和抽象的设计文化发展脱不开关系.
另外一方面，我觉得要回归 digital 领域交互设计最开始的定义，设计是解决人、组织、系统和环境的问题，所以“生产”的部分会进一步被工具取代，留下的只有如何帮助人表达、思考和创造的工具。这时期的变化，工具解决的仍然是 UI 效率问题，是通过降低了UI的制作成本，大幅度在 craft 维度帮助设计师提高生产力。例如3、4合并（sketch），原型制作（超多简单好用的产品），交付（Zeplin）。这个过程中第一步被取代就是线框图和切图。
Software is eating the world。
设计文化和工具的关系
设计是一整套 work flow
UI UX IxD 在科技行业内，发展到现在都统称为一个词，Product Design，设计师们的 title 逐步转向产品设计。产品设计师不是因为有了产品的 title 就意味着要和产品经理争风吃醋，去承担过多商业思考和项目管理的工作，而是 push 设计师们能站在产品和系统角度思考问题，让自己的眼界和 vision 有所成长， cross-boundary 地去解决问题 —— 这和设计的 vision 是相通的，也是很多 Figma 周围一众科技公司所推崇的：
I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Figma helps them do that. - Ellen Beldner, Head of Product Design at StitchFix
Figma 的定位也很清楚，”Figma is built for your entire product design workflow.” 几乎在每一个阶段都有它的身影：
探索（Exploration）: Figjam
Figjam : Where the best product ideas begin。Figjam 是最能代表硅谷设计文化的一个 feature：合作。合作不是分工明确你来我往，我发你个 doc 你来看看，抑或是我们具有共同编辑能力的那种，而是“双向奔赴”的深度合作和信任。举几个例子：
19 年年初刚刚跳槽加入新团队的时候，我老板对我说，我不希望我们组是那种你设计，我来review 的形式，我还是希望我们组的设计师可以互相帮助，大家可以通过多种多样的形式集思广益，一起做出一个好的方案。我的 PM 也喜欢约 Jam 的会，有的时候叫上分析师，这种即兴和深度合作，导致这个圈子里的设计师都有很强的性格：勇敢（Dropbox 甚至把 audacious 这种品质放在了第一个，相信我不是字母顺序！），外向，布道，热情，开放，观点强势。
我记得当时在没有 figjam 的时候，我在 20年 疫情刚开始期间组织了一个 14 个人的 design sprint。就是用 Figma 做了一个 template，大家通过上传草图，输入文字，用 sticker 投票，完成了三天的 design sprint。Sprint 做完后，这个template 又被别的组拿去复用。
疫情后来又催化了越来多的场景，随后 2021 年4 月 Figjam 诞生了。它其实就是一个白板工具，让人即兴地交流想法，甚至开会。例如用它使用 crazy8s 的方式进行脑爆，各种各样的 workshop 等等。“People are simply looking for a space to share ideas and connect.”
制作 （Craft）：Auto Layout 还有更多
虽然 Figma 的网红和拓展性，足以让他画上很多故事和想象力，但他的 positioning 迄今为止，仍然是非常 sharp and crisp 的 Figma: the collaborative interface design tool. 除了协作之外，别忘了剩下两点依然重要：
我是做界面设计的
我是一个工具
在 UI 效率和生产上，Figma 算是站在了巨人的肩膀上。它的整体布局，产品形态和设计思路在 Craft 层面和 Sketch 几乎是一样的，我们不得不承认 sketch 在 UI 制作上真的是革命的存在。让我们对比一下从 PS 到 Sketch 到 Figma的变迁。
但是 Figma 在这一维度抓住了 sketch 没解决的问题，并提升了很多：
为 Responsive design 服务的 Auto Layout 和 Constriants:
布局问题是一个非常痛的问题，resizing designs 一直以来是设计师手工活动，那个时候拼的是谁手活细，谁更能 pixel perfect，并且这种手工操作还会影响设计的响应式，拓展性很低。2019 年 Figma 推出了 Auto Layout，并与之 pairing 的 feature 还有 Constraints.这两个功能让设计师的精准布局不再是问题。并且不需要对浏览器和 CSS 有深入的了解的设计师也可以通过自己探索找到使用方法。这是我最爱的两个创新的 feature。这篇文章讲了 Auto layout 第二次改版的心路历程，值得一看。Behind the feature: the making of the new Auto Layout
Design system 的一系列超越 Sketch 的新功能：
Variants，Properties 等等，都让 DS 的制作变得容易了很多。Variants 和 Properties 其实就是在 sketch 创造的 symbol 的基础上创造了两个实体，让复用过程更有效率：更易浏览，不需要在平铺的 list 去寻找 symbol；可以做局部修改，但不 touch 整个 components，切换不同的 variants 时样式会被保留等等。其实你发现了没有，Figma 在做 feature 提升设计效率的时候不是用户想要做什么就做什么，工具有灵活度，给用户开了口子，但也有限制，能够看到她follow 的一些设计原则：
更自动和程序化的 auto layout 让 UI 更加 adaptive，更有拓展性
DS 内构建的多层实体和继承关系在提升效率的同时，也保障了 DS 本身一致性的目标。
所以不懂设计原则，也做不好一个设计工具啊！
原型（Prototype）：For animation and user test
Figma 在原型制作上并不出色，但是别忘了制作原型一个很大的目的是用户测试啊。早期没有 Figma 的时候，我非常喜欢用 invsion 做原型，即使它很挫，做不出非常高质量的交互，但是它简单粗暴，可以快速 demo 一个整体的流程，并且它是 web based，user researcher 也比较好操作，可以把链接直接发给用户测试，并且也可以通过 usertesting 的工具进行 unmoderated testing。之前我在的一个团队还用过一个叫做 invision sync 的工具，也是够古早的，就是你的 sketch 文件可以批量导出并 sync 到 invision 云端，这样你的原型就不会乱掉。现在想起来，这个问题在 Figma 上完全没有问题，你的 artboard 就是你的 assets，不需要再导出到另外一个工具和平台，也不会有 flow and UI 不匹配顺序乱掉的问题。
早期的合作画风，还有很多设计师，把这种组合打包成best practice 在网上分享，殊不知今日早已不成问题
一个有意思的点是，我第一次听说 Figma 觉得他是一个原型制作工具。现在发展成了一个 all in one 的设计工具。如果退回早期，sketch 也是这样，当初觉得 sketch 只适合画低保真，结果 sketch 统一了视觉和交互。
多职能分享和创作 (Share, view and co-create)
As Google Docs did for word processing and GitHub for code, so Figma is doing for design.
这是 Figma 一开始的设计理念，浏览，分享，共同编辑是基本功能，类似于 Google Doc，这个功能的存在对于产品设计中的问题简直就是降维打击，例如设计师不需要多次导出 pdf，团队间互相传阅设计方案只需要一个 link。所以 Figma 的产品思路在 DNA 上就是为 product team 服务的。但这不代表这么做是 push 所有人都成为设计师，而是把 Figma 当作产品设计的一个 single source of truth, 即使遥远的 stakeholder 的反馈也可以直接落到设计师一侧，这更有利于设计师话语权的提升。
其实在这一点上就能看出 Sketch 和 Figma 的区别，Sketch 也是支持协作，但他在协作的解决方式不同：
Mac only 的 native 的 app 指挥 UI 创作
文件管理空间基于网页端，用来管理设计资源和项目
首先值得肯定的是，Sketch 能够严肃地考虑设计项目资源管理，我觉得非常好。把创作工具和文件管理分开，也未尝不是一种思路。目前现在 Figma 的文件管理，项目管理，人员权限，组织划分也做得很糟糕。只要上云，势必要考虑资源管理这个 topic。而且目前 Figma 在资源管理上也比较投机取巧，和 UI 创作的面板缝合地比较机械，只是放在了一个导航上，找项目是要不停 switch context，对于大型组织的权限和身份也没有捋地很清楚。去年没有离职创业的时候，在公司还见到过自己的项目栏突然多了另外一个团队的项目就很吓人。
但是，Sketch 在坚持 native 这件事情上就比较拧巴了，如果坚持 native 性能更好，为什么不把 workspace 也做成 native 呢？两个平台强行隔离，有点儿“想做 web 但是又怕做成和 Figma一样”的傲娇。以及 sketch 把权限上的控制看得很重要，并重视 DS overrides 的控制。下图是 sketch 官网的对比，所有在 sketch 视角里 Figma 不如它的点本质上都来源于 sketch 是原生，Figma 是 web。从这角度讲故事其实就比较牵强。
项目和资源管理
上面提到了 Figma 在项目管理上其实做的并不好，但是他在设计系统的管理上太优秀了！一方面这几年 DS 大热，不少大型企业纷纷做起 design system，Salesforce，IBM，Atlassian，微软等等，每一个产品设计团队势必都需要有一个专业的 DS 团队来维护。DS 在组织架构层面经常是一个类似于中台的小组，Figma 架起了DS 设计师和做业务设计师的桥梁，基于云的实时同步，保证了设计的准确性。同时在引用组件时的实时 reference 也解决了很多效率问题。
设计师的成长，产品设计行业的发展
很多观点会认为，是 Figma 带来了协作，把设计师 bring to the table，让设计师的话语权更高，但是从一个在硅谷职场上一路走来设计师的视角来看，一个工具还不足以去改变和影响市场。我看到的是设计师前辈的发声和 design leadership 的努力，还有设计师在每一个 product team 不断积累的信任。跨职能的合作文化让公司和组织更加健康充满创造力，是整个产品设计行业的进步：
Eng, Design and Product 三种角色在产品开发流程中稳定的 “Squad” 的形成 —— 这个是独角兽公司的典型结构，在这种结构下跨职能团队彼此渗透，互相影响决策，信息流转的速度很快。Figma 早期共创的客户公司很多都是以这种方式来开展产品研发的。EPD 不存在提需接需流水线文化，而这种紧密的合作文化，除了非常小的敏捷团队，大部分中国互联网企业还无法企及。https://www.designbetter.co/principles-of-product-design/lateral-design
设计师合作方能够和设计师一起，培养良好的设计文化和设计流程，不断布道设计的“意识”并提升设计生产力 —— 这个简直太对设计师的胃口了，从设计师的职业发展来看，到最后都是产品思维和文化上的东西。这种风气，的确具有欧美文化特色，它给了设计师足够的舞台彰显个人魅力和观点，颇有个人英雄主义的味道。早期 invision 在社区和设计影响力上也做出了很多努力，他们在 2016 年拍摄了一个设计纪录片《Design Disruptor 设计颠覆者》，邀请了硅谷著名的 Design leader ,VC (John Maeda，Julie Zhuo, Jason Mayden 等一众网红) 去谈一起去谈用户体验和产品设计在公司中的角色转变，以及我们应该怎么理解 Design。
Figma 和这样的产品团队一起成长，互相促进，加速了这个过程，让产品设计，无论从工具还是方法都变得更加包容，在组织中更加重要。
如何看待 Figma 的成功
最近在找 PMF 的过程中，我本以为用户的场景和需求会非常模糊和抽象，需要反复定义，反复研究，但是迎接我的都是比较具体的问题，这个是我始料未及的。在做开源和技术产品之前，我做过办公协作也做过广告管理，有很多需要研究的 offline 场景，其中难点是对他们的 job 一点一点抽丝剥茧，去验证我们的 PMF 是什么，我们终其本质“应该”要解决的是他们什么问题。但在2 Developer 这里，他不是不模糊，不需要分析场景，而是低于我最开始的预期：场景也没有我想象地复杂，复杂落在了解决方案层面。能把一个技术的问题解决好，市面上也没有很多标杆，无论从技术本身，产品功能，还是开发者体验，有非常大的空间去提升。所以当前阶段解决方式就变的尤为重要，我们必须要去解决那些看起来很恶心的问题，去做些脏活累活，不要总想着高屋建瓴。
我最近也渐渐意识到，一个 0-1 的产品在市场获得成功，场景的拓展，解决方式的创新，需要至少占一个因素，并做到远远超出竞争者的程度，而不是两个都占，但都做到百分之五六十。
不变的场景 + 优化的解决方案：它的爆发和增长是十分迅速的，因为你的 market 已经被验证了，要做的只是 optimize existing solution，然后按照科学的方法循序渐进就可以找到 PMF。但是，这种组合很容易受到新场景的降维打击，最后很有可能就变成了这个问题在某个moment就变得完全不需要解决了。所以保持市场敏锐是此类团队需要关注的事情。
新的场景 + 可以过渡的解决方案：这个时候侧重点不是你的解决方案要多优秀，而是去验证这个场景的合理性。它的过程会很漫长，新的场景也会有风险。它可能会因为早期没有市场而夭折，也可能有一天市场准备好了，且配套的解决方案刚好还不错，你幸运地就成了第一个吃螃蟹的人。
比较糟糕的组合是，不强的新场景 + 比较局限的解决方案，且优化的解决方案还不能覆盖住旧场景下的已知问题。这种情况经常出现在一些具有实验先锋精神的团队，他们或许有自己的观点和哲学，但是在不强的场景去提供解决方案犹如押宝一样，如果这个解决方案还非常不幸的只针对了你定义的场景和问题，那风险就更大了。“我知道你的思路和你的方法，但是我就是用不了，你无法帮我解决十分现实的问题。”这大概是很多 end user 的感受。
Figma 的成功在哪里呢，是第二种，配套的解决方案的优化也就成了四两拨千斤，针对 Sketch 的单个痛点各个击破即可。他很幸运地验证了“协作”场景的成功，但这个幸运，不是偶然，是对用户和行业的深入了解，以及对行业走向的判断：什么是更好的设计文化，怎样才能让设计更好？合作，信任，yes and 的即兴，不设限的持续创造，让每个人都可以自由表达，这不是 Figma自己提出的，而是和优秀的设计师和产品团队一起创造的。
场景挖掘和验证都来源于一个出发点，就是一个构想的愿景，然后伴随用户和整个行业成长。
对我们的启发
除了 Figma 的成功，还有几个引发我们思考的点：
第一，设计工具都这么简单了，如果 production 的工作会进一步被工具取代，设计师以后在哪里？国内的设计行业普遍有这么几个标准答案：做 Design System，因为这是最基建的东西，没有他什么 UI 都做不了；体验量化，因为这个可以非常具体且务实地证明设计的价值。
但是我们回到我们 20 年前计算机前辈和交互设计前辈对于设计的定义和共识：Interaction Design is the practice of designing interactive digital products, environments, systems, and services. 是不是这两点都和我们的美好蓝图所背离了呢？
我记得在十三邀采访傅高义的一期，有一句印象深刻的话，“我并不满意过去一段时间美国的政治学和社会学领域发生的事情，在过去的二三十年间，这两门学科，有过分科学化的倾向，过度使用定量研究的方式，找到上千的 sample，得出这个和这个相关联。但是这样做根本不够，这么做是无视研究对象的现实语境，无视他们深处的社会背景，无视他们拥有的历史记忆，所以我更喜欢的那种研究方式是 really know people， 并思考他们更大的语境。“
第二，由第一个问题延伸，中国的 Figma 在哪里呢？
我不责任地认为，中国的产品设计行业依然在发展中，从 DS 以及体验量化这种备受重视的趋势其实就说明设计师本身与 cross functional 团队的割裂。协作也只是机械的分享、评审和提供反馈，在当前环境，照搬 Figma 具有强烈文化属性的功能是行不通的。有几种思路可以尝试的思路：
仅搬运 Figma 在设计生产力上的功能，把产品体验做到中国行业第一，但是可能市场会比较小。
完全立足于当前阶段的中国用户体验方面的具体需求，解决阶段性的问题（在 PLG 的语境下非常像 KA打法），但是容易被降维打击。就好比 Figma 当时共创的公司是 Oracle 而非 Airbnb 一样。
找到下一代的团队，思考这个问题：我们想把中国的用户体验带领到什么方向，我们又觉得什么是适合中国本土团队的产品设计方法、产品开发流程和设计文化，又是什么样的团队可以和我们设计的工具一起成长？
第三，怎样才能像 Figma 一样保持跟优秀团队一起成长，推动设计的愿景呢？
市场的焦虑让我们想要从过去的成功经验窥探出一丝规律和捷径，但是对于用户的洞察是这个行业的基本哲学，唯一方法只有下苦功夫地一点一点地去了解用户以及他所经历的故事吧。引用傅高义的话 “really know people， 并思考他们更大的语境。”
希望中国科技领域的产品设计和文化可以发展得更好，让我们都有能力和有动力去思考并创造 “big picture” ：the aspect of designing for interactions — people, organizations, cultures, contexts, and systems.
相关历史文章
正文结束
我是一名在硅谷/北京的产品设计师 - 挂面(年少的我一面试就挂!)，是字节、Dropbox Growth、Yahoo、CMU Alumni。目前在创业，热爱表达，日常喜欢思考抽象和哲学。努力维持理性与感性的平衡中 :)