Figma color component & gradient components

Pick the colors & gradients

To pick, the color & gradient find the local variables section in the upper right corner. just click on the icon, and you'll see the colors and the gradient variables.

Customize your Color

if you want to change colors or names, just go to main color in variable section & chose color from color picker from pop up.

Color Tokens

The main reason for using color tokens is to Swap the colors. also, color tokens bring consistency to the design, and improve workflow efficiency. and main Features like global theming (dark mode), responsive design, and user customization are possible with tokens.

If you already have a color style and variables in your design system, and if you want to change color, go to color style and update color from the color picker after that figma automatically applies the changes to all instances where that color style is used in your design system.

Edit or add and remove color tokens

to add a color token, Go to the local variables library find create variable button, and click on it after that, you need to add color for style or variables, and if you use dark and light moods for your design system then you need to add two colors for a particular mood.

For removing a color token or any Color variable, the steps are simple. just right click on the token or color variable then select the delete option from dropdown

Edit or add and remove color tokens

to add a color token, Go to the local variables library find create variable button, and click on it after that, you need to add color for style or variables, and if you use dark and light moods for your design system then you need to add two colors for a particular mood.

For removing a color token or any Color variable, the steps are simple. just right click on the token or color variable then select the delete option from dropdown