1. 实操内容配套25个视频，扫码突破操作难点。

2. 充分的知识铺垫，让你知其然亦知其所以然。

3. 处处融入的设计思维，助你提升核心竞争力。

4. 实用Tip，讲述设计师在工作中的样子。

5. 轻松的行文，丰富的配图，打造流畅的学习体验。

Figma是当下备受关注的云应用UI设计工具：它基于浏览器，因而不受操作系统的限制；它上手容易，可以说Sketch的使用者皆能轻松上手Figma；便于合作共享是它的独特优势。本书通过多个设计案例讲解软件技能，并配有教学视频，从Figma操作的方方面面，延展到设计方法与思维能力。本书第1、2章讲Figma的基础操作及案例演示；第3、4章讲Figma 协作功能和界面设计细节，属于UI设计系统进阶知识；第5、6章为设计思维提升的内容；最后为QA和优秀作品展示。

本书结合了作者多年的UI设计行业经验，内容由浅入深，非常适合UI设计师及有志进入UI设计行业的读者提升技能，也可以作为一本UI设计师日常的工作读物，方便随时查阅，快速解决实践中的问题。

静电，SketchChina中国社区创始人，新锐UI设计工具Sketch在中国的首批推动者；静Design.FM主播，京东智能;东课堂嘉宾讲师，SketchMeetup特邀嘉宾，著有热门图书《Sketch十Xcode双剑合璧》《不一样的UI设计师》。从2015年开始，静电在网络上发表UI设计及行业相关的教程及文章，言语诙谐，观点犀利。随着移动互联网热潮的到来，被越来越多的设计师熟识。2018与2019年，被墨刀授予产品原型设计专家称号。

01 我们要成为怎样的设计师

01_01风口不在，UI 设计师如何自我定位……………………………………………… 2

01_02你为什么成长那么慢？什么是 UI 设计师的核心竞争力 ………………………… 6

01_03UI 设计师必备技能分析……………………………………………………………11

01_04UI 设计师的思维和方法论…………………………………………………………19

02 从软件开始放飞自我

02_01如何选择适合自己的 UI 设计工具 …………………………………………………25

02_02Hello 新朋友—初识 Figma ……………………………………………………… 29

02_03Figma 基础操作详解之界面篇……………………………………………………34

02_04Figma 基础操作详解之工具篇……………………………………………………39

02_05Figma 基础操作详解之菜单篇……………………………………………………58

02_06Figma 中的特色插件………………………………………………………………88

02_07那些让你大呼好用的 Figma 小技巧…………………………………………… 103

02_08界面中的约束与自适应布局…………………………………………………… 108

02_09Figma 交互功能详解…………………………………………………………… 117

02_10Figma 如何与 Sketch 及 Adobe XD 结合使用 ……………………………… 133

02_11使用 Figma 完成你的第一页 UI 设计稿……………………………………… 137

03? Figma 协作功能解析

03_01在 UI 设计工作流中活用 Figma 与产品经理、需求方沟通…………………148

03_02UI 设计师如何使用 Figma 与开发工程师无缝对接 ……………………………151

03_03使用 Figma Mirror 快速预览 UI 设计稿………………………………………155

03_04挽回你的“第一稿”：Figma 设计稿版本管理功能…………………………159

03_05断网怕不怕？将 Figma 设计稿保存为本地文件 ………………………………161

04 Figma UI 界面设计细节进阶

04_01Figma 图标设计实战：线性图标与 Big Sur 轻拟物图标绘制………………165

04_02版式设计练习：UI 设计的核心能力……………………………………………191

04_03UI 界面中的金刚区图标：Tab 栏图标 …………………………………………198

04_04启动页设计：用户的第一印象很重要…………………………………………204

04_05分清重点：应用首页设计技巧…………………………………………………209

04_06UI 详情页设计技巧及设计目标…………………………………………………214

04_07用户个人中心页设计……………………………………………………………219

04_08万物即列表：从列表设计强化自己的设计能力………………………………221

04_09插画：为 UI 界面锦上添花的技巧 ………………………………………………226

04_10“原子化”设计思路：用 Figma 制作设计规范与组件 ………………………228

05 iOS 与 Android 人机界面设计指南—以不变应万变的设计秘籍

