05

    Working with Shapes and Graphics

    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

    Master the creation of visual elements by exploring Figma's shape tools. This lesson covers how to create, manipulate, and combine geometric primitives into complex graphics.

    Complete tasks and quiz to finish this lesson.
    Tasks
    Quiz

    Lesson Video

    Lesson Content

    Learning Objectives

    • •Create and modify rectangles, circles, polygons, and stars
    • •Use corner radius and point manipulation for custom shapes
    • •Apply basic transformations: rotate, flip, and resize
    • •Identify when to use specific shape primitives for UI elements

    What You'll Learn

    1. Overview of the Shape Toolbar
    2. Advanced corner radius and smoothing techniques
    3. Modifying polygons and creating star shapes
    4. Transforming shapes for icons and UI components

    Key Concepts

    Vector Primitives
    Corner Smoothing
    Shape Transformation
    UI Iconography

    Key Takeaways

    • ✓Figma offers a variety of versatile shape primitives for design.
    • ✓Corner rounding can be applied to individual or all corners.
    • ✓Hold Shift while drawing to maintain aspect ratios for squares and circles.
    • ✓Shapes form the basis of most custom UI icons and background elements.

    Practice Tasks

    Geometric Logo Construction

    Use shape tools and corner radius to create a simple abstract icon or logo.

    • Draw a square and apply a corner radius of 20px
    • Draw a circle and align it to the center of the square
    • Use the Polygon tool to create a triangle
    • Adjust the 'Smoothness' of the corners using the independent corner settings
    • Rotate one shape by exactly 45 degrees using the Properties panel

    Knowledge Check

    Pass with 70% or higher

    1. Which setting in the Properties panel allows you to round the corners of a rectangle?

    2. What is the result of increasing the 'Count' value for a Polygon shape?

    3. What does 'Corner Smoothing' (iOS style) achieve when applied to a shape?

    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

    Image Compressor

    Reduce asset size before export.

    Open Companion Tool →

    Next Lesson

    Adding and Styling Text in Figma