Uploaded June 2021 | Updated September 2026, 2 weeks ago
This Figma Crash Course 2021 is beginner-friendly and will help you get up and running with the design platform.
The Figma tutorial will cover all the aspects to get started with Figma with a real-world example website design we will build from scratch using UI and UX.
- Figma Introduction (00:00)
- Figma account setup (00:20)
- Figma design file (00:45)
- Figma design assets (01:18)
- Figma starting basics (01:58)
- Figma frame (03:32)
- Figma grid columns and rows (05:13)
- Figma shapes (06:47)
- Figma import images (08:00)
- Figma labeling and grouping (08:25)
- Figma text (09:17)
- Figma navigation bar (10:30)
- Figma button design (12:38)
- Figma header title & scaling (14:38)
- Figma text additional settings (15:49)
- Figma hero section & figma layers (16:21)
- Figma groups and sections (18:25)
- Figma fonts and figma colors (20:20)
- Figma text line height and spacing (22:15)
- Figma alignment and snapping (223:40)
- Figma masking with shapes and images (23:57)
- Figma copying groups and sections (25:00)
- Figma updating sections (25:51)
- Figma color picker & copying sections continued (26:21)
- Figma color selecting and picking correct hue (28:23)
- Figma testimonial section (30:38)
- Figma autolayout (33:50)
- Figma auto layout options (34:33)
- Figma auto layout alignment (34:58)
- Figma auto layout content (35:44)
- Figma gallery images (36:24)
- Figma resize images (37:05)
- Figma footer (37:36)
- Figma SVG color and overlay edits (38:17)
- Figma auto layout menu footer (38:53)
- Figma layers toolbar, hide and lock (40:53)
- Figma prototype viewer (41:30)
- Figma frames and pages (42:00)
- Figma prototype interactions (43:55)
- Figma prototype interaction navigation to page (44:26)
- Figma share test and preview prototypes (44:26)
- Figma export pages (45:43)
- Figma export groups or sections (46:17)
- Conclusion
This intro to figma should help you learn especially as a beginners guide to figma basics. I know many people want to learn figma UI design tutorial to improve their users interface and user experience skills in making websites and applications.
If you want to learn figma in 40 minutes or less this course covers everything by example. Introduction to figma 2021 is my first real jump into the basics as one of the best web design tool to use.
If you want to follow along, you can get that assets to this project below
Figma Crash Course 2021 for beginners:
figma.com/file/9kw3Z8n5t5l3BHAvyZy39X/Figma-Crash-Course-2021?node-id=0%3A1
Figma Design Assets:
frontendmentor.io/solutions/sunnyside-agency-landing-page-mVy7o6ijV
#figma #course #2021
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: enhanceui.com
Feel free to follow me on:
🐦 Twitter: twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: discord.gg/6gmmFvxkD7
💸 Patreon: patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
This Figma Crash Course 2021 is beginner-friendly and will help you get up and running with the design platform.
The Figma tutorial will cover all the aspects to get started with Figma with a real-world example website design we will build from scratch using UI and UX.
- Figma Introduction (00:00)
- Figma account setup (00:20)
- Figma design file (00:45)
- Figma design assets (01:18)
- Figma starting basics (01:58)
- Figma frame (03:32)
- Figma grid columns and rows (05:13)
- Figma shapes (06:47)
- Figma import images (08:00)
- Figma labeling and grouping (08:25)
- Figma text (09:17)
- Figma navigation bar (10:30)
- Figma button design (12:38)
- Figma header title & scaling (14:38)
- Figma text additional settings (15:49)
- Figma hero section & figma layers (16:21)
- Figma groups and sections (18:25)
- Figma fonts and figma colors (20:20)
- Figma text line height and spacing (22:15)
- Figma alignment and snapping (223:40)
- Figma masking with shapes and images (23:57)
- Figma copying groups and sections (25:00)
- Figma updating sections (25:51)
- Figma color picker & copying sections continued (26:21)
- Figma color selecting and picking correct hue (28:23)
- Figma testimonial section (30:38)
- Figma autolayout (33:50)
- Figma auto layout options (34:33)
- Figma auto layout alignment (34:58)
- Figma auto layout content (35:44)
- Figma gallery images (36:24)
- Figma resize images (37:05)
- Figma footer (37:36)
- Figma SVG color and overlay edits (38:17)
- Figma auto layout menu footer (38:53)
- Figma layers toolbar, hide and lock (40:53)
- Figma prototype viewer (41:30)
- Figma frames and pages (42:00)
- Figma prototype interactions (43:55)
- Figma prototype interaction navigation to page (44:26)
- Figma share test and preview prototypes (44:26)
- Figma export pages (45:43)
- Figma export groups or sections (46:17)
- Conclusion
This intro to figma should help you learn especially as a beginners guide to figma basics. I know many people want to learn figma UI design tutorial to improve their users interface and user experience skills in making websites and applications.
If you want to learn figma in 40 minutes or less this course covers everything by example. Introduction to figma 2021 is my first real jump into the basics as one of the best web design tool to use.
If you want to follow along, you can get that assets to this project below
Figma Crash Course 2021 for beginners:
figma.com/file/9kw3Z8n5t5l3BHAvyZy39X/Figma-Crash-Course-2021?node-id=0%3A1
Figma Design Assets:
frontendmentor.io/solutions/sunnyside-agency-landing-page-mVy7o6ijV
#figma #course #2021
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: enhanceui.com
Feel free to follow me on:
🐦 Twitter: twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: discord.gg/6gmmFvxkD7
💸 Patreon: patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