05_01日渐融合的 iOS 与 Android 设计 ………………………………………………235

05_02内容至上：设计原则解析………………………………………………………238

05_03屏幕（密度）精度：开始设计之前首要关注的内容…………………………241

05_04从“亮色模式”到“暗黑模式”: iOS 13 新增规范讲解……………………246

05_05小组件 Widget 崛起：iOS 14 设计规则解析…………………………………254

06 从细节到整体：以产品和用户为核心的设计思路

06_01以品牌眼光做应用设计及展示…………………………………………………262

06_02创造触动人心的作品展示页的 13 个步骤 ………………………………………265

07 静电的 QA 时间

08 后记

09 附录

09_01优秀 UI 作品展示 …………………………………………………………………281

09_02本书软件来源及合作伙伴………………………………………………………290

09_03作者爱用的设计工具推荐………………………………………………………291

推 荐 语

静电老师对新的设计工具总是能很快跟进并深入钻研，帮助一线设计师们尽快发挥出新工具的生产力。更难得的是，静电老师没有忘记加强对通用设计原理和理念的讲授，帮助读者做好适应设计行业变化的长远准备。

纪晓亮，站酷网总编

Figma这两年越来越火，能顶着 Photoshop 和 Sketch 的压力，跻身主流设计工具，足以见得其高效性和便携性，它强大的协作功能更是赢得设计师们的拍手叫好。如果你想尽快上手这个新兴的设计工具，这本书将成为你的钥匙。

程远，优设网内容总监

“降本增效”是产品经理的核心价值之一。这也是产品经理喜欢研究、体验各种工具，来提高项目协作中的沟通效率、协作效率的原因。Figma就是一款值得产品经理去研究的工具，静电老师在本书中详细讲解了这个工具的必备核心知识。

老曹，起点学院、人人都是产品经理社区创始人兼CEO

Figma不只是工具，更是思维方式；在线协作不只是将文件放在线上，更能极大地提升集体工作效率、释放创造力。

吴卓浩，Mr. HOW AI创造力学院创始人，

曾任Google、Airbnb中国、创新工场设计负责人

Figma是深受全球设计师喜欢的一款新的在线设计和协作工具，能提升产品设计的协作效率和流畅度，达到全链路的统一平台化，也是我们墨刀追寻的目标。静电老师作为墨刀官方认证的产品设计讲师，一直致力于设计知识和理念的传播，也推动了设计工具的进化和发展。这本书中包含了作者的大量干货知识，非常值得各位设计师和产品设计者阅读。

张元一，墨刀创始人兼CEO

随着时代的发展，设计师身边的新工具越来越多，如何在这些纷繁的工具中找到适合自己的，同时兼顾当今更新的技术、更快速的设计流程协作需求，是值得设计师考虑的一点。静电的这本书在讲解新工具Figma的同时，结合了自己的经历和对UI设计的观点，让我们学到工具之外的很多设计理念，非常值得设计师一读。

“乌鱼说”，知名设计自媒体

新的生产力工具意味着新的机会，静电老师总是能在第一时间竭尽全力地给设计行业带来新的分享——这不只是一个设计师的态度，更是一个教育工作者的态度。用“新”的思维追逐教育，把一线的经验分享给每一位求知者。从Sketch到Figma，好的内容值得拥有。

王晓苏，CCtalk 运营总监

设计在我看来是一份非常美的工作，能将人性、人心的真、善、美显现出来。静电把自己十多年的时间投入进来，不断思考和精进。这本书把关于设计认知的问题讲解得特别透彻，有非常多的实际案例，值得反复阅读。更重要的是，设计师需要将设计技能与产品真正结合起来，推动产品进步，并产生价值，这也是一个优秀设计师的真正魅力所在，而这种能力，也在静电的实际工作中得到了体现。

陈芳，中文在线;汤圆创作项目总监

新工具背后所折射出来的是整个互联网领域以及设计领域对于流畅协作的渴望，减少不同职位之间协作和沟通的成本，让工作和产品开发效率更高。设计是用来解决问题的，全新的设计工具让解决问题的效率更高，把更多思考的空间和时间留给设计师，让设计师真正专注于产品本身的价值。作为之前一起共事过的同事，静电老师真正把自己的设计能力融入了产品之中，让设计为产品和用户价值服务。这本书也是静电的倾心力作，非常值得广大设计师一读。

