Figma一站式设计交付

深圳/UI设计师/3年前/669浏览

版权

Figma一站式设计交付

Figma自2016年以多人实时在线协作的界面设计软件出现，很多人在使用过后认为Figma是来自未来的界面设计软件。

Figma自2016年以多人实时在线协作的界面设计软件出现，很多人在使用过后认为Figma是来自未来的界面设计软件。由于2020年疫情原因，越来越多人在家隔离办公。Figma也适逢机会一举超越了Sketch的地位，在UI设计、原型设计、头脑风暴、用户流程、设计系统、设计交付、版本管理等名列前茅，成为当下最流行的多平台UI线上协同设计软件。

在我研究使用了一番Figma后表示真香，藉此开发了一门分享课——《Figma一站式设计交付》，课程主要从4个章节简要地讲解Figma的一站式设计交付：

Figma 的介绍、理论
Figma 的设计系统、原型交互、审查元素
Figma 的营地使用使用技巧
Figma 社区（用户、文件、插件）

希望大家能从中深刻了解Figma，在日常设计中进一步提升设计效率，优化设计流程。

前期的下载安装，注册账号流程都相对简单，没有难度的就先跳过了。至于有同学终究会问有没有中文版，当然也有汉化插件，还是建议能用英文版的就英文版，来去就那些固定的英语单词。不废话了，快来一起进入Figma的世界吧。

认识 Figma

根据 UXTools 用户体验工具调查报告显示，Figma 在国外有逐渐攀升的趋势。Figma 的用户量已经反超了 Sketch，一举在 UI Design / Protoping / User Flow / Hand Off / Design System / Versioning 拿下排名第一，在 WhiteBoard 中 FigJam 排名第二。

回看国内同类型产品的情况，已经有多家厂商开发了对标 Figma 的工具，如蓝湖MasterGo（已完成C轮融资）、即时设计（联合优设推广，优化做得比较好）、Pixso等。

另一侧是Figma交付类的插件工具，腾讯也推出了CoDesign设计协作平台，覆盖了产品经理、设计师、工程师协作需求，助力团队提升协作效率、有效管理和使用设计资产，帮助大家更好的去完成设计交付。和CoDesign类似的产品还有Moonvy、Heron、Mockplus。

Figma 于 2016 年发布首个版本，19 年推出品牌宣传视频，而 2020 年的疫情让这类云协作的产品迅速崛起，接下来先看一下 Figma 官方是怎么去宣传的：

通过视频我们大概能了解到一些：避免文件传回传、团队多人协作、云设计协作交互视觉、直接交付给开发、及时的评论反馈。

总的来说Figma实在是有太多优点了：多终端多人实时协作、从Sketch过渡无缝UI 设计不卡顿、独特的矢量网格、类CssBox盒子的AutoLayout、原型交互、设计系统组件库灵活高效、版本历史管理、实时讨论、实时分享、无需担心插件版本，Figma涵盖了如此多功能，是一个设计+社区的综合体。（社区后面介绍）

设计效率这件事很难用具象的数据来传达，只有你亲身体验一番才叫真香。为了更好的描述 Figma 在整个过程中怎么提升设计效率，在此简单的举几个例子：

对设计流程的提效统一

在使用Figma之前：产品策划团队一般用Tapd、在线文档、原型图等描述需求，交互用XD、Sketch等梳理设计交互图，视觉同学用PS、Sketch等完成设计，最终以又以效果图、Codesign等交付给产品策划审阅定稿，最终Codesign等交付工具交付开发。

在使用Figma之后：情况就可以完全不同了，从交互设计到视觉设计，最后到策划审核和设计交付都可以在Figma上一站式完成，多人实时协作发挥了巨大的作用，更加敏捷了。

很多团队可能交互用一个工具，视觉用一个工具，各司其事不碍事。又如组件和设计规范等可能觉得组件是统一依赖视觉同学就好，交互稿不需要符合规范，所以交互同学不用组件，组件、规范的概念对交互不是重点。但其实可以相互作用，到后期交互可以直接套用视觉组件直接搭建页面，效率也是有所提升。

交互动效 Demo 的高效

