未回传不给出款 Figma设计指南!15000 字带你了解这款设计神器
![](http://419ai.oss-cn-beijing.aliyuncs.com/2023/07/20230726191152761.png)
Figma 自 2016 年以多人实时在线协作的界面设计软件出现,很多人在使用过后认为 Figma 是来自未来的界面设计软件。由于 2020 年疫情原因,越来越多人在家隔离办公。Figma 也适逢机会一举超越了 的地位,在 UI 设计、原型设计、头脑风暴、用户流程、设计系统、设计交付、版本管理等名列前茅,成为当下最流行的多平台 UI 线上协同设计软件。
在我研究使用了一番 Figma 后表示真香,藉此开发了一门免费分享课——《Figma一站式设计交付》,课程主要从4个章节简要地讲解Figma的一站式设计交付:
希望大家能从中深刻了解 Figma,在日常设计中进一步提升设计效率,优化设计流程。
前期的下载安装,注册账号流程都相对简单,没有难度的就先跳过了。至于有同学终究会问有没有中文版,当然也有汉化插件,还是建议能用英文版的就英文版,来去就那些固定的英语单词。不废话了,快来一起进入 Figma 的世界吧。
认识 Figma
根据 用户体验工具调查报告显示,Figma 在国外有逐渐攀升的趋势。Figma 的用户量已经反超了 ,一举在 UI / / User Flow / Hand Off / / 拿下排名第一 , 在 中 排名第二。
回看国内同类型产品的情况,已经有多家厂商开发了对标 Figma 的工具,如蓝湖 (已完成 C 轮融资)、即时设计(优化做得比较好)、Pixso 等。
另一侧是 Figma 交付类的插件工具,腾讯也推出了 设计协作平台,覆盖了产品经理、设计师、工程师协作需求,助力团队提升协作效率、有效管理和使用设计资产,帮助大家更好的去完成设计交付。和 类似的产品还有 、Heron、。
Figma 于 2016 年发布首个版本,19 年推出品牌宣传视频,而 2020 年的疫情让这类云协作的产品迅速崛起,接下来先看一下 Figma 官方是怎么去宣传的:
通过视频我们大概能了解到一些:避免文件传回传、团队多人协作、云设计协作交互视觉、直接交付给开发、及时的评论反馈。
总的来说 Figma 实在是有太多优点了:多终端多人实时协作、从 过渡无缝 UI 设计不卡顿、独特的矢量网格、类 盒子的 、原型交互、设计系统组件库灵活高效、版本历史管理、实时讨论、实时分享、无需担心插件版本,Figma 涵盖了如此多功能,是一个设计+社区的综合体。(社区后面介绍)
设计效率这件事很难用具象的数据来传达,只有你亲身体验一番才叫真香。为了更好的描述 Figma 在整个过程中怎么提升设计效率,在此简单的举几个例子:
1. 对设计流程的提效统一
在使用 Figma 之前:产品策划团队一般用 Tapd、在线文档、原型图等描述需求,交互用 XD、 等梳理设计交互图,视觉同学用 PS、 等完成设计,最终以又以效果图、 等交付给产品策划审阅定稿,最终 等交付工具交付开发。
在使用 Figma 之后:情况就可以完全不同了,从交互设计到视觉设计,最后到策划审核和设计交付都可以在 Figma 上一站式完成,多人实时协作发挥了巨大的作用,更加敏捷了。
很多团队可能交互用一个工具,视觉用一个工具,各司其事不碍事。又如组件和设计规范等可能觉得组件是统一依赖视觉同学就好,交互稿不需要符合规范,所以交互同学不用组件,组件、规范的概念对交互不是重点。但其实可以相互作用,到后期交互可以直接套用视觉组件直接搭建页面,效率也是有所提升。
2. 交互动效 Demo 的高效
在使用 Figma 之前,可能会由 转向 After 、XD 等软件制作动效,如果是 流则会有更多的选择可以导入 、、、 等工具, 和 在动效设计上都是一个不错的选择。
在使用 Figma 后,可以在做完视觉后直接做高保真的交互 Demo,一定程度上避免了不同软件的学习成本,提升了图层元素、效果、源文件等转换效率。此外,Figma 的组件变体还支持做交互状态的变化,大大地提升了做交互 Demo 的效率。
例如,给父组件 Close 添加一个点击事件响应关闭浮层的操作,无论你是居中的弹窗,还是底部画出的,乃至是右侧画出的,只要在界面的浮层中使用到 Close 的组件都可以响应关闭浮层的交互动效。
3. 更高效自由的组件修改
例如需要构建 3 个不同的按钮组件:
没有组件的概念,只好分开创建 3 个按钮(3 种颜色、3 个文本、3 个形状)并且三个按钮之间 文字、颜色无规范关联,圆角独立设置,宽高非自适应。
虽然有组件的概念,但是还是逃不过创建 3 个按钮组件(3 种颜色、3 个文本、3 个形状)并且要在 v69 版本后的文字和颜色才可以独立设置,三个按钮组件的圆角在设定后子组件不可独立修改,配合 的能做单向的自适应拉伸,3 个组件为独立不关联的组件,互不影响。
Figma 得益于原子化的样式,只需要建立 2 种文本样式,3 个颜色、0 个形状,通过建立 1 个基础组件就可以把三个按钮关联归一。其中文字和背景边框等样式可以独立设置,按钮的形状可以直接交给圆角独立设置,配合 可以做到完美宽高自适应。
当然这里例子难免有的同学会觉得有点极端了,真正创建按钮的组件还是应该创建成 3 个独立的组件。只是能从这个极端例子中看见 Figma 的强大的高效自由组合。
建立一个基础组件:图标+文本+背景。在子组件中,可以自由的设定字体字号、填充颜色、边框颜色、效果样式、圆角样式等,可根据需要决策显示或隐藏图标。
通过一个基础组件控制不同的实例,不同的实例又保持高度自由的子特征属性。
4. 的高效
列表设计是 UI 界面常见的一种,常常在调整的时候会牵连很多调整操作。例如:
:没有组件的概念,所以只能傻傻的干了。首先删除图片,左移文本,删除 2 的文本,调整居中,删除第 4,调整第 5 到第 3,调整第 3 到下面。主体操作就有 7 步之多。
:分别创建图文 3 行、图文 2 行、纯文组件,框选 345,调整位置,调整第四,整体也有 6 步左右 3 个组件。
Figma:配合 只需要创建 1 个组件,然后对子组件进行删除图片,删除文本,调整顺序即可,主体操作大概只有 4 步 1 组件。有了 的加持,组件可以自由地删除(隐藏)元素,而后会有自动布局的效果(自动跟随、对齐)。
Figma 在设计上是基于前端的布局实际理念,配合 使得页面元素的堆叠排列更为自动化,可以在组件内外自由删减隐藏元素并且自动调整布局。
5. Figma 更透彻的原子设计
在化学中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。2013 年前端工程师 Brad Forst 提出的原子设计方法论作为指导。
方法的本质其实就是将页面拆解为最小元素(原子),然后原子可以演变成分子,分子通过多维度的组合形式成为组织,再到模板,最终生成页面。
原子(Atoms):在界面中以「元素」的形式存在,例如文字、颜色、图标、效果样式等;
分子():原子、分子排列组合构成了组织,在界面中多以「组件」的形式存在,例如按钮、导航、标签、弹窗;
组织():原子、分子、组织排列组合构成了模板,在界面中多以「模块」的形式存在,例如:列表组、卡片组、入口组等;
模板():原子、分子、组织排列组合构成了模板,在界面中也称为「原型图」,例如资讯原型,列表原型,详情原型等;
页面(Pages):将实际内容(图片、文章等)放置在特定模板内,就成了高保真视觉稿。
Figma 和 在践行原子设计理论上做对比:
文本样式
Figma 无需考虑文本对齐和颜色的组合,此外行高支持百分比设定
则需要枚举对齐、颜色各异的情况,过于冗余
填充和边框样式
Figma 可以在文本、填充、边框中自由调用颜色样式
则需要在 v69 支持 Color 后才能通过颜色变量统一管理
效果样式
Figma 可以创建图层样式进行复用统一管理
而 没有样式统一管理的概念,只能靠复制、粘贴样式
尺寸圆角
Figma 可以独立的设置组件的圆角,通过自动布局的强大功能可以做自适应、兼容性高的组件
中组件只能严格遵守父组件的设定,并且只有组件才能使用 属性,对常用的响应式、兼容性上有一定的局限性
至此,可以看出 Figma 的高效,是因为更透彻实践原子设计体系,在一定程度上高效地自由组合,避免样式、组件冗余。
6. 怎么转 Figma?
Figma 如此之多真香的点,那从现在的工具中怎么转过去?想必大家都很想知道。
:很遗憾 Figma 不能直接识别导入 PSD 格式,但是对于一些矢量路径图层还是可以右键复制 SVG 代码,粘贴到 Figma 上的。
本身就很臃肿,做 APP UI 设计只是冰山一角,对整体的 APP 设计考虑来说是很欠缺的,对组件、字体样式、颜色样式的维护起来比较累。但是对于非扁平类的游戏 UI 设计来说,它还是个主力军。
XD:虽然 XD 的设计理念稍微比 更接近 Figma,但是 Figma 也不支持直接导入 XD,常规渠道还是 XD 保存 SVG,再导入 Figma,但是转 SVG 是相当大的折损,相当于把文字转曲,把组件关系断开,意义并不大。当然也可以选择使用 这种第三方付费转换,能够很好地完整转换。
:Figma 只支持导入 文件,会自动识别换换图片、文字、矢量组件等,但是涉及到样式、样式关联、组件关联等会丢失,需要在导入后重新关联,整理组件。导入后还需要做这些操作,主要是因为 Figma 的设计系统理念比 先进,所以有些组件、样式的设计使用上,可以做一些减法优化。
整体转换到 Figma 的情况来说可以是毫无捷径了,怎么样都得修一遍为妙。
对于已有的项目可以考虑重组组件库设计逻辑,更好的为后续打下基础。那对新的项目或者改版的情况,可以直接使用 Figma 进行重建。
虽然前期的过程都比较累,但是后续使用起来绝对是真香。
设计
由于大部分的设计工具都差不多,常用的文本、颜色、形状的各种操作在此就不再赘述了。Figma 中的设计主要讲设计系统。
1. 构建栅格样式
Figma 支持建立栅格样式,现在你可以更愉快地在每个界面,每个 Frame 里面自由地使用栅格样式。完整的设计系统应该包含栅格系统,可以自由组合水平、垂直、网格 3 种基本网格。
例如可以根据您两端的尺寸分别创建 和 iOS 的栅格系统,图标设计上可以建立 8x8,24x24,,这是都是 没有考虑到的复用性。
2. 构建文本样式
Figma 的文本样式,无需考虑对齐、颜色,这也就相对于 节省了很多不必要的样式,在选择上也会变得更简洁高效。并且字距和行高可以支持百分比单位,设定更灵活。在组件的实例中,也能够自由更换字体样式,配合 能够做到组件的自适应。
在构建文本系统的时候,也可以借助如 Font Scale 插件按照 1.2、1.5、1.618 等规律生成和谐的字体规范;如 Batch 可以批量修改字体、颜色规范。
3. 构建颜色样式
Figma 的颜色样式,可以自由应用在颜色、描边、字色上,描边属性可以在实例上自由的设定粗细,类型,线头线尾样式等。
但是图层样式 中的颜色还没有纳入样式管理,可能是因为单独有图层样式管理,所以没有和颜色样式关联起来,但还是期待 Figma 能完善吧。
在构建色彩系统的时候,我们常常需要使用一些规则方法去生成颜色样式。在这里可以借助如 插件,可以生成一组自定义颜色的深浅色阶。
构建图层效果样式
Figma 可以创建内阴影、投影、图层模糊、背景模糊等效果样式,能够比 更方便统一的管理图层效果样式。
注意:
Figma 可以渲染阴影类型最多 8 个,内投影最多 1 个,每个模糊类型最多 1 个。但请记住,这些效果所使用的模糊可能导致性能不佳,背景模糊通常是最耗性能的图层效果。图层效果适用于图层和组,使用组模糊和阴影可以提高性能。
在构建图层效果样式的时候,可以借助如 创建漂亮的新拟态投影、 创建平滑的分层阴影、 创建长投影等。
4. 构建图标系统
Figma 的图标绘制在独有的矢量网格技术上,可以用一笔画完整个路径图标,可以在不同的方向直接分叉而不需要创建单独的路径对象。此外还可以使用椭圆工具创建形状如饼图、环状图等,极大地提高图标绘制的效率。
在构建图标系统的时候,可以借助如 、Icon8 等插件,直接搜索关键词,直接以 SVG 格式导入 Figma,当然也可以从 、 等网站复制 SVG 代码,直接粘贴到 Figma。
Figma 中的几个重要概念
具体的介绍就不一一赘述了,和 最大的区别主要是 ,可以说是 的超级升级,无论文本、形状、画板等都可以添加 AL 达到堆叠的效果,自动堆叠、调整内边距和内间距,类似 Css (但目前 AL 没有 ,但可以嵌套 AL 达到 效果)。
使用了 后,内里的元素由 变成 ,可以使用 Fixed 固定、 适应内容、Fill 填充容器来自由控制约束布局,可以轻松创建响应式、等分效果。
其次 变体可以把多个组件状态归集为一个组件,通过属性创建不同的选择开关,能让组件在不同状态间自由切换。
是 Figma 类似 CSS 中盒子模型的功能,可以应用在 Frame 框架和 组件上,可以自由分别设定四边 、嵌套 AL 为 、描边样式、并对内容产生如 的均分对齐。如果选择不在框架内的对象(Group、Text、、 等),Figma 将在它们周围创建一个自动布局框架。
1.在创建进度条组件的时候,一般创建了就不能控制进度的长度。其实可以通过 AL 一个 Frame 填充,在 实例中可以通过改变 AL 的内边距,从而实现填充的长度(当然也可以放一个透明的元素控制间距实现)。如果是有拖拽点,还可以配合 Frame 宽度为 0 的 Hack 方式,保持不裁剪内容以显示拖拽点,实现相对定位的效果。除了长条进度,常用的圆环进度,可以直接通过上面提到的扇形工具,即便是组件后也能调节长度、粗细(真是强大)。
2.在创建列表的时候,可以通过调整 AL 中的内边距,轻松实现缩进效果。
3.在创建按钮结构时,一个文本添加 AL 就可完成自适应按钮( 要文字和背景分开 2 层),也可以通过 AL 轻松实现隐藏显示图标,自适应宽高达到自由组合的效果(希望下一代的 即将支持相对、绝对定位)。当然 出来之后,结构的事情可以交给它来处理。
4.通过设定为 可以实现 AL 内的元素均分排列,还可以通过减少父级 Frame 的宽高 来实现重叠的效果。(希望下一代的 即将支持负间距)
5.在表格制作中,通过建立行级、列级 AL,极大的方便调整不同单元格的位置、排序。
以上交互表现是基于 Beta 的交互组件功能,目前已经正式发布,无需申请体验。
可以说是对不同的组件状态进行了一个很好的规整,而组件设计中的 和 Value 可以和 Web 前端的组件的命名对应起来,这样在 Figma 的 面板就可以直接提供复制,更好地打通前端交付。
注意:官方不建议使用变体来分组不同的图标。如果你有同一图标的不同尺寸、状态,那么你可以将这些图标合并为变体。
例如常用的开关,可以分成 iOS 和 的两个样式,每个样式里面有开和关,又包含了默认、按下、禁用三种状态,将这 2x2x3=12 种状态一一罗列就形成了一个开关完整的 。
+
在做 APPUI 的时候经常会遇到 Feeds 流设计。除了使用基础的 布局,还可以对不同的内容区域如横图、竖图、视频、1~9 图等进行 的组合。这样就可以即是一个自动布局又能切换不同的内容状态,减少生成冗余的组件组合。
这个也类似于 Slot 插槽的概念,中间部分可以切换不同的个数、布局。
原型交互
Figma 的原型交互除了最最最基础的水平和垂直滚动,还可以由触发器配合响应的动作,动作可以调整使用不同的预设动画,动画可以具体设定缓动曲线。
「组件集内部交互」此外 Figma 加强了组件交互的功能,配合 可以设置组件集内的交互,可以实现例如按钮常态、按下、松开等不同的交互状态。
「子组件继承交互」对母组件 添加了交互行为的, 同样也会生效。比如对母组件的返回按钮,添加了一个 = Back,那只要是在界面中有引用到这个返回组件的界面,点击返回的时候 ,都会自动返回上一层界面。
「多条交互流」在此之前 一个页面只能有一条交互流作为展示,增强之后可以在同一页面下中添加不同的交互流,比如信息流程、支付流程。
接下来用一些比较有意思的案例讲述一下:
Smart :类似 的神奇移动,两个 Frame 中,命名相同的图层会生效,命名不同的则通过淡入淡出过渡。通过 可以实现两个关键帧之间的位移、旋转、不透明、形状变化、字号变化等的自动补间动画。
Open :可以很方便地添加弹窗的动效,提供不同的位置和手动定位、是否启用蒙层外点击作为关闭、以及自动产生的蒙层颜色,还可以通过 Swap 切换不同的弹窗。
To:常见于网页的锚点定位,可以在详情页点击评论按钮 自动滑动到评论区,可以点击按钮返回到内容区顶部。
After Delay:常用于做一些自动循环的动画效果,比如此次封面的彩虹条动画就是使用了 来完成的。
基本上基础的交互操作、动效转场 Figma 都能轻松实现,但是还有一些进阶的变量逻辑判断、重力感应、时间轴动画等还是需要通过专业的工具去实现。
大家也尽可能评估好动画的制作成本,也不是非得使用 Figma 去硬尬制作不擅长的动效,Figma 同样可以用 AEUX 导入到 Ae 去制作。
1. 案例-Smart
类似简化版 MD 卡片的悬停涟漪效果,通过 Frame+ 设定好两个关键帧,把浅蓝色的 Frame 层 放大填充至整个卡片(卡片打开 内容裁剪),在浅蓝色同一层级复制一份作为白色圈圈,从小放大 代替原来的浅蓝色圈圈。
另一个经典案例是简化版 MD 的 Float Btn,通过 Frame++ 设定好两个关键帧,先设计展开后的效果,再缩减成按钮会好制作一些。主要是设定好 Frame 内元素的约束,把内容设为 Left Top,把图标设定为 Right。缩减成按钮只需调整 Frame 的尺寸和调整内容的透明度为 0。同理也可以去实现类似 iOS 卡片点击后的转场。
2. 案例-Open
可以很方便地添加弹窗的动效,提供不同的位置和手动定位、是否启用蒙层外点击作为关闭、以及自动产生的蒙层颜色,还可以通过 Swap With 切换不同的弹窗。
此外在真实的案例中,你可以给 X 母组件添加一个 Close 的交互,这样只要有弹窗层的地方都可以用 X 自动关闭。这也是子组件继承母组件交互的一种高效方式。
3. 案例-
简单实用的滑动动画,可以制作快速返回顶部、或者滑动到指定区域。在指定内容区域 Frame 为 / 横向或者竖向滑动后,给按钮新增一个 的动作直接拖拽到刚才的内容区域 Frame,保持 X、Y 的偏移量为 0 即可,如果你需要滑动到内容区的第二个区块也可以,在此之上还能设定偏移量,避开如顶部导航条的遮挡。
在一些横滑的交互上,一般会对滑动卡片做一层 ,左对齐并给一个 (如绿色左边的间距),那么在 上需要设定偏移量避免贴边显示(如淡红色块的间距)
注意,在滑动到最右时,即便 设定了 ,但 并不会生效,需要添加一个额外的色块,设置为 0 透明度代替右边边距。
4. 案例-After Delay
课后有很多同学都提及这个**气的小彩虹条怎么做,其实原理很简单想明白了就好。可以分两步实现:
彩虹条的自循环动画:创建三个并列的彩虹条( 约束调整为 Scale 缩放,便于后续做拉伸变形),设定组件 Frame 只显示一个的宽度,让这三个彩虹条不断地发生位移变化,并且让位置变化得到一个循环。
在这个过程中,通过 (1ms,即 1 毫秒无延迟),(Frame) 组件集内的切换动画切换不同的关键帧,(Liner,)通过智能动画自动补间位移动画。
注意这里使用 Liner 匀速可以有无缝循环的感觉,如果使用其他缓动曲线也行,但会有一些顿挫感。 这个可以自行调试设定。
变形拉伸或改变角度:得到自循环的动画后,其实已经能够随意拉伸了。此时可以创建一个新的组件 Frame,拉伸填满并调整填充,即可得到一个自适应带角度的彩虹条了。如果还需要添加圆角,直接在组件 Frame 层设置圆角并勾选 即可。
同样,常用的 也可以简单地通过旋转 3 次 120 度实现。
以上都只是冰山一角,更多需要你切身地去操作和了解交互功能,才能更好的理解它们。
审查元素
![](http://419ai.oss-cn-beijing.aliyuncs.com/2023/07/20230726191152761.png)