07

    Using Colors, Gradients, and Fills

    By Nitin Khatri (Senior UI/UX Designer & Educator)
    Reviewed by Sarah Miller (Principal Product Designer (Reviewer))
    Updated
    Video Lesson: 07:45
    Level: Beginner
    Official References:
    Figma Help CenterFigma YouTube Channel

    Bring life to your designs by mastering colors and gradients. This lesson explores Figma's color picker, gradient tools, and fill types to enhance your visual hierarchy.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Apply solid color fills and adjust opacity levels
    • •Create and manipulate linear, radial, angular, and diamond gradients
    • •Utilize the eyedropper tool for precise color sampling
    • •Manage hex codes and RGB/HSL color formats

    What You'll Learn

    1. Understanding the Figma Color Picker
    2. Building complex gradients with multiple stops
    3. Using blend modes for creative fill effects
    4. Introduction to document-wide color management

    Key Concepts

    Color Theory in UI
    Gradient Management
    Opacity vs. Fill
    Blend Modes

    Key Takeaways

    • ✓Color is applied via the Fill and Stroke sections of the Properties panel.
    • ✓Gradients add depth and are controlled by adjusting color stops.
    • ✓The eyedropper (shortcut 'I') is the fastest way to reuse colors.
    • ✓Consistency in color usage is key to a professional-looking interface.

    Practice Tasks

    Visual Depth with Fills

    Experiment with different fill types to add dimension and visual interest to your shapes.

    • Apply a solid brand color to a frame background
    • Create a shape with a 2-stop linear gradient
    • Adjust the opacity of a color fill to 50%
    • Use the Eyedropper tool to sample a color from an existing shape
    • Switch a fill from 'Solid' to 'Radial' and adjust the light source

    Knowledge Check

    Pass with 70% or higher

    1. Which of the following is NOT a type of gradient available in Figma's Fill menu?

    2. How can you sample a color from an image or another object directly onto your selected shape?

    3. What is the difference between 'Fill' opacity and 'Layer' opacity?

    Lesson FAQ

    Q: How can I practice what I learned in this lesson?

    We highly recommend opening your own Figma workspace in a side window and repeating the steps shown in the video. Utilize the tasks checklist above for specific practice targets.

    Q: What should I do if my layout behaves differently from the walkthrough?

    Double-check parent-child constraints and resizing values (e.g. Hug vs Fill). Ensure Auto Layout direction is correct and check the related guidebooks below for step-by-step visual references.

    Lesson Resources & Connections

    Prerequisites

    No prerequisites required. This is a foundational starter lesson.

    Related Guidebook

    How to create responsive layouts in Figma using Auto Layout

    Read Guidebook →

    How to use Auto Layout for cards and lists in Figma

    Read Guidebook →

    Relevant Design Tool

    Palette Generator

    Build system color variables.

    Open Companion Tool →

    Color Converter

    Convert Hex, RGB, HSL values.

    Open Companion Tool →

    Next Lesson

    Working with Images and Media