在使用 Figma 之前，可能会由 Photoshop 转向 After Effect、XD 等软件制作动效，如果是 Sketch 流则会有更多的选择可以导入 Principle、Flinto、Protopie、Framer 等工具，Protopie 和 Framer 在动效设计上都是一个不错的选择。

在使用Figma后，可以在做完视觉后直接做高保真的交互Demo，一定程度上避免了不同软件的学习成本，提升了图层元素、效果、源文件等转换效率。此外，Figma的组件变体还支持做交互状态的变化，大大地提升了做交互Demo的效率。

例如，给父组件Close添加一个点击事件响应关闭浮层的操作，无论你是居中的弹窗，还是底部画出的，乃至是右侧画出的，只要在界面的浮层中使用到Close的组件都可以响应关闭浮层的交互动效。

更高效自由的组件修改

例如需要构建 3 个不同的按钮组件：

Photoshop没有组件的概念，只好分开创建3个按钮（3种颜色、3个文本、3个形状）并且三个按钮之间文字、颜色无规范关联，圆角独立设置，宽高非自适应。
Sketch虽然有组件的概念，但是还是逃不过创建3个按钮组件（3种颜色、3个文本、3个形状）并且要在v69版本后的文字和颜色才可以独立设置，三个按钮组件的圆角在设定后子组件不可独立修改，配合SmartLayout的能做单向的自适应拉伸，3个组件为独立不关联的组件，互不影响。
Figma得益于原子化的样式，只需要建立2种文本样式，3个颜色、0个形状，通过建立1个基础组件就可以把三个按钮关联归一。其中文字和背景边框等样式可以独立设置，按钮的形状可以直接交给圆角独立设置，配合AutoLayout可以做到完美宽高自适应。

当然这里例子难免有的同学会觉得有点极端了，真正创建按钮的组件还是应该创建成3个独立的组件。只是能从这个极端例子中看见Figma的强大的高效自由组合。

建立一个基础组件：图标+文本+背景。在子组件中，可以自由的设定字体字号、填充颜色、边框颜色、效果样式、圆角样式等，可根据需要决策显示或隐藏图标。

通过一个基础组件控制不同的实例，不同的实例又保持高度自由的子特征属性。

AutoLayout 的高效

列表设计是UI界面常见的一种，常常在调整的时候会牵连很多调整操作。例如：

删除第一个列表项中的图片，文字要自动左对齐；
删除第二个列表项中3行文本，文字需要实现基于图片居中对齐；
删除第四个列表项，并把第五个列表项提前至第三个列表项。

Photoshop：没有组件的概念，所以只能傻傻的干了。首先删除图片，左移文本，删除2的文本，调整居中，删除第4，调整第5到第3，调整第3到下面。主体操作就有7步之多。
Sketch：分别创建图文3行、图文2行、纯文组件，框选345，调整位置，调整第四，整体也有6步左右3个组件。
Figma：配合AutoLayout只需要创建1个组件，然后对子组件进行删除图片，删除文本，调整顺序即可，主体操作大概只有4步1组件。有了AutoLayout的加持，组件可以自由地删除（隐藏）元素，而后会有自动布局的效果（自动跟随、对齐）。

Figma在设计上是基于前端的布局实际理念，配合AutoLayout使得页面元素的堆叠排列更为自动化，可以在组件内外自由删减隐藏元素并且自动调整布局。

Figma更透彻的原子设计

在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。2013 年前端工程师 Brad Forst 提出的原子设计方法论作为指导。

方法的本质其实就是将页面拆解为最小元素（原子），然后原子可以演变成分子，分子通过多维度的组合形式成为组织，再到模板，最终生成页面。

原子（Atoms）：在界面中以「元素」的形式存在，例如文字、颜色、图标、效果样式等；

分子（Molecules）：原子、分子排列组合构成了组织，在界面中多以「组件」的形式存在，例如按钮、导航、标签、弹窗；

组织（Organisms）：原子、分子、组织排列组合构成了模板，在界面中多以「模块」的形式存在，例如：列表组、卡片组、入口组等；

模板（Templates）：原子、分子、组织排列组合构成了模板，在界面中也称为「原型图」，例如资讯原型，列表原型，详情原型等；

页面（Pages）：将实际内容（图片、文章等）放置在特定模板内，就成了高保真视觉稿。

