figma 安装插件_使用figma插件快速生成颜色系统

figma 安装插件

In Figma, using defined styles (colors, type, effects, etc.) early and throughout a design project can have a lot of positive impact on your efficiency and output. I’m not necessarily here to sell you on using styles in Figma, but I would like to show you how to take a somewhat tedious process—setting up all the styles for a basic color system—and speed it up.

在 Figma中，在整个设计项目中及早使用定义的样式 (颜色，类型，效果等)可能会对您的效率和输出产生很多积极影响。 我不一定要在这里向您介绍在Figma中使用样式的情况，但我想向您展示如何进行一些乏味的过程-为基本颜色系统设置所有样式-并加快速度。

TL; DR (TL;DR)

This really is a simple process, but some of the steps require a fair amount of explanation. So, I wanted to include a brief TL;DR for those who don’t need all the additional detail.

这确实是一个简单的过程，但是其中一些步骤需要大量的解释。 因此，我想为那些不需要所有其他细节的人提供一个简短的TL; DR。

1. Create a shape layer and duplicate it as many times as the colors needed in your color system.
   创建一个形状图层，并根据颜色系统所需的颜色对其进行多次复制。
2. Uniquely name each of the shapes. These names will determine the names of the color styles.
   分别命名每个形状。 这些名称将确定颜色样式的名称。
3. Set the color of each shape layer appropriately to the needs of your color system.
   根据您的色彩系统的需要，适当设置每个形状图层的颜色。
4. Select all those shapes and launch the Chroma Colors plugin to instantly generate the color styles.
   选择所有这些形状并启动Chroma Colors插件以立即生成颜色样式。

Optional — select all the shapes and place them into an Auto Layout. With the shapes still selected, launch the Smart Text plugin to add a text label with the color name and hex values.

可选-选择所有形状并将其放入“自动布局”。 在仍然选择形状的情况下，启动“智能文本”插件以添加带有颜色名称和十六进制值的文本标签。

A super basic color system 超级基本的色彩系统

That’s pretty much it. Continue reading for a more in-depth description.

就是这样。 继续阅读以获得更深入的描述。

If you’d rather see how this is done via video, I recently posted a video on YouTube showing the same process.

如果您希望通过视频了解如何完成此操作，我最近在YouTube上发布了一个视频，展示了相同的过程。

Note: I’m on a Mac and some of the keyboard shortcuts mentioned are platform specific. If you are on Windows, I believe you can swap out “control” for “command”.

注意 ：我使用的是Mac，提到的某些键盘快捷键是特定于平台的。 如果您使用Windows，我相信您可以将“控制”换成“命令”。

Not to overcomplicate things right out of the gate, but to clarify some terms I use throughout the article, you can refer to the graphic below to see what I mean by “Color Swatch” or “Color Chip”.

并不是为了使事情复杂化，而是要澄清我在整篇文章中使用的一些术语，您可以参考下图，了解“色板”或“色片”的含义。

The anatomy of components used in this color system 此颜色系统中使用的组件的解剖