Skip to main content
CF

The Beginner's Guide to Figma

24m 19s
English
Paid
Updated September 2026

The Beginner's Guide to Figma is a 10-lesson 24 minutes self-paced course by egghead.io. Figma is built for designing interfaces that respond well across devices, with resolution presets ready for most popular screen sizes.

Course facts

Lessons
10
Duration
24 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
egghead.io
Price
Premium

Figma is built for designing interfaces that respond well across devices, with resolution presets ready for most popular screen sizes. This short course covers its core toolset for exactly that kind of responsive design work.

Starting from a blank file, you work through scenarios you'd actually run into designing a website or app, building up to reusable design elements — Figma calls them components — and finishing with prototyping: wiring up screen transitions and state animations so a design can actually be clicked through like a working app.

At 10 lessons, it's a focused introduction meant to leave you with enough of the basics to use Figma confidently on your next design.

We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state.

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

Additional

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=0:1

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=50:3

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=113:26

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=115:30

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=76:12

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=141:44

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=143:15

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=143:70

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=163:86

https://www.figma.com/file/VrNgGY4JsPNLt6GHS1dS5qog?node-id=163:87

Who teaches The Beginner's Guide to Figma? egghead.io

egghead.io thumbnail

egghead.io is a US-based subscription video platform focused on short, focused screencasts on JavaScript ecosystem topics. Founded in 2012 by John Lindquist (a Google Developer Expert) and run by Joel Hooks, egghead pioneered the short-screencast format that most modern developer-education platforms now use — courses are typically broken into 2-5 minute lessons that each cover one specific concept or API.

The instructor roster includes many of the most cited names in the JavaScript ecosystem — Kent C. Dodds (whose Testing JavaScript launched on egghead before EpicWeb.dev), Andrew Del Prete, Hannah Davis, Lukas Ruebbelke, Tomasz Łakomy, Andy Van Slaars, and many others. Course material covers React, Next.js, TypeScript, Node.js, GraphQL, Vue, the testing tracks, RxJS / observables, and a long list of smaller libraries and tools.

The CourseFlix listing under this source carries over 20 egghead courses spanning that range. Material is paid; egghead itself runs on a monthly / annual subscription on the original platform. The bite-sized format suits developers learning incrementally during work hours rather than committing to multi-hour video sessions.

What lessons are included in The Beginner's Guide to Figma?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 10 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Create a Mobile, Tablet and Desktop Frame in Figma
All Course Lessons (10)
#Lesson TitleDurationAccess
1
Create a Mobile, Tablet and Desktop Frame in Figma Demo
01:01
2
Build Reusable Designs with Figma Components
03:47
3
Add a Reusable Figma Component to Multiple Frames
02:15
4
Create a Simple Icon with Figma Ellipse and Pen Tool
02:02
5
Duplicate Grouped Vectors to Create a Patterned Logo in Figma
02:15
6
Establish a Typography System in Figma with Text Styles
02:59
7
Create Figma Color Styles to Reuse Across Frames
04:05
8
Reuse a Drop Shadow in Figma with Effect Styles
01:55
9
Prototype a Screen Transition in Figma
02:17
10
Export and Share Figma Frames
01:43
Unlock unlimited learning

Get instant access to all 9 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to The Beginner's Guide to Figma?

  • Learn Figma - UI/UX Design Essential Training thumbnailUpdated 2y ago

    Learn Figma - UI/UX Design Essential Training

    By: Udemy
    Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w
    3h 55m5/5
  • Design System Course for Figma thumbnailUpdated 5mo ago

    Design System Course for Figma

    By: Headway
    Master the creation of design systems in Figma. A course for designers, developers, and managers seeking efficient work practices and up-to-date knowledge.
    12h 20m
  • Figma for Web Designers thumbnailUpdated 2y ago

    Figma for Web Designers

    By: Flux Academy (Ran Segall)
    If you've ever found yourself overwhelmed by Figma's extensive features or wished your workflow could be more efficient for web design projects… Then this.
    5h 31m5/5
  • Beginner Figma Video Course thumbnailUpdated

    Beginner Figma Video Course

    By: Andrija Prelec
    Learn Figma from the ground up, no design background needed, covering core tools, everyday workflow, and advanced tips for real projects.
    3h 22m5/5
  • Mastering Figma thumbnailUpdated

    Mastering Figma

    By: Level Up Tutorials (Scott Tolinski)
    A step-by-step Figma course covering the interface, design principles, and team collaboration features through hands-on projects.
    3h 37m
  • Motion Design with Figma: Animations, Motion Graphics, UX/UI thumbnailUpdated

    Motion Design with Figma: Animations, Motion Graphics, UX/UI

    By: Zero To Mastery
    Learn motion design in Figma across 161 lessons: Smart Animate, micro-interactions, transitions, and portfolio-ready animation projects.
    10h 11m
  • Pixel Perfect Figma to Tailwind thumbnailUpdated 2y ago

    Pixel Perfect Figma to Tailwind

    By: Pro Tailwind (Simon Vrachliotis), Simon Vrachliotis
    This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development.
    2h 40m

More courses by egghead.io

Frequently asked questions

What prerequisites are needed for enrolling in this course?
This course is designed for beginners with no prior experience in Figma or design tools. Basic computer skills and familiarity with web navigation are sufficient to get started.
What kind of projects will I build during the course?
Throughout the course, you will engage in creating various design elements such as mobile, tablet, and desktop frames, reusable components, simple icons, patterned logos, and prototypes for screen transitions. These projects will help solidify your understanding of Figma's design capabilities.
Who is the target audience for this course?
The course is aimed at anyone interested in learning the fundamentals of Figma, particularly those new to design or looking to transition from other design tools to a collaborative platform like Figma.
How does the depth of this course compare with other Figma courses?
This course focuses on the basics of Figma, covering fundamental tools and functions such as creating frames, components, and prototypes. It is suitable for beginners, whereas more advanced courses might cover complex design systems or advanced prototyping techniques.
What specific tools or platforms are covered in this course?
The course specifically covers Figma's design tools, such as the ellipse and pen tools for icon creation, typography and color styles for design consistency, and effect styles like drop shadows. You will also learn how to export and share your designs using Figma.
What topics are not covered in this course?
The course does not cover advanced functionalities such as Figma's auto-layout features, advanced prototyping interactions, or integration with other tools like Sketch or Adobe XD. It is focused on providing a solid foundation in the basics of Figma.
How can skills from this course benefit my career or other courses?
Skills gained from this course will benefit careers in UI/UX design, graphic design, and any role requiring collaborative design tools. The foundational knowledge of Figma can also serve as a stepping stone for more advanced design courses or tools, enhancing your design proficiency and versatility.