Figma和Sketch在践行原子设计理论上做对比：

文本样式
Figma无需考虑文本对齐和颜色的组合，此外行高支持百分比设定
Sketch则需要枚举对齐、颜色各异的情况，过于冗余
填充和边框样式
Figma可以在文本、填充、边框中自由调用颜色样式
Sketch则需要在v69支持Color Variables后才能通过颜色变量统一管理
效果样式
Figma可以创建图层样式进行复用统一管理
而Sketch没有样式统一管理的概念，只能靠复制、粘贴样式
尺寸圆角
Figma可以独立的设置组件的圆角，通过自动布局的强大功能可以做自适应、兼容性高的组件
Sketch中组件只能严格遵守父组件的设定，并且只有组件才能使用SmartLayout属性，对常用的响应式、兼容性上有一定的局限性

至此，可以看出Figma的高效，是因为更透彻实践原子设计体系，在一定程度上高效地自由组合，避免样式、组件冗余。

怎么转 Figma？

Figma 如此之多真香的点，那从现在的工具中怎么转过去？想必大家都很想知道。

Photoshop：很遗憾Figma不能直接识别导入PSD格式，但是对于一些矢量路径图层还是可以右键复制SVG代码，粘贴到Figma上的。
Photoshop本身就很臃肿，做APP UI设计只是冰山一角，对整体的APP设计考虑来说是很欠缺的，对组件、字体样式、颜色样式的维护起来比较累。但是对于非扁平类的游戏UI设计来说，它还是个主力军。
XD：虽然XD的设计理念稍微比Sketch更接近Figma，但是Figma也不支持直接导入XD，常规渠道还是XD保存SVG，再导入Figma，但是转SVG是相当大的折损，相当于把文字转曲，把组件关系断开，意义并不大。当然也可以选择使用XDtoSketch这种第三方付费转换，能够很好地完整转换。
Sketch：Figma只支持导入Sketch文件，会自动识别换换图片、文字、矢量组件等，但是涉及到样式、样式关联、组件关联等会丢失，需要在导入后重新关联，整理组件。导入后还需要做这些操作，主要是因为Figma的设计系统理念比Sketch先进，所以有些组件、样式的设计使用上，可以做一些减法优化。

整体转换到Figma的情况来说可以是毫无捷径了，怎么样都得修一遍为妙。

对于已有的项目可以考虑重组组件库设计逻辑，更好的为后续打下基础。那对新的项目或者改版的情况，可以直接使用Figma 进行重建。

虽然前期的过程都比较累，但是后续使用起来绝对是真香。

设计

由于大部分的设计工具都差不多，常用的文本、颜色、形状的各种操作在此就不再赘述了。Figma中的设计主要讲设计系统。

构建栅格样式

Figma支持建立栅格样式，现在你可以更愉快地在每个界面，每个Frame里面自由地使用栅格样式。完整的设计系统应该包含栅格系统，可以自由组合水平、垂直、网格3种基本网格。

例如可以根据您两端的尺寸分别创建Android和iOS的栅格系统，图标设计上可以建立8x8，24x24，1024x1024，这是都是Sketch没有考虑到的复用性。

构建文本样式

Figma的文本样式，无需考虑对齐、颜色，这也就相对于Sketch节省了很多不必要的样式，在选择上也会变得更简洁高效。并且字距和行高可以支持百分比单位，设定更灵活。在组件的实例中，也能够自由更换字体样式，配合AutoLayout能够做到组件的自适应。

在构建文本系统的时候，也可以借助如Font Scale插件按照1.2、1.5、1.618等规律生成和谐的字体规范；如Batch Styler可以批量修改字体、颜色规范。

构建颜色样式

Figma的颜色样式，可以自由应用在颜色、描边、字色上，描边属性可以在实例上自由的设定粗细，类型，线头线尾样式等。

但是图层样式Effect中的颜色还没有纳入样式管理，可能是因为单独有图层样式管理，所以没有和颜色样式关联起来，但还是期待Figma能完善吧。

在构建色彩系统的时候，我们常常需要使用一些规则方法去生成颜色样式。在这里可以借助如ColorKit 插件，可以生成一组自定义颜色的深浅色阶。

构建图层效果样式

