What Figma is and how it works

Welcome to the Figma Masterclass. Figma is the tool the design world runs on — where interfaces for apps and websites are designed, prototyped, and handed to developers, all in the browser, all collaboratively. This lesson covers what Figma is and how it works. Let's meet the tool. Let's see what it is.

What Figma is and why it dominates

FIGMA = the industry-standard, collaborative, browser-based tool for UI/UX DESIGN — designing
interfaces (apps, websites), building interactive PROTOTYPES, + handing designs to developers. It's
where modern product design happens.

WHAT YOU DO IN FIGMA:
- DESIGN interfaces — screens, layouts, components (buttons, cards, forms), icons, whole apps/sites.
- PROTOTYPE — link screens + add interactions to make a clickable, feel-real demo (no code).
- COLLABORATE — multiple people design in the SAME file at once (like Google Docs for design);
  comment, share, review.
- HAND OFF to developers — devs inspect designs (Dev Mode) for specs, measurements, + code hints.
- BUILD DESIGN SYSTEMS — reusable components + styles shared across a team (libraries).

WHY FIGMA DOMINATES (why learn THIS tool):
- BROWSER-BASED — runs in the browser (+ a desktop app), any OS (Mac/Windows/Linux). No heavy
  install; open a link + design. (Files live in the cloud.)
- REAL-TIME COLLABORATION — the killer feature: whole teams work in one file LIVE, see each other's
  cursors, comment, + review together. This changed design.
- ALL-IN-ONE — design + prototype + handoff + design systems in ONE tool (vs juggling several).
- FREE TO START — a generous free tier; great for learning + solo work.
- INDUSTRY STANDARD — the dominant UI design tool; learning it is directly hireable + how teams
  actually work. (Learn Figma + you can work anywhere design happens.)
- POWERFUL YET LEARNABLE — auto-layout, components, variants, prototyping — pro power, approachable.

Figma is the industry-standard, collaborative, browser-based tool for UI/UX design — designing interfaces (apps, websites), building interactive prototypes, and handing designs to developers — where modern product design happens. What you do in Figma: design interfaces (screens, layouts, components — buttons, cards, forms — icons, whole apps/sites); prototype (link screens + add interactions to make a clickable, feel-real demo — no code); collaborate (multiple people design in the same file at once — like Google Docs for design — comment, share, review); hand off to developers (devs inspect designs — Dev Mode — for specs, measurements, and code hints); and build design systems (reusable components + styles shared across a team — libraries). Why Figma dominates (why learn this tool): browser-based (runs in the browser, plus a desktop app, any OS — no heavy install; open a link and design — files live in the cloud); real-time collaboration (the killer feature: whole teams work in one file live, see each other's cursors, comment, and review together — this changed design); all-in-one (design + prototype + handoff + design systems in one tool); free to start (a generous free tier — great for learning + solo work); industry standard (the dominant UI design tool — learning it is directly hireable and how teams actually work); and powerful yet learnable (auto-layout, components, variants, prototyping — pro power, approachable).

How Figma works and what this course covers

HOW FIGMA WORKS (the mental model):
- CLOUD FILES — your work lives in FILES (in the cloud), organised in PROJECTS + TEAMS. Open a
  file from anywhere; it auto-saves; share by link. (Version history is kept.)
- THE CANVAS — an infinite 2D canvas you design on. You place FRAMES (screens/containers) + draw
  shapes, text, + images inside them.
- FRAMES = the containers/screens — a phone screen, a card, a section. Everything lives in frames.
- LAYERS — every element is a layer, nested in a tree (like folders). The Layers panel shows the
  structure.
- OBJECT-BASED — you create + manipulate objects (shapes, text, frames) with properties (size,
  colour, position) — a vector design tool.
- IT'S NOT CODE — you design visually; developers build the real thing from your designs. (Figma
  outputs designs + specs, not production code — though it hints at it.)

DESIGN vs DEV MODE:
- DESIGN mode — where you create.
- DEV MODE — a view for developers to inspect + get specs/measurements/values from your designs
  (handoff).

WHAT THIS COURSE COVERS (Figma end-to-end): what Figma is + how it works, the interface (canvas/
panels/tools), frames/shapes/layers, pages/files/the community, constraints + responsive resizing,
AUTO-LAYOUT (+ direction/padding/gap + hug/fill/fixed sizing) — the game-changer, colour + text
STYLES, COMPONENTS + instances + variants + component properties, linking screens into a flow +
interactions + smart animate (prototyping), libraries + sharing + feedback, + Dev Mode (inspecting
designs for handoff).