Rongrong，ThoughtWorks体验策略咨询

作者介绍

静电，SketchChina中国社区创始人，新锐UI设计工具Sketch在中国的首批推动者；静Design.FM主播，京东智能;东课堂嘉宾讲师，Sketch Meetup特邀嘉宾，著有热门图书《Sketch十Xcode双剑合璧》《不一样的UI设计师》。从2015年开始，静电在网络上发表UI设计及行业相关的教程及文章，言语诙谐，观点犀利。随着移动互联网热潮的到来，被越来越多的设计师熟识。2018与2019年，被墨刀授予产品原型设计专家称号。

静电对互联网设计产品思维的结合有着深刻的理解，倡导感性设计与理性思维的融会贯通。曾在eNet硅谷动力、中文在线、LavaRadio、365日历等多家知名互联网企业担任首席设计师及管理职位，2016年年底创办北京境地创想教育科技有限公司，致力于互联网UI设计行业在线教育与内容传播。

设计行业的小伙伴常说，设计师吃的就是“青春饭”。但静电却凭借着十几年的一线互联网设计行业经验，一直保持着高质量的教程产出。现在静电转型到设计类教育行业，各位设计师小伙伴评价其课程为“三观正”“干货满满”“启发性学习”的典范。其线上课程《静电的UI设计教室》目前已经开设二十多期，并一直坚持超小班一对一辅导的教学模式，深受学员的好评。

也许你是静电的老读者了，或者刚刚开始接触UI设计这个行业。这都没关系！希望这本书能给现阶段的你更多的帮助，在你羽翼日渐丰满的过程中，助你飞得更高更远。

移动互联网设计领域的“战国时代”

到这两年为止，移动互联网已经不再是一个新鲜的词汇了。从2006年开始正式进入互联网设计领域以来，我的身份从“美工”“网页设计师”“UED设计师”“广告设计师”，一直进化到现在的“UI设计师”“全栈设计师”。这些名词也代表着互联网设计领域的一步步进化和成熟。

可能很多小伙伴还不知道，在2012年或2013年之前（可能更晚），“UI设计师”这个词是多么让人新鲜感十足。当时跟互联网沾边的设计师，大部分还在做着传统的网页设计及客户端设计。虽然中国的3G网络在2008年已经开始商用，苹果的iPhone 3GS已经在2009年发布，但那时候，基于移动互联网形态的产品还以手机上简陋的WAP网页为主。

所以，你可以把这些都理解为暴风雨前的平静。而在这之后，仿佛一切都走上了快车道，你会发现所有的公司都开始做一种叫作App的东西，你手中的手机也从N年前的诺基亚换成了iPhone或Android手机，你开始借助3G网络，在一个个的手机应用中流连忘返。当万事俱备的时候，互联网的从业者发现，手机已经代替传统的PC，成为人们的必需品。

于是，之前的“网页设计师”，纷纷开始尝试在手机上展示他们的设计。但在那时，我们还在用着Adobe公司的“网页设计三剑客”，用且仅用着Photoshop来实现这一切。可是，随着移动互联网让所有人的节奏越来越快，传统的Photoshop已经不再能满足设计师快速开发和迭代移动端应用的需求了，而Photoshop单画布的设计模式也显得越来越落伍。

设计师们需要在一个界面上放置所有的手机界面，观察它们的统一性、内部的逻辑，更快地输出开发所用的素材。所以，打破Photoshop一统天下的契机就这么来了。现在广为人知Figma UI设计技法与思维全解析 二校 文前.indd 5的Sketch也就是顺着这种爆发性的趋势成为“网红软件”的，它快速、轻便、易于上手，被越来越多的UI设计师接纳，发展到现在，已经成为UI设计行业里大家必会的工具之一。从2015年、2016年开始直到现在，可以说是各种第三方UI设计工具百花齐放的时代。Adobe公司为了应对这种趋势，推出了Adobe XD，基于画板模式的简单设计工具。而第三方工具则数不胜数，除Sketch之外，Affinity Designer及各种基于云的设计工具开始随着这种趋势井喷式出现。

