Separating color and style is the underlying logic for managing colors in Figma. The key is separation.
Step 1! How to obtain the color pool:#
Generate gradient color content using algorithms:
Recommended tools:
Online: https://arco.design/palette/list
Open source: https://github.com/arco-design/color/tree/main
Choose colors based on brand colors, click the "Add Palette" in the upper right corner to create new colors.
(You can also try the Google M3 method, which is quite similar, website: https://m3.material.io/styles/color/system/overview)
Step 2! How to import the color pool into Figma?#
Open Figma Community and search for: Design Tokens Manager
Or click the corresponding link directly: https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager
Create a new Google Sheet
Here's mine:
https://docs.google.com/spreadsheets/d/197IeXYZS4Oe3Y_ZZtR6J99kHZwQoojBsUsQQgT-UuXo/edit?gid=143372084#gid=143372084
Paste the Tokens you want to import:
The effect after import:
Note that at this point, the Sheet name at the bottom of Google Sheets corresponds to the name of the Collection in Figma, while the groups on the left correspond to the groups within $Name in the table. The correspondence between light and dark is straightforward; in short, they correspond one-to-one.
Step 3! How to connect secondary colors with the color pool from Step 1?#
- Find your current color application Collection, then select the colors within light. Next, find the "Color" we just added and select it. At this point, you can choose any color (in the future, you can only select from the "Color" Collection).
Step 4! Establish structured styles in Figma#
Here are the details:
Here is my overall framework:
(Just a reference, it's easy to draw a mind map yourself)
At this point, after completing the four steps, you have obtained a style library in the Color section of your Figma design system that separates color values from the final applied styles.
Next time, I will teach you how to manage Text, Spacing, Shadow, and other small elements in a column, greatly improving the efficiency of your design system.
Or we can discuss the Branch feature of the Figma org version, ensuring that you, as a programmer, can understand it as well.