Figma 自 2016 年以多人实时在线协作的界面设计软件出现，很多人在使用过后认为 Figma 是来自未来的界面设计软件。由于 2020 年疫情原因，越来越多人在家隔离办公。Figma 也适逢机会一举超越了 Sketch 的地位，在 UI 设计、原型设计、头脑风暴、用户流程、设计系统、设计交付、版本管理等名列前茅，成为当下最流行的多平台 UI 线上协同设计软件。
在我研究使用了一番 Figma 后表示真香，藉此开发了一门免费分享课——《Figma一站式设计交付》，课程主要从4个章节简要地讲解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 在整个过程中怎么提升设计效率，在此简单的举几个例子：
1. 对设计流程的提效统一
在使用 Figma 之前：产品策划团队一般用 Tapd、在线文档、原型图等描述需求，交互用 XD、Sketch 等梳理设计交互图，视觉同学用 PS、Sketch 等完成设计，最终以又以效果图、Codesign 等交付给产品策划审阅定稿，最终 Codesign 等交付工具交付开发。
在使用 Figma 之后：情况就可以完全不同了，从交互设计到视觉设计，最后到策划审核和设计交付都可以在 Figma 上一站式完成，多人实时协作发挥了巨大的作用，更加敏捷了。
很多团队可能交互用一个工具，视觉用一个工具，各司其事不碍事。又如组件和设计规范等可能觉得组件是统一依赖视觉同学就好，交互稿不需要符合规范，所以交互同学不用组件，组件、规范的概念对交互不是重点。但其实可以相互作用，到后期交互可以直接套用视觉组件直接搭建页面，效率也是有所提升。
2. 交互动效 Demo 的高效
在使用 Figma 之前，可能会由 Photoshop 转向 After Effect、XD 等软件制作动效，如果是 Sketch 流则会有更多的选择可以导入 Principle、Flinto、Protopie、Framer 等工具，Protopie 和 Framer 在动效设计上都是一个不错的选择。
在使用 Figma 后，可以在做完视觉后直接做高保真的交互 Demo，一定程度上避免了不同软件的学习成本，提升了图层元素、效果、源文件等转换效率。此外，Figma 的组件变体还支持做交互状态的变化，大大地提升了做交互 Demo 的效率。
例如，给父组件 Close 添加一个点击事件响应关闭浮层的操作，无论你是居中的弹窗，还是底部画出的，乃至是右侧画出的，只要在界面的浮层中使用到 Close 的组件都可以响应关闭浮层的交互动效。
3. 更高效自由的组件修改
例如需要构建 3 个不同的按钮组件：
Photoshop 没有组件的概念，只好分开创建 3 个按钮（3 种颜色、3 个文本、3 个形状）并且三个按钮之间 文字、颜色无规范关联，圆角独立设置，宽高非自适应。
Sketch 虽然有组件的概念，但是还是逃不过创建 3 个按钮组件（3 种颜色、3 个文本、3 个形状）并且要在 v69 版本后的文字和颜色才可以独立设置，三个按钮组件的圆角在设定后子组件不可独立修改，配合 SmartLayout 的能做单向的自适应拉伸，3 个组件为独立不关联的组件，互不影响。
Figma 得益于原子化的样式，只需要建立 2 种文本样式，3 个颜色、0 个形状，通过建立 1 个基础组件就可以把三个按钮关联归一。其中文字和背景边框等样式可以独立设置，按钮的形状可以直接交给圆角独立设置，配合 AutoLayout 可以做到完美宽高自适应。
当然这里例子难免有的同学会觉得有点极端了，真正创建按钮的组件还是应该创建成 3 个独立的组件。只是能从这个极端例子中看见 Figma 的强大的高效自由组合。
建立一个基础组件：图标+文本+背景。在子组件中，可以自由的设定字体字号、填充颜色、边框颜色、效果样式、圆角样式等，可根据需要决策显示或隐藏图标。
通过一个基础组件控制不同的实例，不同的实例又保持高度自由的子特征属性。
4. AutoLayout 的高效
列表设计是 UI 界面常见的一种，常常在调整的时候会牵连很多调整操作。例如：
- 删除第一个列表项中的图片，文字要自动左对齐；
- 删除第二个列表项中 3 行文本，文字需要实现基于图片居中对齐；
- 删除第四个列表项，并把第五个列表项提前至第三个列表项。
Photoshop：没有组件的概念，所以只能傻傻的干了。首先删除图片，左移文本，删除 2 的文本，调整居中，删除第 4，调整第 5 到第 3，调整第 3 到下面。主体操作就有 7 步之多。
Sketch：分别创建图文 3 行、图文 2 行、纯文组件，框选 345，调整位置，调整第四，整体也有 6 步左右 3 个组件。
Figma：配合 AutoLayout 只需要创建 1 个组件，然后对子组件进行删除图片，删除文本，调整顺序即可，主体操作大概只有 4 步 1 组件。有了 AutoLayout 的加持，组件可以自由地删除（隐藏）元素，而后会有自动布局的效果（自动跟随、对齐）。
Figma 在设计上是基于前端的布局实际理念，配合 AutoLayout 使得页面元素的堆叠排列更为自动化，可以在组件内外自由删减隐藏元素并且自动调整布局。
5. Figma 更透彻的原子设计
在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。2013 年前端工程师 Brad Forst 提出的原子设计方法论作为指导。
方法的本质其实就是将页面拆解为最小元素（原子），然后原子可以演变成分子，分子通过多维度的组合形式成为组织，再到模板，最终生成页面。
原子（Atoms）：在界面中以「元素」的形式存在，例如文字、颜色、图标、效果样式等；
分子（Molecules）：原子、分子排列组合构成了组织，在界面中多以「组件」的形式存在，例如按钮、导航、标签、弹窗；
组织（Organisms）：原子、分子、组织排列组合构成了模板，在界面中多以「模块」的形式存在，例如：列表组、卡片组、入口组等；
模板（Templates）：原子、分子、组织排列组合构成了模板，在界面中也称为「原型图」，例如资讯原型，列表原型，详情原型等；
页面（Pages）：将实际内容（图片、文章等）放置在特定模板内，就成了高保真视觉稿。
Figma 和 Sketch 在践行原子设计理论上做对比：
文本样式
Figma 无需考虑文本对齐和颜色的组合，此外行高支持百分比设定
Sketch 则需要枚举对齐、颜色各异的情况，过于冗余
填充和边框样式
Figma 可以在文本、填充、边框中自由调用颜色样式
Sketch 则需要在 v69 支持 Color Variables 后才能通过颜色变量统一管理
效果样式
Figma 可以创建图层样式进行复用统一管理
而 Sketch 没有样式统一管理的概念，只能靠复制、粘贴样式
尺寸圆角
Figma 可以独立的设置组件的圆角，通过自动布局的强大功能可以做自适应、兼容性高的组件
Sketch 中组件只能严格遵守父组件的设定，并且只有组件才能使用 SmartLayout 属性，对常用的响应式、兼容性上有一定的局限性
至此，可以看出 Figma 的高效，是因为更透彻实践原子设计体系，在一定程度上高效地自由组合，避免样式、组件冗余。
6. 怎么转 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 中的设计主要讲设计系统。
1. 构建栅格样式
Figma 支持建立栅格样式，现在你可以更愉快地在每个界面，每个 Frame 里面自由地使用栅格样式。完整的设计系统应该包含栅格系统，可以自由组合水平、垂直、网格 3 种基本网格。
例如可以根据您两端的尺寸分别创建 Android 和 iOS 的栅格系统，图标设计上可以建立 8x8，24x24，1024x1024，这是都是 Sketch 没有考虑到的复用性。
2. 构建文本样式
Figma 的文本样式，无需考虑对齐、颜色，这也就相对于 Sketch 节省了很多不必要的样式，在选择上也会变得更简洁高效。并且字距和行高可以支持百分比单位，设定更灵活。在组件的实例中，也能够自由更换字体样式，配合 AutoLayout 能够做到组件的自适应。
在构建文本系统的时候，也可以借助如 Font Scale 插件按照 1.2、1.5、1.618 等规律生成和谐的字体规范；如 Batch Styler 可以批量修改字体、颜色规范。
3. 构建颜色样式
Figma 的颜色样式，可以自由应用在颜色、描边、字色上，描边属性可以在实例上自由的设定粗细，类型，线头线尾样式等。
但是图层样式 Effect 中的颜色还没有纳入样式管理，可能是因为单独有图层样式管理，所以没有和颜色样式关联起来，但还是期待 Figma 能完善吧。
在构建色彩系统的时候，我们常常需要使用一些规则方法去生成颜色样式。在这里可以借助如 ColorKit 插件，可以生成一组自定义颜色的深浅色阶。
构建图层效果样式
Figma 可以创建内阴影、投影、图层模糊、背景模糊等效果样式，能够比 Sketch 更方便统一的管理图层效果样式。
注意：
Figma 可以渲染阴影类型最多 8 个，内投影最多 1 个，每个模糊类型最多 1 个。但请记住，这些效果所使用的模糊可能导致性能不佳，背景模糊通常是最耗性能的图层效果。图层效果适用于图层和组，使用组模糊和阴影可以提高性能。
在构建图层效果样式的时候，可以借助如 Neumorphism 创建漂亮的新拟态投影、SmoothShadow 创建平滑的分层阴影、oblique 创建长投影等。
4. 构建图标系统
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 将在它们周围创建一个自动布局框架。
1.在创建进度条组件的时候，一般创建了就不能控制进度的长度。其实可以通过 AL 一个 Frame 填充，在 Instance 实例中可以通过改变 AL 的内边距，从而实现填充的长度（当然也可以放一个透明的元素控制间距实现）。如果是有拖拽点，还可以配合 Frame 宽度为 0 的 Hack 方式，保持不裁剪内容以显示拖拽点，实现相对定位的效果。除了长条进度，常用的圆环进度，可以直接通过上面提到的扇形工具，即便是组件后也能调节长度、粗细（真是强大）。
2.在创建列表的时候，可以通过调整 AL 中的内边距，轻松实现缩进效果。
3.在创建按钮结构时，一个文本添加 AL 就可完成自适应按钮（Sketch 要文字和背景分开 2 层），也可以通过 AL 轻松实现隐藏显示图标，自适应宽高达到自由组合的效果（希望下一代的 AutoLayout 即将支持相对、绝对定位）。当然 Component Variants 出来之后，结构的事情可以交给它来处理。
4.通过设定为 Spaces Between 可以实现 AL 内的元素均分排列，还可以通过减少父级 Frame 的宽高 来实现重叠的效果。（希望下一代的 AutoLayout 即将支持负间距）
5.在表格制作中，通过建立行级、列级 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 去制作。
1. 案例-Smart Animate
类似简化版 MD 卡片的悬停涟漪效果，通过 Frame+Radius 设定好两个关键帧，把浅蓝色的 Frame 层 放大填充至整个卡片（卡片打开 ClipContent 内容裁剪），在浅蓝色同一层级复制一份作为白色圈圈，从小放大 代替原来的浅蓝色圈圈。
另一个经典案例是简化版 MD 的 Float Btn，通过 Frame+Radius+ClipContent 设定好两个关键帧，先设计展开后的效果，再缩减成按钮会好制作一些。主要是设定好 Frame 内元素的约束，把内容设为 Left Top，把图标设定为 Bottom Right。缩减成按钮只需调整 Frame 的尺寸和调整内容的透明度为 0。同理也可以去实现类似 iOS AppStore 卡片点击后的转场。
2. 案例-Open Overlay
OpenOverlay 可以很方便地添加弹窗的动效，提供不同的位置和手动定位、是否启用蒙层外点击作为关闭、以及自动产生的蒙层颜色，还可以通过 Swap With overlay 切换不同的弹窗。
此外在真实的案例中，你可以给 X 母组件添加一个 Close Overlay 的交互，这样只要有弹窗层的地方都可以用 X 自动关闭。这也是子组件继承母组件交互的一种高效方式。
3. 案例-ScrollTo
简单实用的滑动动画，可以制作快速返回顶部、或者滑动到指定区域。在指定内容区域 Frame 为 Horizontal / Vertical Scrolling 横向或者竖向滑动后，给按钮新增一个 ScrollTo 的动作直接拖拽到刚才的内容区域 Frame，保持 X、Y 的偏移量为 0 即可，如果你需要滑动到内容区的第二个区块也可以，在此之上还能设定偏移量，避开如顶部导航条的遮挡。
在一些横滑的交互上，一般会对滑动卡片做一层 AutoLayout，左对齐并给一个 PaddingLeft（如绿色左边的间距），那么在 ScrollTo 上需要设定偏移量避免贴边显示（如淡红色块的间距）
注意，在滑动到最右时，即便 AutoLayout 设定了 PaddingRight，但 ScrollTo 并不会生效，需要添加一个额外的色块，设置为 0 透明度代替右边边距。
4. 案例-After Delay
课后有很多同学都提及这个骚气的小彩虹条怎么做，其实原理很简单想明白了就好。可以分两步实现：
彩虹条的自循环动画：创建三个并列的彩虹条（Constraints 约束调整为 Scale 缩放，便于后续做拉伸变形），设定组件 Frame 只显示一个的宽度，让这三个彩虹条不断地发生位移变化，并且让位置变化得到一个循环。
在这个过程中，通过 AfterDelay （1ms，即 1 毫秒无延迟），ChangeTo（Frame） 组件集内的切换动画切换不同的关键帧，SmartAnimate（Liner，2000ms）通过智能动画自动补间位移动画。
注意这里使用 Liner 匀速可以有无缝循环的感觉，如果使用其他缓动曲线也行，但会有一些顿挫感。2000ms 这个可以自行调试设定。
变形拉伸或改变角度：得到自循环的动画后，其实已经能够随意拉伸了。此时可以创建一个新的组件 Frame，拉伸填满并调整填充，即可得到一个自适应带角度的彩虹条了。如果还需要添加圆角，直接在组件 Frame 层设置圆角并勾选 ClipContent 即可。
同样，常用的 loading 也可以简单地通过旋转 3 次 120 度实现。
以上都只是冰山一角，更多需要你切身地去操作和了解交互功能，才能更好的理解它们。
1. 分享链接和权限管理
当我们在 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。
一般来说说使用付费团队就已经够用了，但是由于付费团队的每个成员都是可以使用个人账号登录，因为也会对管理带来一定的困难，因此也建议统计好团队成员的账号，及时警惕移除有问题或临时协作的用户。在设置编辑权限的时候，做到最小化权限分配，及时回收权限，避免因权限问题导致项目资源风险。
2. 审查元素
作为云协作的 Figma，自带了标注功能已经蛮完善的了。能够很直观的对尺寸、圆角、文字、填充、边框、效果、动效等进行标注注释：
对组件的解析：能够明确显示组件的名字，和上层组件的名字，并且提供定位源。同时显示组件的描述和文档链接（如有的话），进一步对组件的宽高、定位、圆角、混合模式、约束参考进行解析。
对文本、颜色的解析：提供文本的复制、字体规范代号，字体、字重、字号、行高的解析，对颜色提供色号、不同的色彩模式、线框等（对自定义虚线没有直接实现的值，但是也能以 SVG 形式解析对应的 Join、Cap、Dash pattern）
对代码解析：提供 CSS、iOS、Android xml 等解析，与同类产品一样仅作参考。
对动效的解析：提供触发器、目的地、动画、缓动曲线、时长等描述。
对切图资源输出：提供多倍率、多格式的导出。
基于 Figma 原生支持这么多的解析已经足够在开发阶段帮助开发查看设计稿具体的标注，而更多的期待可能是对 DSL 的理解和解析。
如果能对字体预设和颜色预设等 DesignToken 提供一键导出到 plist/Xml 的形式（具体类似 Zeplin 的 DSL），那对传达整体的原子设计理念有更完善地执行落地。
3. 编辑者和审查者的一个小差异
编辑者（你的视角）和查看者（开发视角）的 Inspect 模式有略微区别，如一个 icon 输出尺寸 192x192，内部路径可能 120x120。编辑者点击时是 192x192，查看者点击时会直接穿透，点到 120x120 的路径，导致开发大小不一致。
解决方法：
- 在图标组件上面设置一层黑色 0.001%-Screen 混合模式（避免颜色显示和导出有影响）
- 在图标组件上面设置一层白色 0.001%-Dark 混合模式（避免颜色显示和导出有影响）
- 和开发约定切图都是整数，如遇穿透问题，使用按 command+点击 捕捉显示 Frame 的大小。
总的来说，懒得解释就通过一层障眼法蒙在上面，也可以事先和开发做约定培训。
4. 切图输出交付
虽然市面上的很多交付插件都可以一键导出切图，但是往往实际开发的时候，不同的开发对同一个资源的命名方式不同，会导致重复引入不同名字但缺失相同的资源造成冗余，因此这块还是建议自行 通过 SVN、GIT 等进行版本管控资源和命名。
比较高级的方法可以参照《高效协作 I 资源库的协作方式》「1」、《使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付》「2」。
1. 和平营地使用 Figma 前的问题
规范不统一，效率低 → 建立视觉、开发组件库
视觉字号颜色规范、切图不统一、开发无组件化意识，协同设计效率偏低
设计资源缺乏管理 → 推动开发优化资源冗余
多个设计开发团队经手，历史遗留问题滚雪球 平台业务资源冗余
在使用 Figma 之后：情况就可以完全不同了，从交互设计到视觉设计，最后到策划审核和设计交付都可以在 Figma 上一站式完成，多人实时协作发挥了巨大的作用，更加敏捷了。
2. 营地的栅格样式
在营地中，定义以 4/8 作为基础网格标准建立常用的栅格间距、尺寸。
在图片比例上定义常用的 16 比 9、4 比 3、3 比 2、1 比 1 等在适配时保持等比缩放，以 CenterCrop 模式，避免适配时被拉伸压扁。
3. 营地的字体样式
在营地中，字体样式主要有常规系统字体和品牌字体 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 等见名知意的字体代号。在方便开发使用代号的同时，加快设计的统一判断选择。
4. 营地的颜色样式
在营地中，颜色样式围绕品牌色，参考行业同行对对比度可读性的研究，进行一系列的 色阶处理。对常用的实色、渐变、半透明渐变（蒙版）以 8 位 ARGB 提供对应色值。形成一套深浅对应的中性色和彩色体系。
此外对常用的头像、素材、图案作为填充预设，方便组件变体调整切换，避免使用插件产生随机的图像填充。
5. 营地的图标组件系统
在营地中，此次改版对名字和资源的管理都格外重视，想要轻松剔除冗余的资源，就要有一套合理可持续的规则管控切图资源，通过业务名_模块_类别_功能_状态_尺寸.格式规范管理切图。此外在组件的描述中加入适当的关键词，能够有效提高搜索图标的准确度。
6. 其他实用技巧
Selection Colors：
框选一个范围或者一个画板，会罗列检查出画板内所有颜色，对批量替换为规范色颇有帮助。
ClipContent：
有时候想在一个画板内裁剪（隐藏）超出的部分（类似蒙版，但局限于圆角局限），直接勾选 ClipContent 就可以啦！
宽度或者高度为 0：
设置宽度或者高度为 0.001，可以在自适应的按钮 AL 做出不占据宽高的，类似相对/绝对定位的效果。
7. 效率之王——快捷键
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
一键快速导出某个画板图片到剪贴板，方便复制粘贴到聊天窗口。
8. 给需求加状态描述，分享链接快速定位
如果你使用 Figma 一站式设计交付，那么通过自主设计一个自定义的组件，在 Figma 中划分区域告知开发哪些是进行中 ，哪些是可以进入开发的，并且直接罗列对应的组件，加强对组件的构建意识。
此外 Figma 对每个 Frame 都可以生成一个指向链接，那么右键这个框架就可以直接拿到链接，分享给产品开发，十分方便。
Figma 的社区集合了文件、用户、插件，在这里你可以找到很多优秀的设计范例，优秀的高玩用户，通过高玩关注 去看他关注了谁，站在巨人的肩膀上。
1. 用户
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，把以填充形式线型的图标转换以描边形式的线型图标。
2. 文件
你可以在社区里搜索开源共享的 Figma 设计源文件，从一些源文件中你能学习到别人使用 Figma 的一些技巧、规范，并且你也可以基于别人的文件做二次设计迭代。
3. 插件
Figma 的社区里少不了优秀的插件，通过下载和点赞数量，能够发现很多优秀的插件。
Figma 的插件你生态非常丰富，再此也推荐一些用过的，特别喜爱的插件我标了个心：
太多的插件介绍就不一一赘述了，也可以到一些插件网站了解。
FEATURED FIGMA PLUGINS
网站链接： https://figma.tovi.fun/
每月一期，给你推荐当月更新的、值得尝试的 Figma 插件。
Figma 中文社区
致力于在国内推广 Figma，这里有开发的 Figma 工具箱、设计资源精选、插件合集和 Figma 官方文档。
Awesome Figma Tips
网站链接：https://awesomefigmatips.com/tips
除了推荐插件以外，还用动图形式展示了各种 Figma 的技巧。
语雀-Figma 交流专栏
网站链接：https://www.yuque.com/annray/csoz4r/zsn8mi
除了插件推荐以外，从各类方向总结了一些经验。
从来不敢想象能在一个生产力工具上，如此玩出花。
在基于云协作的理念上，可以在上面制作一些小游戏，多人互动。
也可以在上面发布名片交友信息
又或者是做好设计简历简历个人网站和作品集
又或者像我现在用 figma 直接做 ppt 演示文档，还能当会议投屏给大家演示，非常好用。
当然 Figma 也向前衍生出 FigJam 致力于前期的一些想法收集，会议，用研等等，像白板一样简单好用。
附上整个 PPT-Figma 的分享链接：https://www.figma.com/community/file/993179495306722989，大家可以 duplicate 复制一份以后，点击右上角播放原型，查看 ppt 里的动效制作，自制了循环动效（顶部、封面封底的彩虹循环）、PPT 备注交互（按 P 可以显示当前页的备注）。觉得好的话记得点赞哟~欢迎随撩~
文中相关链接
- 《高效协作 I 资源库的协作方式》
https://isux.tencent.com/articles/tencentdocs-efficient-methods.html - 《使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付》
https://mp.weixin.qq.com/s/mRtHMo6P8cLzKtnDjpd4Hw
欢迎关注作者微信公众号：「JeasonDesign」
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
热评 名字长才能吸引你注意