一时间，各种“究竟应该使用哪种工具来做UI设计”的讨论层出不穷，有人说Photoshop要“死”了，未来是Sketch的天下。大部分却说这绝对不可能！“保守派”与“改革派”设计师之间的矛盾也越来越尖锐。可见，很多人的思维中都是有“保守”倾向的，人们不愿意去改变已经熟悉的东西。

但是移动互联网的潮流是如此汹涌澎湃，让设计师不得不开始在思维上去接纳这种“新鲜的事物”，不管是主动的，还是被动的。新软件层出不穷，我们之前的认知开始出现混乱。究竟哪一种才是我们的心头好呢？ 没人能说清楚—直到现在，甚至未来很长一段时间里。

我们不妨接纳这种“战国时代”的混乱局面，顺便把自己的思维调整一下，朝着更高的目标进发，比如如何借助这些百花齐放的工具，最终达到我们的设计目标。所谓“条条大道通罗马”，也许做出令人心仪的设计稿比讨论该用哪款工具更值得被称赞。你喜欢哪款设计软件，用就好了，Photoshop这么多年依旧活得好好的，Sketch也是，而新工具依然层出不穷，比如这本书中要讲的新UI工具Figma。

Figma是典型的“云应用”的代表。在这本书中，我们重点来讲解Figma及与之相关的UI设计技能。

云应用：趋势？机遇？还是昙花一现？

打开网页就能用的应用现在已经越来越多，当然这也不是什么新鲜事儿了。早在2010年，Google就推出了自家的Chrome OS，这是一款完全基于网络的操作系统，如下图所示。用户打开网页就可以进行工作，无须安装烦琐的操作系统与各种客户端应用。虽然在2010年，这个概念还有点过于超前，但是这种理念带来的效率软件革新却没有停止。比如笔者当前正在某在线文档网站来撰写书稿，一切基于云来保存，而不是像之前一样，用Page或者Word建个文档，把自己的书稿放在计算机的本地硬盘里。

而设计软件这几年也顺应这个趋势，开始齐刷刷地上“云”。我们来聊聊这两年UI设计工具的进化吧！Sketch不顾一切地在开发和推广自己的Sketch Cloud产品，广受Windows用户欢迎。号称Sketch狙击者的Adobe XD则在最近的一次更新中设置未付费的用户只能将设计稿保存在云中，无法在本地进行保存。而现在要给大家介绍的这款UI设计工具Figma，则将Sketch的设计功能完全搬到了浏览器中，用户打开浏览器就可以体验和Sketch几乎一模一样的操作模式，包括各种菜单、各种图形的渲染，在Figma里都表现得近乎完美，如下图所示。

与此同时，国内的墨刀、在线设计海报的创客贴，还有一系列同类型的工具则一直是这种“云”模式的践行者。完全贴合人们对本地化软件的操作习惯，便于分享和多人协作，无须下载客户端，这些都成为“云”工具的王牌撒手锏。设计师在Figma、墨刀等工具中做完设计稿，直接将链接复制，就可以发送给客户和需求者查看，需求者可以直接在设计稿上标注并反馈意见，甚至可以邀请多位项目成员一同完成项目。这无疑让设计和开发的效率获得大幅度提升，吸引力着实不小。

可以说，一些较轻量级的应用已经或多或少地完成了用户习惯的培养。而在设计这种较重的应用中，用户使用习惯扭转的速度则会相对慢一些。很多设计师担心，公司有保密措施，将设计稿传到云上会被泄露。还有人则担心万一断网了，自己就无法工作了。确实，这些担心都有各自的道理，也很容易理解。而Figma则为了让用户担心少一点，提供了可以将Figma 网络上完成的设计稿保存到本地的功能，另外一些工具也或多或少在这个方面做出了妥协。

笔者还是比较乐观的，工作习惯的改变总是要花不少时间的，特别是用户自身认知的改变，并不是一件容易的事情。但是不可否认，“云应用”必然会成为未来的趋势，不管你是否喜欢，它现在已经到来，而且会持续发展下去。在效率和协作高于一切的时代，谁能抗拒这种吸引力呢？

作为设计师来说，纵使你现在可能因为工作流程等客观原因无法马上在云端工作，但是不妨先了解一下这种先进的工作模式，为今后的趋势做好准备。而新的UI设计工具Figma则是一个不错的选择。