Uploaded March 2023 | Updated September 2026, 5 days ago
Watch + join BYOL for the full Figma course and 10% off: byol.com/figmsu
Watch the entire course: BYOL.com/FIGME
Free Exercise Files: BYOL.com/FIGMINEXF
Try Figma for Free! BYOL.com/FIGF
Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!
This Figma Tutorial is a course for beginners in the UX/Figma world.
Watch the Figma Advanced Course: byol.com/figminiadvprepreg
Watch the Adobe Illustrator Essentials Course: byol.com/FIGILLE
Watch the Adobe Illustrator Advanced Course: byol.com/FIGILLA
Watch the Adobe Photoshop Essentials Course: byol.com/FIGPSE
Watch the Adobe Photoshop Advanced Course: byol.com/FIGPSA
Buy Figma here: byol.com/BUYFIG
Introduction to Figma tutorial: 0:00
What is UX Design?: 1:04
What is Figma's Role in UX Design: 4:02
The UX Design Brief in Figma: 6:35
Download Free Figma Exercise Files: 9:28
How to create a wireframe in Figma: 10:16
How to add text in Figma: 12:20
How to make a component in Figma: 14:18
How to make a placeholder image in Figma: 17:10
How to copy & paste appearance in Figma: 21:37
How to create a button in Figma: 22:52
How to make a UI card in Figma: 24:58
How to use Smart Selection in Figma: 29:03
How to make an input field in Figma: 31:53
How to use component Instances & Overrides in Figma: 33:36
How to paste in place in Figma: 37:41
How to use Adobe Illustrator with Adobe Figma: 38:50
How to add to an existing component Figma: 42:33
How to prototype in Adobe Figma: 44:41
How to share a Prototype in Figma: 50:11
How to use Photoshop with Figma: 54:07
What is High Fidelity Mockup in Figma: 59:38
How to add colors in Adobe Figma: 1:00:12
How to find Google fonts in Figma: 1:06:06
How to make a Micro Interaction in Figma: 1:08:05
How to export images and code from Figma: 1:14:16
Outro: 1:20:06
Join the Bring Your Own Laptop Facebook Group: facebook.com/groups/bringyourownlaptop
Follow me on Instagram: instagram.com/bringyourownlaptop
Follow me on TikTok: byol.com/tiktok
Follow me on Twitter: twitter.com/danlovesadobe
Join the LinkedIn Group: linkedin.com/groups/10539178
#Figma #UXDesign #FigmaTutorial
Watch + join BYOL for the full Figma course and 10% off: byol.com/figmsu
Watch the entire course: BYOL.com/FIGME
Free Exercise Files: BYOL.com/FIGMINEXF
Try Figma for Free! BYOL.com/FIGF
Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!
This Figma Tutorial is a course for beginners in the UX/Figma world.
Watch the Figma Advanced Course: byol.com/figminiadvprepreg
Watch the Adobe Illustrator Essentials Course: byol.com/FIGILLE
Watch the Adobe Illustrator Advanced Course: byol.com/FIGILLA
Watch the Adobe Photoshop Essentials Course: byol.com/FIGPSE
Watch the Adobe Photoshop Advanced Course: byol.com/FIGPSA
Buy Figma here: byol.com/BUYFIG
Introduction to Figma tutorial: 0:00
What is UX Design?: 1:04
What is Figma's Role in UX Design: 4:02
The UX Design Brief in Figma: 6:35
Download Free Figma Exercise Files: 9:28
How to create a wireframe in Figma: 10:16
How to add text in Figma: 12:20
How to make a component in Figma: 14:18
How to make a placeholder image in Figma: 17:10
How to copy & paste appearance in Figma: 21:37
How to create a button in Figma: 22:52
How to make a UI card in Figma: 24:58
How to use Smart Selection in Figma: 29:03
How to make an input field in Figma: 31:53
How to use component Instances & Overrides in Figma: 33:36
How to paste in place in Figma: 37:41
How to use Adobe Illustrator with Adobe Figma: 38:50
How to add to an existing component Figma: 42:33
How to prototype in Adobe Figma: 44:41
How to share a Prototype in Figma: 50:11
How to use Photoshop with Figma: 54:07
What is High Fidelity Mockup in Figma: 59:38
How to add colors in Adobe Figma: 1:00:12
How to find Google fonts in Figma: 1:06:06
How to make a Micro Interaction in Figma: 1:08:05
How to export images and code from Figma: 1:14:16
Outro: 1:20:06
Join the Bring Your Own Laptop Facebook Group: facebook.com/groups/bringyourownlaptop
Follow me on Instagram: instagram.com/bringyourownlaptop
Follow me on TikTok: byol.com/tiktok
Follow me on Twitter: twitter.com/danlovesadobe
Join the LinkedIn Group: linkedin.com/groups/10539178
#Figma #UXDesign #FigmaTutorial
