Color is more than decoration; it communicates brand and hierarchy.
1. Why Color Matters in UI Design
Color defines emotion, builds hierarchy, and strengthens brand identity. It’s not just about making things look good, it’s about guiding user attention and creating clarity.
- Primary colors draw focus to buttons or key actions
- Accent colors highlight secondary information
- Neutral tones balance layouts and ensure readability
2. Creating Colors in Figma
Everything starts with a Fill.
- Select any shape, icon, or text.
- In the right-hand Properties panel → Fill, click the color box.
- Pick a color from the palette or enter a HEX/RGB value.
- Adjust Opacity or Blend Mode for effects like shadows and highlights.
Use gradients (linear, radial, angular, or diamond) to create depth.
3. Setting Up Color Styles
To maintain consistency, turn your colors into Color Styles.
How to create a Color Style:
- Select a layer with your color.
- Click the Style icon (••••) next to Fill.
- Choose “Create style”.
- Name it clearly e.g., Primary / Blue 500.
Now, updating this style automatically changes every layer using it.
- Primary: Blue / 500, Blue / 700
- Neutral: Gray / 50, Gray / 900
- Accent: Green / 400, Yellow / 300
- Background: White, Off-white
4. Applying Styles to Layers
- Apply Color Styles to text, shapes, icons, and buttons.
- Use Global Styles to maintain brand consistency across pages.
Tip: Updating a single Color Style refreshes all components automatically.
5. Combine with Other Styles for a Design System
Once Color Styles are ready, expand your system with:
- Text Styles (headings, body, captions)
- Effect Styles (shadows, blurs, glows)
- Grid & Layout Styles (consistent spacing)
This forms a scalable, reusable design system in Figma.
6. Practice Exercise
- Draw 4 rectangles on your canvas.
- Apply brand colors as fills.
- Turn each into a Color Style.
- Build a small “UI Kit” frame showing your palette.
👉 You’ve just created your first color system in Figma!