Figma可以创建内阴影、投影、图层模糊、背景模糊等效果样式，能够比Sketch更方便统一的管理图层效果样式。Figma 可以渲染阴影类型最多 8 个，内投影最多1个，每个模糊类型最多 1 个。但请记住，这些效果所使用的模糊可能导致性能不佳，背景模糊通常是最耗性能的图层效果。图层效果适用于图层和组，使用组模糊和阴影可以提高性能。

在构建图层效果样式的时候，可以借助如Neumorphism创建漂亮的新拟态投影、SmoothShadow创建平滑的分层阴影、oblique创建长投影等。

构建图标系统

Figma的图标绘制在独有的矢量网格技术上，可以用一笔画完整个路径图标，可以在不同的方向直接分叉而不需要创建单独的路径对象。此外还可以使用椭圆工具创建形状如饼图、环状图等，极大地提高图标绘制的效率。

在构建图标系统的时候，可以借助如Iconify、Icon8等插件，直接搜索关键词，直接以SVG格式导入Figma，当然也可以从iconfinder、iconfont等网站复制SVG代码，直接粘贴到Figma。

Figma中的几个重要概念

具体的介绍就不一一赘述了，和Sketch最大的区别主要是Autolayout，可以说是SmartLayout的超级升级，无论文本、形状、画板等都可以添加AL达到堆叠的效果，自动堆叠、调整内边距和内间距，类似Css FlexBox（但目前AL没有Margin，但可以嵌套AL达到Margin效果）。

使用了Autolayout后，内里的元素由Constraints变成Resizing，可以使用Fixed固定、HugContents适应内容、Fill Container填充容器来自由控制约束布局，可以轻松创建响应式、等分效果。

其次Variants变体可以把多个组件状态归集为一个组件，通过属性创建不同的选择开关，能让组件在不同状态间自由切换。

AutoLayout

AutoLayout是Figma类似CSS中盒子模型的功能，可以应用在Frame框架和Component组件上，可以自由分别设定四边Padding、嵌套AL为Margin、描边样式、并对内容产生如FlexBox的均分对齐。如果选择不在框架内的对象（Group、Text、Vector、Images等），Figma 将在它们周围创建一个自动布局框架。

在创建进度条组件的时候，一般创建了就不能控制进度的长度。其实可以通过AL一个Frame填充，在Instance实例中可以通过改变AL的内边距，从而实现填充的长度（当然也可以放一个透明的元素控制间距实现）。如果是有拖拽点，还可以配合Frame宽度为0的Hack方式，保持不裁剪内容以显示拖拽点，实现相对定位的效果。除了长条进度，常用的圆环进度，可以直接通过上面提到的扇形工具，即便是组件后也能调节长度、粗细（真是强大）。
在创建列表的时候，可以通过调整AL中的内边距，轻松实现缩进效果。
在创建按钮结构时，一个文本添加AL就可完成自适应按钮（Sketch要文字和背景分开2层），也可以通过AL轻松实现隐藏显示图标，自适应宽高达到自由组合的效果（希望下一代的AutoLayout即将支持相对、绝对定位）。当然Component Variants出来之后，结构的事情可以交给它来处理。
通过设定为Spaces Between可以实现AL内的元素均分排列，还可以通过减少父级Frame的宽高来实现重叠的效果。（希望下一代的AutoLayout即将支持负间距）
在表格制作中，通过建立行级、列级AL，极大的方便调整不同单元格的位置、排序。

以上交互表现是基于Beta 的交互组件功能，目前已经正式发布，无需申请体验。

Component Variants

Component Variants可以说是对不同的组件状态进行了一个很好的规整，而组件设计中的Property和Value可以和Web前端的组件的命名对应起来，这样在Figma的Inspect面板就可以直接提供复制，更好地打通前端交付。

注意：官方不建议使用变体来分组不同的图标。如果你有同一图标的不同尺寸、状态，那么你可以将这些图标合并为变体。

例如常用的开关，可以分成iOS和Android的两个样式，每个样式里面有开和关，又包含了默认、按下、禁用三种状态，将这2x2x3=12种状态一一罗列就形成了一个开关完整的Component Variants。

AutoLayout + Component Variants

