Start learning Figma for UI/UX design. Gain a solid understanding of its capabilities, from creating files to designing on a grid, working with text/photos/colors, creating components, building prototypes, exporting assets, sharing files, creating animations, and more.
Overview
Syllabus
Section 1
Creating a New Figma File
- Creating a new file
- Setting up frames (other apps call these artboards)
- Setting up a Layout Guide
Designing on a Layout Guide (like the Bootstrap Grid)
- Designing on a Layout Guide
- Adding text
- Creating colored backgrounds for text columns
Importing & Cropping Photos
- Importing & cropping photos
- Rounding corners
Vector Graphics, Colors, Shadows, & More
- Importing vector graphics
- Aligning & distributing layers
- Layer opacity vs. fill opacity
- Reusing colors (color styles)
- Adding a drop shadow
Section 2
Components (Reusable Elements)
- Creating & editing components
- Overriding content in one instance vs. globally updating all components
- Setting Constraints
- Detaching from a component
Turning a Design into a Clickable Prototype
- Linking between frames (artboards)
- Previewing the prototype
- Creating an overlay
- Fixing the position of elements so they don’t scroll
Exporting Assets for Web: SVG, JPEG, & PNG
- Exporting individual assets
- Exporting frames (artboards)
Sharing Figma Files: Commenting, Testing, Developers, etc.
- Sharing a Figma file
- Sharing a Prototype
- Commenting on shared files
- Viewing a prototype for user testing
- Specs for developers
Taught by
Michael Suen, Christophe Drayton, and Dan Rodney
Related Courses
Related Articles
-
11 Best Figma Courses for 2026 (Free & Paid): Create Collaborative Designs
-
How Noble Desktop’s New York Licensing Is Shaping Its Training Excellence
-
10 Best Animation Courses for 2026 (Free & Paid)
-
6 Best 3D Printing Courses for Beginners in 2026 (Free & Paid)
-
10 Best Free Drawing Courses for Beginners for 2026
-
From Beginner to AI Product Manager in 3 Months with Microsoft’s AI Product Manager Certificate
