Step 1: Open or Create a Figma File

• Start by opening an existing Figma file or whip up a new one. This is where the magic begins.

Step 2: Select a Layer or Object

• Click on any layer or object in your project. This will bring up the properties panel on the right side. Easy peasy.

Step 3: Access the Fill Section

• In the properties panel, look for the "Fill" section. This is where you’ll see the current color applied to your selected layer or object.

Step 4: Choose a Color

• Click on the color swatch inside the "Fill" section. This will open up Figma’s color picker. Time to get creative!

Step 5: Add Color to Styles

• In the color picker, there’s a tiny icon with four dots, arranged like a square, right next to the hex code field. Click this icon to open the "Color Styles" panel.

Step 6: Create a New Color Style

• At the bottom of the "Color Styles" panel, hit the "+" button to create a new color style. Give it a name that makes sense, like "Primary Blue" or "Secondary Text."

Step 7: Save the Color Style

• Once you’ve named it, click "Create Style" to save it. Your new color style will now show up under "Local styles" in the color styles panel. Voila!

Step 8: Re-using Color Styles

• To use a color style you’ve already created, click on the layer or object and go to the "Fill" section. Click the four-dot icon to open the "Color Styles" panel and pick the style you want from the list.

Step 9: Modify Global Styles

• If you need to change a color style globally, right-click on the style in the "Color Styles" panel and choose "Edit." Any changes you make will automatically update all instances where this style is used. Super handy, right?

Step 10: Organize Color Styles

• For bigger projects, it’s smart to keep your color styles organized. Figma lets you group styles in the "Color Styles" panel by prefixing the style name with categories, like “Buttons/Primary,” “Text/Heading,” and so on.

Step 11: Shared Libraries

• For even better consistency across multiple files or projects, use Figma’s team library feature. Save your color styles in a shared library so everyone on the team can access and use the same styles. Teamwork makes the dream work!

Step 12: Periodic Review

• Every now and then, review and refine your color styles, especially if the project grows or changes. Keeping your color styles updated ensures everything stays consistent.