Figma是什么软件？

近些年来，设计和开发的边界愈发模糊，数字产品也逐渐涉及更多领域。众多设计工具应运而生，其中Figma成为了业界公认的协同设计工具之一。本文将分享关于Figma设计的经验和见解。

一、什么是Figma？

Figma是一款基于浏览器的协同设计工具，它主要用于界面设计、原型设计和用户体验设计。Figma致力于将设计师和开发人员之间的沟通极限上升，通过实时协作和云端存储，设计师可以随时随地创建、分享和协作设计项目。应用它的优点之一就是多人协作，包括设计师、工程师和产品经理等多个角色可以同时在一个项目上工作。

二、Figma的主要功能

1. 多人协作：团队成员可以通过同时编辑同一设计项目来进行协作，Figma带来的多人协议使得设计师和项目经理之间的沟通变得更加快捷高效。

2. 云端存储：使用基于云端的设计工具，可以随时随地存取设计文件，彻底解决了备份的问题。在需要的时候，你可以随时访问你的Figma设计项目，而不必担心数据丢失。

3. 支持多种文件格式：Figma支持Sketch、Photoshop和Illustrator等主要设计软件的文件格式导入，也可以轻松地将Figma文件导出到他们支持的文件格式。

4. 实时协作：设计师可以一起实时编辑同一个项目，而无需考虑版本控制等问题，这大大增强了协作效率。

5. 全平台支持：Figma支持Mac、Windows和Linux等多个操作系统，同时也为移动端提供了APP，使人们在各种设备和平台上都能使用Figma进行设计工作。

6. 布局自动化：Figma具有智能自动布局功能，这让设计师可以将沉重的工作转交给软件，使整个设计过程变得更加的流畅而且更具可控性。

7. 互动设计：除了创建静态设计，Figma支持动态和交互式设计。通过它，设计师可以创建完整的交互原型，测试和优化用户体验，变得更加的自然。

三、Figma设计的实践

1. 设计元素的重用

在使用Figma进行设计时，应该尽可能优先考虑代码前端的可重用元素。这就表示，不必要每次重复造轮子，只需直接复制和粘贴已经存在的元素部件。这样不但提高了工作效率，还可以降低后期维护工作的成本。

2. 合理规范的命名

使用Figma进行设计时，规范化的命名是非常关键的。不仅在独立的文件中如此，而且在团队合作中也很重要。通过清晰的命名系统，所有的用户可以清晰地看到每个元素的特征以及其意义。

3. 使用component

Component是Figma中的一项独特功能，提供了一种让设计师将一组相似的元素组合起来并设为一个独立的功能部件的方法。这个特性可以作为框架的基础功能，使得Figma的展现可以更加动态化和变化。

4. 保持一致的布局

组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。

随着设计工具的不断发展，Figma 逐渐成为各大公司的主流设计软件。Figma 强大的组件库能力，非常适合团队设计系统的建设与应用。相比 Sketch，Figma在 Auto layout、变体和实例等方面极大的提升了设计灵活度和效率。

看完本文你将会学到：

1. Sketch 与 Figma 组件库的区别

2. Figma 组件库搭建经验分享

基础样式：字体（分层分级技巧）、颜色（分组排列规则）、阴影（分类、三层阴影）等

组件与变体：组件分类结构化原则、变体创建命名技巧、优化变体层级、组件预览展开还是合并、开关的使用和组件的链接等

组件文档：文档结构层级

组件库发布、使用、更新

3. Figma 组件库搭建 Tips 分享

先简单聊一下为什么要做组件库？

组件库是将界面设计中的具有通用性和标准规范的基础元素和重复出现的控件进行归纳整理，通过对控件进行分类和命名，最终形成一个可快速复用，便捷维护的资源库。对于设计师和开发来说，简单上手，可复用强，稳定且高效的组件库是非常有必要的。组件库更像是一个强大的工具库，既能提高团队的协作效率，也能保证团队设计输出的统一性、高效性和延续性。

相对 Sketch，Figma 组件库有哪些特点？

在 Figma 之前，我们都习惯了用 Sketch 创建组件库。但当开始使用 Figma 后，发现 Figma 不仅继承了 Sketch 组件库的优点，并且更加灵活和强大。

举一个简单的例子，如果想要修改组件的文本样式或者不同组件的颜色时，在 Sketch 中，就必须提前做好所有可能的文本/图层样式，非常的费时费力。但 Figma 强大的实例 Instances 功能，无须提前做好所有的样式，可以直接在实例上修改字体、颜色、描边、投影等，但又不会干扰到父级的样式，而修改父级的样式又能修改全局，非常的方便。又比如想要去切换一个按钮的状态，或者是否带图标时，Figma 强大的变体功能可以将这些属性进行分类整合在一起，组件调用更便捷，这都是 Sketch 组件不具备的功能。

除了实例、变体功能外，跨团队使用组件库（样式、组件）、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能，都是 Sketch 不具备的。

Figma 组件库搭建

提到组件库，不得不提到原子构建理论。Atomic Design（原子设计）是构建 Design System 的核心指导理论。化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。

1. 组件库：基础样式搭建

我们可以直接在文档里创建样式库，简单且灵活。当然更建议大家单独创建一个全局样式的文件，包括颜色、文字、效果等，这样做的好处是在以后进行项目切换时，可以很方便快速的进行配置和替换，且可以共用一份原始的组件，高效且有关联性。

这里要跟大家提一个概念 Design Token。Design Token 是存储样式值（如色值、字重、阴影、圆角等）的载体。Design Token 最重要的意义是做到设计与研发的样式完全打通，进行无损耗的沟通，增强系统的可维护性，同时可以约束设计侧的样式数量。但是 Figma 本身对 Token 的支持不够全面，比如圆角等，所以需要自研插件来弥补这些不足。

全局样式：颜色样式

颜色是页面整体风格表现的重要基本元素，它可以建立品牌的识别性，梳理页面的视觉层级关系，突出内容并平衡其他视觉元素。建议大家可以按照功能和属性，将颜色进行分组分类命名，比如主色、浅主色、中性色和功能色等，并将默认、悬浮、点击、禁用等颜色放在一组，方便大家使用。

全局样式：文字样式

在文字样式中会包括：字号、字重、行高和字距等。在创建文字样式前，将文字样式分为段落样式和文本样式加以区别。将产品内的一些文字梯度以及功能描述等用表格的形式进行整理，并分别创建相应的字号和字重。需要注意的是不要单纯的将名称命名为 T0、T1 等纯符号性的名称，可以在后面加上适当的描述，比如 T0 辅助、T1 标准等文案，同时也可以在描述里添加对应的使用说明，这样当鼠标悬浮在这个样式上，会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式，会更加方便大家调用且能够很好的解除新用户的使用疑虑。

全局样式：效果样式

效果样式一般来说主要是常用的阴影样式，比如外阴影、内阴影等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式，让阴影更加柔和，更符合真实光源下的物体状态。物体的高度直接影响阴影，离地面越高阴影越大，模糊值越高，反之相反。

同时，为了让组件库阴影层级更加丰富通用，我们将阴影层级划分了 S 类和 L 类两个层级。S 类阴影用于通过交互后出现的场景，其内容带来上下文信息切换，需要抢占用户注意力，更需要提供明确的边界，主要用于基础组件。L 类阴影往往用于多个共存的列表，更加强调整体的柔和性，主要用于导航、首页、模版等业务场景。同时为了能让大家更加清晰的区分阴影的层级，会将常用的一些组件和场景填充在一个表格中，方便大家查阅。