THE PRINCIPLE: FIGMA is the industry-standard, collaborative, browser-based UI design tool — you
DESIGN interfaces, PROTOTYPE them, COLLABORATE live, + HAND OFF to devs, with reusable COMPONENTS +
STYLES. Files live in the cloud; you design on an infinite canvas with FRAMES + LAYERS. Learn Figma
+ you can design + work anywhere product design happens. Let's build in it.

How Figma works (the mental model): cloud files (your work lives in files — in the cloud — organised in projects + teams — open from anywhere; auto-saves; share by link; version history is kept); the canvas (an infinite 2D canvas you design on — you place frames — screens/containers — and draw shapes, text, and images inside them); frames = the containers/screens (a phone screen, a card, a section — everything lives in frames); layers (every element is a layer, nested in a tree like folders — the Layers panel shows the structure); object-based (you create + manipulate objects — shapes, text, frames — with properties — size, colour, position — a vector design tool); and it's not code (you design visually; developers build the real thing from your designs — Figma outputs designs + specs, not production code, though it hints at it). Design vs Dev Mode: design mode — where you create; Dev Mode — a view for developers to inspect and get specs/measurements/values from your designs (handoff). What this course covers (Figma end-to-end): what Figma is + how it works, the interface, frames/shapes/layers, pages/files/the community, constraints + responsive resizing, auto-layout (+ direction/padding/gap + hug/fill/fixed sizing) — the game-changer, colour + text styles, components + instances + variants + component properties, linking screens into a flow + interactions + smart animate (prototyping), libraries + sharing + feedback, and Dev Mode. The principle: Figma is the industry-standard, collaborative, browser-based UI design tool — you design interfaces, prototype them, collaborate live, and hand off to devs, with reusable components + styles; files live in the cloud; you design on an infinite canvas with frames + layers; learn Figma and you can design and work anywhere product design happens.

The mistake beginners make

The first mistake is treating Figma like a drawing app — free-drawing without frames, layers, structure, or Figma's systems (auto-layout/components); learn Figma's way (it's a UI tool, not just a canvas). The second mistake is ignoring its superpowers — designing everything manually while skipping auto-layout, components, styles (the things that make Figma powerful); learn those (this course). The third mistake is not using collaboration — working solo/siloed when Figma's live collaboration + comments are central; share and collaborate. And confusing design with code — thinking Figma builds the app; it designs it (devs build from it). And overwhelm at the interface — intimidated by panels; learn the basics (next lesson) and build up. Learn Figma's structured way, use its superpowers, collaborate, know design vs code, and start with the basics.

Your turn

---

Your turn

1. Understand what Figma is: note it's the industry-standard, collaborative, browser-based tool for UI/UX design - designing interfaces, prototyping them, collaborating live, handing off to devs, and building design systems.
2. Know why it dominates: browser-based (any OS, no heavy install), real-time COLLABORATION (whole teams in one file live - the killer feature), all-in-one (design + prototype + handoff + systems), free to start, and the industry standard (hireable).
3. Grasp the mental model: your work lives in cloud FILES; you design on an infinite CANVAS placing FRAMES (screens/containers) with shapes/text inside; every element is a LAYER in a nested tree.
4. Know design vs code: you design visually (and produce specs) - developers build the real product from your designs; Figma outputs designs + handoff specs (Dev Mode), not production code.
5. Set up: open Figma (browser or desktop app), create a free account, and start a new design file - you'll learn the interface, frames/layers, auto-layout, styles, components, prototyping, and handoff across this course.

Key points

• FIGMA = the industry-standard, collaborative, browser-based UI/UX DESIGN tool. You DESIGN interfaces (apps/sites), PROTOTYPE (clickable demos, no code), COLLABORATE live (whole teams in one file), HAND OFF to devs (Dev Mode specs), and build DESIGN SYSTEMS (libraries).
• Why it dominates: BROWSER-BASED (any OS, no heavy install; cloud files), REAL-TIME COLLABORATION (the killer feature — live multi-user, cursors, comments), ALL-IN-ONE (design+prototype+handoff+systems), FREE to start, INDUSTRY STANDARD (hireable, how teams work), and powerful yet learnable.
• Mental model: work lives in cloud FILES (projects/teams; auto-save; share by link; version history) on an infinite CANVAS; you place FRAMES (screens/containers) with shapes/text/images inside; every element is a LAYER in a nested tree; it's object-based (vector). DESIGN mode (create) vs DEV MODE (devs inspect for specs).
• It's NOT code — you design visually; developers build the real product from your designs (Figma outputs designs + specs, not production code).
• The mistakes: treating Figma like a drawing app (learn its structured way — frames/layers/auto-layout/components), ignoring its superpowers (auto-layout/components/styles), not using collaboration, confusing design with code (design vs build), and interface overwhelm (start with the basics).