freeCodeCamp.org on YouTube · Open on YouTube
Design foundations · Novice · Lesson 14 of 99 · 6 h 16 min video
Figma essentials
After this you can navigate Figma confidently (frames, layers, styles, constraints, pages) and build a static screen without fighting the tool.
Why it matters
Figma is the industry default and fluency in it is assumed, not praised. Get the mental model right early: frames nest and clip, constraints govern resize behaviour, and styles are shared definitions rather than copies. Name your layers as you go; it costs seconds now and is the first thing an engineer or reviewer notices later. Trap: learning Figma by watching rather than building. Pause constantly and rebuild what is on screen.
How to use this resource
The most current full free Figma course available, on the current UI. Work through roughly the first two hours here (interface, frames, styles, constraints) and return for the components and prototyping sections when the later phases call for them.
Go further
Go deeper