本篇主要讲的是利用figma做ToB的基础设计规范，解决的主要问题是设计和开发效率问题,在最初还在用ps做设计的年代，普遍存在的问题是设计图的界面元素偏差，颜色运用混乱等问题，导致后期开发过程中，出现买家秀和卖家秀的情况。

如何解决这一问题？成了设计师最先要去解决的问题，后来设计师慢慢的转变工具的使用，有些团队用xd，有些团队用sketch,有些则选用figma,不作过多评价哪个工具好。在网上看了一些文章，如果把设计工具比作汽车，你又会怎么选择？

在这里我选择了figma,接下来和我一起来看看吧。

一， 组件特征

二， Figma实操讲解

三，基础组件规范

            1，Color 颜色规范

            2， Font 文字规范

            3， Icon 图标规范

            4， Layout 间距系统

            5，Button 按钮规范

            6， Form 表单规范

            7，Table 表格规范

            8，TreeView 树结构

            9，Nav 导航

四， 结语

一，组件的特征

一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

1，通用性：意味着足够基础和常见且不带业务属性，参与设计环节的每个人都应该知道这个组件的功能及目的，同时具备一定扩展性。
2，灵活性：要求元件的组合需灵活，可以在不同场景下通过互相组合来快速搭建交互框架原型图，并根据不同页面结构的演变来适应新的业务需求。
3，复用性：指的是适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。

二， Figma实操讲解

在这里我讲一些，在做组件的过程中，我常用到的一些操作

命名规则

可以用斜杠对图层名称进行分组，你也可以使用相同的方法对本地颜色样式中的颜色进行分组。

创建组件

首先将frame命名，这样有利于后期管理组件

创建单个组件的快捷键“ctrl+alt+k"

创建多个组件，同时选中多个 Frame，再把鼠标移动到顶部组件图标上，在下拉菜单中选择“create multiple components”就可以创建多个组件了。

管理组件

框选需要命名的组件，右击rename，快捷键“CTRL+R”,方便高效管理组件分组

快速切换组件

切换组件有两种方式

第一种：组件切换和sketch差不多，需要自己去找组件，适用于组件较少的情况下

第二种：拖拽替换，快捷键按住ctrl+alt并拖拽组件替换，配合搜索功能超好用

创建本地样式

创建一系列本地样式，比如主色调，文字颜色，阴影大小等，用到样式直接调定义好的颜色，方便后期的修改

智能选择

一次选择多个元素，并拖拽它们之间的线来调整间距，你还可以单击对象中心的圆圈并拖动它来重新定位元素。

批量选择子元素

选中元素，按回车键，批量到父级的下一级，这种方式做定位很好

有趣的图形

自带 Arc 工具，变成一些很酷的其他图形

插件

因为figma也有很多团队在用，有些团队整理的非常好，这是YUX团队整理的插件链接：https://www.zcool.com.cn/article/ZMTA2NDQyNA==.html

三，基础组件规范

颜色规范

文字规范

图标规范

间距系统

按钮规范

表单规范

表格规范

为大家展示一下，用组件搭建好的表格

树结构

无线连接树

先定义三种树状态，展开，收起和子集，每个树的line-height为40px

有线连接树

定义五种状态主组件，分别是一级展开，一级收起，中级展开，中级收起，子集，这里需要注意的是在做组件时树的线可以延展

导航

导航部分组件的设计规范，分类参考了antui，然后结合公司的实际业务做了修改，大家在做组件时也可以参考一下。

Antui地址：https://ant.design/components/overview-cn/

四，结语

以上内容是我整理的一些，B端的基础设计规范，在这个基础上可以做些延展，使自己的组件库更加适用于自己的项目，用起来更加方便，这篇文章分享给大家，希望大家喜欢，不足之处也欢迎大家给我留言。