在做APPUI的时候经常会遇到Feeds流设计。除了使用基础的AutoLayout布局，还可以对不同的内容区域如横图、竖图、视频、1~9图等进行Component Variants的组合。这样就可以即是一个自动布局又能切换不同的内容状态，减少生成冗余的组件组合。

这个也类似于Slot 插槽的概念，中间部分可以切换不同的个数、布局。

原型交互

Figma的原型交互除了最最最基础的水平和垂直滚动，还可以由触发器配合响应的动作，动作可以调整使用不同的预设动画，动画可以具体设定缓动曲线。

【组件集内部交互】此外Figma加强了组件交互的功能，配合Component Variant可以设置组件集内的交互，可以实现例如按钮常态、按下、松开等不同的交互状态。
【子组件继承交互】对母组件Component添加了交互行为的，Instance同样也会生效。比如对母组件的返回按钮，添加了一个OnClick = Back ，那只要是在界面中有引用到这个返回组件的界面，点击返回的时候，都会自动返回上一层界面。
【多条交互流】在此之前一个页面只能有一条交互流作为展示，增强之后可以在同一页面下中添加不同的交互流，比如信息流程、支付流程。

接下来用一些比较有意思的案例讲述一下：

Smart Animate：类似Keynote的神奇移动，两个Frame中，命名相同的图层会生效，命名不同的则通过淡入淡出过渡。通过SmartAnimate可以实现两个关键帧之间的位移、旋转、不透明、形状变化、字号变化等的自动补间动画。

Open Overlay：可以很方便地添加弹窗的动效，提供不同的位置和手动定位、是否启用蒙层外点击作为关闭、以及自动产生的蒙层颜色，还可以通过Swap Overlay切换不同的弹窗。

Scroll To：常见于网页的锚点定位，可以在详情页点击评论按钮自动滑动到评论区，可以点击按钮返回到内容区顶部。

After Delay：常用于做一些自动循环的动画效果，比如此次封面的彩虹条动画就是使用了AfterDelay来完成的。

基本上基础的交互操作、动效转场Figma都能轻松实现，但是还有一些进阶的变量逻辑判断、重力感应、时间轴动画等还是需要通过专业的工具去实现。

大家也尽可能评估好动画的制作成本，也不是非得使用Figma去硬尬制作不擅长的动效，Figma同样可以用AEUX导入到Ae去制作。

案例-Smart Animate

类似简化版MD卡片的悬停涟漪效果，通过Frame+Radius设定好两个关键帧，把浅蓝色的Frame层放大填充至整个卡片（卡片打开ClipContent内容裁剪），在浅蓝色同一层级复制一份作为白色圈圈，从小放大代替原来的浅蓝色圈圈。

另一个经典案例是简化版MD的Float Btn，通过Frame+Radius+ClipContent设定好两个关键帧，先设计展开后的效果，再缩减成按钮会好制作一些。主要是设定好Frame内元素的约束，把内容设为Left Top，把图标设定为Bottom Right。缩减成按钮只需调整Frame的尺寸和调整内容的透明度为0。同理也可以去实现类似iOS AppStore 卡片点击后的转场。

案例-Open Overlay

OpenOverlay可以很方便地添加弹窗的动效，提供不同的位置和手动定位、是否启用蒙层外点击作为关闭、以及自动产生的蒙层颜色，还可以通过Swap With overlay切换不同的弹窗。

此外在真实的案例中，你可以给 X 母组件添加一个Close Overlay 的交互，这样只要有弹窗层的地方都可以用X自动关闭。这也是子组件继承母组件交互的一种高效方式。

案例-ScrollTo

简单实用的滑动动画，可以制作快速返回顶部、或者滑动到指定区域。在指定内容区域Frame为Horizontal / Vertical Scrolling 横向或者竖向滑动后，给按钮新增一个ScrollTo的动作直接拖拽到刚才的内容区域Frame，保持X、Y的偏移量为0即可，如果你需要滑动到内容区的第二个区块也可以，在此之上还能设定偏移量，避开如顶部导航条的遮挡。

在一些横滑的交互上，一般会对滑动卡片做一层AutoLayout，左对齐并给一个PaddingLeft（如绿色左边的间距），那么在ScrollTo上需要设定偏移量避免贴边显示（如淡红色块的间距）

