分享 | figma从零基础到精通的学习笔记三

在了解了基础的规范知识后，画了一张总结图。从颜色、布局、图标按感觉能理解到的做的总结。无论是IOS还是安卓的系统都会规定一些文字颜色、规定的基础控件通过这些去组成页面。组件化的思路是用规定好的基础元素及规范去做设计。

比如颜色规范、字体规范。

存储颜色之前先把颜色给定义出来。

创建好后的显示是这样的。

文字样式的操作和颜色样式的操作一样，新建样式并命名样式名称，方便下次使用。

以此类推，做了卡片的样式。

同样布局网格也可以做成样式，方便之后使用。

这里有两种方式添加组件，方法一直接在右边的菜单工具栏添加；方法二是鼠标右键单击也可以添加组件。

拖出来的组件是子组件，主组件是第一个做的组件。子和主的区别是一个是实心，一个是空心。子组件听从于主组件，因为改变了主组件的大小或者样式子组件也会跟着一起变样式。

组件除了改变样式之外，却不可增删改变图层结构，但样式可以重置，同时可从主组件分离把样式覆盖到主组件。

按钮的分组，直接用/命名就可以把组件进行分组了。

同一个组件的多种状态

在做设计的时候需要做大量的设计文件，从按钮到标题栏到提示框，不同的功能元素同一个组件会有多种状态，单按钮来讲就有多种不同的状态，如强化状态、弱化状态、失效状态、警示状态；还有按钮样式的不同，从大到小的按钮、纯文字的按钮、文字加上图标的按钮。如果把每一个都做成组件样式，从管理上来讲有点乱和不好查找，针对这样的情况就用Figma的组件变体功能。

在做变体之前先需做好组件，有了组件开始创建变体。

点击后有了虚线的描边，但是没有添加色彩，点击添加画板添加颜色即可。

按下回车键就可以选中里面的两个组件。

修改名称一定要选中整个画板面板。

实操练习：

写到这里，看看效果。