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
Select colors based on brand colors, click the "Add Palette" button in the upper right corner to create new colors.
(You can also try Google's M3 method, which is similar, website: https://m3.material.io/styles/color/system/overview)
Step 2! How to import the color pool into Figma?#
Open the 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:
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. I won't elaborate on the correspondence between light and dark; 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 for reference, it's simple 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 the 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 talk about the Branch feature of the Figma org version, ensuring that you, as a programmer, can understand it too.