注意，在滑动到最右时，即便AutoLayout设定了PaddingRight，但ScrollTo并不会生效，需要添加一个额外的色块，设置为0透明度代替右边边距。

案例-After Delay

课后有很多同学都提及这个骚气的小彩虹条怎么做，其实原理很简单想明白了就好。可以分两步实现：

1彩虹条的自循环动画：创建三个并列的彩虹条（Constraints约束调整为Scale缩放，便于后续做拉伸变形），设定组件Frame只显示一个的宽度，让这三个彩虹条不断地发生位移变化，并且让位置变化得到一个循环。

在这个过程中，通过AfterDelay （1ms，即1毫秒无延迟），ChangeTo（Frame）组件集内的切换动画切换不同的关键帧，SmartAnimate（Liner，2000ms）通过智能动画自动补间位移动画。

注意这里使用Liner匀速可以有无缝循环的感觉，如果使用其他缓动曲线也行，但会有一些顿挫感。2000ms这个可以自行调试设定。

2变形拉伸或改变角度：得到自循环的动画后，其实已经能够随意拉伸了。此时可以创建一个新的组件Frame，拉伸填满并调整填充，即可得到一个自适应带角度的彩虹条了。如果还需要添加圆角，直接在组件Frame层设置圆角并勾选ClipContent即可。

同样，常用的loading也可以简单地通过旋转3次120度实现。

undefined

以上都只是冰山一角，更多需要你切身地去操作和了解交互功能，才能更好的理解它们。

审查元素

分享链接和权限管理

当我们在Figma设计完后，就可以把Figma链接分享给上下游的同事，这时候我们首先需要谨慎的设置一下Figma文件的权限。Figma可以从Organization（公司组织）>Team（团队）>Project（项目）>File（文件）>Prototype（原型）都可以独立设置权限邀请。

但是，任何一个编辑者都可以邀请另一个人作为编辑者或者调整另一个编辑者的权限，并且无需管理员同意。相当于一个群聊管理员，能邀请另一个人作为管理员，而不需要经过群主。（也许是因为Figma多人编辑的理念造成的？对于付费团队按编辑者人数计算来说，要谨慎注意）

权限的设置主要集中在团队，对于个人草稿Drafts 和免费团队的设置则只有更少选项（也就是付费才有更安全的权限设置）。

Organization（公司组织）：独享最全的管理安全权限，登录管理、插件管理、字体管理、组件管理等。
Team（团队）：团队级别主要管理具体成员权限，如果处在公司级的团队，可以设置为需要邀请才可以加入团队，或者设为私密团队。
Project（项目）：对项目层级，如果想有某个项目作为保密项目，可以设置Remove team access，这样团队成员就无法访问这个项目了，只有受邀请的人（Only People Invited to this file）可以访问。
File（文件）：在文件层面，右下角有一个隐藏的功能Alllow Viewers to Copy、Share、And export from this file，默认是勾选启用的。
关闭后可以避免设计文件被恶意复制、分享和导出，但是需要注意如果通过Figma交付给开发的话，开发一般都是Viewer权限则不能导出切图了。
Prototype（原型）：除了常规的can view，还有一个更细致的can view prototypes only，如果设置为can view，是可以从原型交互直接open in editor 变相打开了对应的文件，也就是can view相当于是得到了文件的查看权，不仅仅是可访问原型。

注意：

如果你处于公司级下，默认是开启Anyone at Organization with the link公司内任何知道链接的人都能访问，这就导致同公司但不在团队内的其他同事，是可以通过分享的链接，在不加入团队的情况下直接访问到这个文件。如果文件上需要保密性，建议设置为Only People Invited to this file只有邀请的人才能访问，这样就可以限定为团队内的成员+邀请的成员才能访问到。

由于组织版不限团队、项目、文件梳理，所以建议可以一个项目作为Team，这样一来要创建一个保密项目，就可以把Team-Setting-Acess设置为Close（成员加入需要本团队管理员同意）或者Secret（保密，组织团队列表无法搜索，需本团队管理员邀请加入）。针对Project项目下的每个文件，打开Team Access（团队成员可访问），文件设置为Only People Invited to this file。

