Figma菜鸟教程：色彩+团队色彩复用方法

一：色彩介绍

1、认识Figma色彩

绘制一个形状，右侧属性栏看到填充色值；单击在颜色弹框中可以任意调整颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

颜色面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

这个“小水滴”icon就是图层样式入口：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

图层样式入口文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

点击“小水滴”icon，就可以看到各种图层样式，正片叠底、绿色、叠加、柔光、强光等等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

图层也支持各种图层样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

图层也支持图层样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

2、吸取颜色方法：

方法1：吸取颜色：Ctrl+C；（和Sketch中吸色快捷键一样。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

方法2：快捷键I；（同AI中吸色快捷键一样。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

吸取颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

3、快速调整颜色：

按住键盘的上、下键，可以快速移动颜色值修改颜色；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

并且在“下”时，颜色会往右下；在“上”时，颜色会往左上。 在按住“上”或“下”的同时按住shift，可以加速调节颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

也可以选中颜色值中间2位，“上”、“下”光标移动，调整颜色；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

上、下光标调整颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

快速调整不透明度：鼠标滚轮滚动 + 按住alt（option）键；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

快速调整不透明度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

4、快速选择使用同一颜色的元素；

框选所有元素，在右侧“已选的颜色”项下，选择某一颜色后，最右侧的靶icon，点击一下，系统就可以帮我们选中使用该颜色的所有元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

快速选中使用同一颜色的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

二、 颜色的复用及调用；

1、步骤：

（1）绘制一个图形；点击如下图：填充右侧的“样式”icon，在弹窗中，选择右上角的“+”新建样式；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

新建样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

（2）创建新的颜色样式下，输入名字和描述（可写可不写）；新建样式完成！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

（3）接下来，我们再绘制元素，想要使用之前的图层样式颜色；直接再点击“样式”，选择下边我们上一步加好的颜色即可；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

2、修改颜色样式；

颜色样式有网格模式和列表模式；操作方法略有不同；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

（1）网格模式下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

假如建好的颜色样式后续需要修改；鼠标右键单击，然后选择编辑样式；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

编辑样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

在弹窗中，点击左下角属性下的色框，在弹出的色板上调色即可；这样整个颜色样式就修改了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

编辑样式重新调色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

（2）列表模式下：

列表模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

假如建好的颜色样式后续需要修改；该颜色样式后，点击“编辑样式”图标；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

编辑样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

在弹窗中，点击左下角属性下的色框，在弹出的色板上调色即可；这样整个颜色样式就修改了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

编辑样式重新调色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

3、改变其中某一元素颜色：分离样式。

当某一元素不希望使用之前建好的颜色样式时，点击右侧：“分离样式”；然后就可以单独编辑这个元素的颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

分离样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html

Figma颜色个人绘制部分的知识，大概就这些；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/34953.html