The World's Shortest Figma Course — 80% in 7 Minutes

TL;DR

Figma is a UI design tool with a small enough surface that you can learn ~80% of it in one sitting. The whole tool comes down to five moves, each building on the last: shapes (everything is Lego built from rectangles and circles), layout (grids + the killer feature, Auto Layout, which makes designs responsive), properties (fill/stroke, effects, text — four dials, endless output), components + styles (reuse one element and one color/font/shadow everywhere for consistency), and prototyping (triggers → actions → transitions to make it interactive). The meta-skill isn't the tool — it's design thinking: learning to break any interface down into its building blocks, then rebuild it.

Key takeaways

• Figma's surface is small. Canvas in the middle; toolbar on top; left holds tools + pages/layers; right holds properties (position, color, font, effects, export). Learn those zones and you can find everything.
• Work by shortcut, not by clicking. F = frame (a screen — mobile/desktop presets built in). R = rectangle. Shift = constrain to a perfect square/circle. Alt = draw from the center.
• Every shape is Lego. Complex shapes come from simple ones via boolean ops — union, subtract, intersect, exclude. A heart is just two shapes combined. For anything gnarly, ~99% of designers grab a plugin.
• Auto Layout is the unlock. It replaces manual nudging: set padding and gaps, let containers hug or fill, nest layouts inside layouts — and your design becomes responsive, adapting to any frame size.
• Four property groups, infinite range. Fill/stroke (solid, gradient, image), effects (drop/inner shadow, background/layer blur), and text settings — a handful of dials that combine into endless looks.
• Components + styles = consistency. Turn a repeated element into a component; turn a color/font/shadow into a style. Change once, update everywhere — how big projects stay consistent.
• Prototype = trigger → action → transition. Switch to the Prototype tab, pick a trigger (click/hover/drag), an action (navigate), and an easing/transition (slide, smart-animate) to get real interactions and micro-animations.
• The real skill is decomposition. "How is this made?" → break it into rings, rounded rectangles, blurs. Recreating good designs is the practice.

1. Shortcuts, then shapes

Speed in Figma comes from keys, not clicks. The four that matter first:

Then everything is Lego. You build almost every shape from rectangles and circles: curve a rectangle's corners into a button, cut a ring out of a circle, drag an arc to make Pac-Man. The real power is boolean operations — combine two shapes by addition, subtraction, intersection, or exclusion. A heart is a union of two curved rectangles (or two circles plus a triangle). And when a shape is genuinely hard? "99% of designers just use a plugin" — the Plugins tab has one for almost anything.

2. Layout — and the one feature that matters most

A layout grid (grid, columns, or rows) keeps objects aligned. But the feature to actually learn is Auto Layout. Without it, adding a third card means manually finding where it goes; with it, elements flow, space themselves, and adapt.

3. Properties, components, styles

Once objects exist, you shape them with a small set of properties: text (font, alignment, width), fill & stroke (solid, gradient, image), and effects (drop shadow, inner shadow, background blur, layer blur). Four dials, effectively endless output.

Then two features keep large projects sane: components (make one element reusable — Assets tab, drag and drop) and styles (save any color, font, or shadow and re-apply with a click). Change the source once and every instance updates — that's how consistency scales.

4. From static to interactive

The last step makes it move. Switch to the Prototype tab and wire interactions as a simple chain — a trigger fires an action, dressed with a transition. Add component variants and connect them with smart animate for micro-interactions (a play button morphing, a card expanding to show lyrics).

My take

The reason to bookmark this isn't the Figma trivia — it's the teardown method. Juxtopposed keeps asking "how is this made?" and answering in building blocks (two rings, a rounded rectangle with a stroke-only shadow, a blurry circle clipped by a frame). That's the same decomposition I use for agents and systems: see the surface, name the primitives, rebuild it. The ladder here — shapes → layout → properties → components/styles → prototype — is a clean model of how any tool should be learned: master the primitives, then the features that compose them, then the abstractions that scale them.

Two honest caveats. "80% of Figma" is generous — this is 80% of the drawing surface; the parts that actually bite on real teams (design systems at scale, variables/tokens, dev handoff, branching, versioning) are the other 80%. And a 7-minute pace means you'll need to do the thing to retain it — which is exactly why the video ends with a 7-day challenge. Worth doing.