Interaction & UI Design in Figma
Frames, layout, type, and the grammar of a screen — design interfaces people can actually use.
Choose your track
Beginner
The canvas, the core tools, your first real screen.
The Figma canvas — your first screen
ABC ~8 minNew designers freeze at the blank canvas because Figma looks like an aircraft cockpit — but you only ever need four tools to build almost any screen, and everything else is something you discover later, not a prerequisite.
Hierarchy and spacing — making a screen readable
ABC ~8 minA beginner's first screen usually has everything the same size, evenly spaced, and grey — technically complete and completely unreadable, because nothing tells the eye where to look first.
Intermediate
Layout that adapts, reusable pieces, and interaction basics.
Color and type — a small system, not a mood board
ABC ~8 minA beginner picks colors that look gorgeous side by side in the swatch picker, then ships a screen where the light-grey text on white is literally unreadable for a chunk of users — pretty in isolation is not the same as usable in context.
Auto layout — design that survives real content
ABC ~9 minA button looks perfect until the label changes from "OK" to "Confirm payment" and the text spills out the side — hand-placed designs break the instant real content arrives, which it always does.
Advanced
Robust systems, complex prototypes, motion with intent.
Master
Judgment: when to abstract, when to ship, and how to keep a system alive.
Modules at this level are in development.