一般来说说使用付费团队就已经够用了，但是由于付费团队的每个成员都是可以使用个人账号登录，因为也会对管理带来一定的困难，因此也建议统计好团队成员的账号，及时警惕移除有问题或临时协作的用户。在设置编辑权限的时候，做到最小化权限分配，及时回收权限，避免因权限问题导致项目资源风险。

审查元素

作为云协作的 Figma，自带了标注功能已经蛮完善的了。能够很直观的对尺寸、圆角、文字、填充、边框、效果、动效等进行标注注释：

对组件的解析：能够明确显示组件的名字，和上层组件的名字，并且提供定位源。同时显示组件的描述和文档链接（如有的话），进一步对组件的宽高、定位、圆角、混合模式、约束参考进行解析。
对文本、颜色的解析：提供文本的复制、字体规范代号，字体、字重、字号、行高的解析，对颜色提供色号、不同的色彩模式、线框等（对自定义虚线没有直接实现的值，但是也能以SVG形式解析对应的Join、Cap、Dash pattern）
对代码解析：提供CSS 、iOS 、Android xml等解析，与同类产品一样仅作参考。
对动效的解析：提供触发器、目的地、动画、缓动曲线、时长等描述。
对切图资源输出：提供多倍率、多格式的导出。

基于Figma原生支持这么多的解析已经足够在开发阶段帮助开发查看设计稿具体的标注，而更多的期待可能是对DSL的理解和解析。

如果能对字体预设和颜色预设等DesignToken提供一键导出到plist/Xml的形式（具体类似Zeplin的DSL），那对传达整体的原子设计理念有更完善地执行落地。

编辑者和审查者的一个小差异

编辑者（你的视角）和查看者（开发视角）的 Inspect 模式有略微区别，如一个 icon 输出尺寸 192x192，内部路径可能 120x120。编辑者点击时是 192x192，查看者点击时会直接穿透，点到 120x120 的路径，导致开发大小不一致。

解决方法：

在图标组件上面设置一层黑色0.001%-Screen混合模式（避免颜色显示和导出有影响）
在图标组件上面设置一层白色0.001%-Dark混合模式（避免颜色显示和导出有影响）
和开发约定切图都是整数，如遇穿透问题，使用按command+点击捕捉显示Frame的大小。

总的来说，懒得解释就通过一层障眼法蒙在上面，也可以事先和开发做约定培训。

切图输出交付

虽然市面上的很多交付插件都可以一键导出切图，但是往往实际开发的时候，不同的开发对同一个资源的命名方式不同，会导致重复引入不同名字但缺失相同的资源造成冗余，因此这块还是建议自行通过SVN、GIT等进行版本管控资源和命名。

比较高级的方法可以参照《高效协作 I 资源库的协作方式》【1】、《使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付》【2】。

和平营地的使用&技巧

营地使用Figma前的问题

规范不统一，效率低 → 建立视觉、开发组件库
视觉字号颜色规范、切图不统一、开发无组件化意识，协同设计效率偏低
设计资源缺乏管理 → 推动开发优化资源冗余
多个设计开发团队经手，历史遗留问题滚雪球平台业务资源冗余

营地的栅格样式

在营地中，定义以4/8作为基础网格标准建立常用的栅格间距、尺寸。

在图片比例上定义常用的16比9、4比3、3比2、1比1等在适配时保持等比缩放，以CenterCrop模式，避免适配时被拉伸压扁。

营地的字体样式

在营地中，字体样式主要有常规系统字体和品牌字体Agency，因此分别使用了T和A作为代表，融入了Regular、Medium、Bold三种字重，以R、M、B分别代表；

以10号作为最小基础，以2/4/8作为递增规律产生常用的10、12、14、16、18、20、24等字号；统一以150%作为基础行高，个别175%为宽行高；

字体样式配以对应的中文注释，最终形成体系如T12R、T12M、T12B等见名知意的字体代号。在方便开发使用代号的同时，加快设计的统一判断选择。

营地的颜色样式

在营地中，颜色样式围绕品牌色，参考行业同行对对比度可读性的研究，进行一系列的色阶处理。对常用的实色、渐变、半透明渐变（蒙版）以8位ARGB提供对应色值。形成一套深浅对应的中性色和彩色体系。

此外对常用的头像、素材、图案作为填充预设，方便组件变体调整切换，避免使用插件产生随机的图像填充。

