Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Figma Crash Course: Learn UI Design Step-by-Step
Rating: 4.2 out of 5(11 ratings)
24 students

Figma Crash Course: Learn UI Design Step-by-Step

Master Figma basics, design clean UI screens, and boost your UX skills with hands-on lessons.
Created byIhor Yakymenko
Last updated 4/2025
English
English [Auto],

What you'll learn

  • Understand Figma’s interface and essential tools
  • Create responsive layouts using Auto Layout and grids
  • Build reusable components and design systems
  • Export assets for developers and real-world use
  • Design a polished Sign Up screen step-by-step

Course content

2 sections • 10 lectures • 1h 39m total length

  • Intro0:40

    Explore Figma UI design essentials for beginners with practical, beginner-friendly guidance from an experienced lead product designer, building clean, functional interfaces using real tools and techniques.

  • Basic Options5:15

    Create a new design file in Figma, add frames such as login screens for iPhone sizes, and rename or rearrange them on the canvas to prepare multiple screens.

  • Attributes Panel6:28

    Explore the attributes panel in Figma to customize shapes: rectangles, ellipses, polygons; adjust size, corner radius, fill, stroke, effects, and exports with simple keyboard shortcuts.

  • Auto-Layouts8:26

    Master auto layout in Figma by building a responsive action button with text and padding. Duplicate and expand button variants with icons while layout preserves sizing and spacing.

  • Master Components4:53

    Create a master component from any object, then drag instances to pages to reuse across project. Update the master, and all instances reflect changes automatically, from size to gradient fills.

  • Styles & Variables21:13

    Master styles and variables in Figma to standardize typography, colors, and spacing; apply h1/h2/p1/p2 styles and update them globally, using variables for consistent layout across projects.

Requirements

  • No prior design experience needed. Just bring curiosity and a laptop — I’ll guide you from zero to confident UI building in Figma.

Description

Want to learn how to design clean, functional user interfaces using Figma — without getting overwhelmed?

In this beginner-friendly crash course, I’ll guide you step-by-step through Figma’s most essential tools and workflows. Whether you’re new to UI design or transitioning from another platform, this class gives you the confidence and clarity to start designing like a pro.

We’ll cover:


  • Navigating the Figma interface

  • Using auto-layouts for responsive design

  • Creating components and reusable styles

  • Applying layout grids

  • Exporting assets for real-world use


You’ll apply your new skills in a hands-on project, where we’ll design a full Sign Up screen for a travel app — complete with input fields, buttons, a logo, and social sign-in.


This class is practical, fast-paced, and no-fluff. Just the essentials that matter.

By the end of this course, you’ll:


  • Understand how to work inside Figma with confidence

  • Design your first UI screen from scratch

  • Build a solid foundation for future design projects


This course is designed with beginners in mind, but even if you have some experience with design tools, you’ll benefit from the clarity and structure provided here. My goal is to make learning UI design feel approachable, rewarding, and fun.


Whether you’re looking to break into tech, work on freelance projects, or improve your design workflow, this course gives you the starting point you need.

Who this course is for:

  • Beginners who want to break into UI/UX design and need a practical, no-fluff crash course to start designing real interfaces using Figma.

Report abuse