营地的图标组件系统

在营地中，此次改版对名字和资源的管理都格外重视，想要轻松剔除冗余的资源，就要有一套合理可持续的规则管控切图资源，通过业务名_模块_类别_功能_状态_尺寸.格式规范管理切图。此外在组件的描述中加入适当的关键词，能够有效提高搜索图标的准确度。

其他实用技巧

Selection Colors：
框选一个范围或者一个画板，会罗列检查出画板内所有颜色，对批量替换为规范色颇有帮助。
ClipContent：
有时候想在一个画板内裁剪（隐藏）超出的部分（类似蒙版，但局限于圆角局限），直接勾选ClipContent就可以啦！
宽度或者高度为0：
设置宽度或者高度为0.001，可以在自适应的按钮AL 做出不占据宽高的，类似相对/绝对定位的效果。

效率之王——快捷键

QuickAction：
【Mac】Command⌘ + / 或 +P
【Win】Control + / 或 + P
直接输入就可以搜索调用菜单命令、插件等不同的快捷操作，十分方便高效。
TidyUp：
【Mac】Control^ + option⌥+T
【Win】Ctrl + Alt + T
一键快速整理图层，另外还有各种对齐快捷键
【Mac】 option⌥+ WASD 和 option⌥ + V/H
【Win】Alt + WASD 和 Alt + V/H
Copy As PNG ：
【Mac】Command⌘ +Shift + C
【Win】Ctrl +Shift + C
一键快速导出某个画板图片到剪贴板，方便复制粘贴到聊天窗口。

给需求加状态描述，分享链接快速定位

如果你使用Figma一站式设计交付，那么通过自主设计一个自定义的组件，在Figma中划分区域告知开发哪些是进行中，哪些是可以进入开发的，并且直接罗列对应的组件，加强对组件的构建意识。

此外Figma对每个Frame都可以生成一个指向链接，那么右键这个框架就可以直接拿到链接，分享给产品开发，十分方便。

Figma 社区

Figma 的社区集合了文件、用户、插件，在这里你可以找到很多优秀的设计范例，优秀的高玩用户，通过高玩关注去看他关注了谁，站在巨人的肩膀上。

用户

Figma官方是必不可少的，除此以外你可以搜索各类大厂，关注他们的分享。

JoeyBanks：分享了很多iOS的组件，并且也会用最新的组件集方式重新整理一次。

Rogie：Figma官方的成员，在youtube上也很活跃，分享很多不为人知的技巧。

在国内，主要关注了草帽SMao、Mr.Biscuit、RyanJyu，这些也是在Figma at Tencent的一次交流会上了解了更多。

草帽SMao ：可以上Bilibili 搜到他的Figma教程，分享了很多工作中的实战经验技巧，我也是看他的视频入门，非常赞。

Mr.Biscuit：人称小老虎，致力于让Figma变得更好，开发了很多插件，例如Instance Utils能够在不分离组件的情况下调整组件内部结构。例如Outline to Single Stroke，把以填充形式线型的图标转换以描边形式的线型图标。

文件

你可以在社区里搜索开源共享的Figma设计源文件，从一些源文件中你能学习到别人使用Figma的一些技巧、规范，并且你也可以基于别人的文件做二次设计迭代。

插件

Figma的社区里少不了优秀的插件，通过下载和点赞数量，能够发现很多优秀的插件。

Figma的插件你生态非常丰富，再此也推荐一些用过的，特别喜爱的插件我标了个心：

太多的插件介绍就不一一赘述了，也可以到一些插件网站了解。

FEATURED FIGMA PLUGINS**
https://figma.tovi.fun/
每月一期，给你推荐当月更新的、值得尝试的 Figma 插件。
Figma中文社区
https://www.figma.cool/
致力于在国内推广 Figma，这里有开发的 Figma 工具箱、设计资源精选、插件合集和 Figma 官方文档。
Awesome Figma Tips
https://awesomefigmatips.com/tips
除了推荐插件以外，还用动图形式展示了各种Figma的技巧。
语雀-Figma交流专栏
https://www.yuque.com/annray/csoz4r/zsn8mi
除了插件推荐以外，从各类方向总结了一些经验。