Figma & UX/UI, explained simply

Frame

A container that represents a screen, a section, or a group of elements. Frames can hold other frames, apply layout rules, and act as the artboard you design inside.

Everything in a real design lives inside a frame — they're the skeleton of every screen.

Layers

The stacked list of every object on your canvas — frames, shapes, text, images. The order in the panel is the order things are drawn, top to bottom.

Naming and organizing layers well is what separates clean files from chaos.

Pages & Canvas

The canvas is the infinite space you design on; pages let you split one file into separate canvases (e.g. Wireframes, Final UI, Archive).

Group vs Frame

A group (Ctrl+G) just bundles layers so they move together — it shrinks to fit its children. A frame is a real container with its own size, fills, auto layout, and constraints.

Beginners group everything; pros frame almost everything. Frames unlock layout features groups can't do.

Frame tool (F)

Draws frames. Pick a preset size (iPhone, Desktop, A4) from the right panel or drag your own.

Shape tools (R / O / L)

Rectangle, ellipse, line, polygon, star. The building blocks for buttons, cards, avatars, and icons.

Pen tool (P)

Draws custom vector paths point by point — for icons, custom shapes, and illustrations. Each click adds an anchor point; drag to curve it.

Mastering the pen tool means you can draw anything, not just assemble rectangles.

Text tool (T)

Adds text. Click for an auto-sized label, or drag a box for wrapping paragraph text.

Hand tool (H / Space)

Pans around the canvas without accidentally selecting or moving anything.

Eyedropper (I)

Picks any color from the canvas and applies it to your selection.

Slice & Export

The slice tool marks a region for export; the export panel turns any layer into PNG, JPG, SVG, or PDF at any scale.

Comment (C)

Pins feedback directly onto the design so discussion happens in context instead of in chat screenshots.

Scale tool (K)

Resizes an element and everything inside it proportionally — strokes, corner radii, and text scale together, unlike normal resize which only stretches the box.

Measure spacing (Alt)

Select a layer, hold Alt, and hover over another layer — Figma shows the exact distance between them in red.

The fastest way to check if your spacing is actually consistent instead of just looking consistent.

Instance

A linked copy of a component. It follows the master's design but lets you override text, icons, and colors locally.

Variants & Properties

One component with multiple states — default, hover, pressed, disabled — switchable from a dropdown instead of duplicated layers.

Auto Layout

Makes a frame behave like a flexbox: children stack with consistent spacing and padding, and the frame grows or shrinks with its content.

Buttons that resize with their label, lists that reflow when items are added — this is how real UI behaves.

Constraints

Rules for how elements respond when their frame resizes — pin to an edge, stay centered, or stretch.

Layout Grid

Columns, rows, or square grids overlaid on a frame to keep spacing and alignment consistent — e.g. a 12-column grid for desktop layouts.

Grids are why professional layouts feel ordered instead of eyeballed.

Masking

Uses one shape to clip whatever sits above it — like a window that only reveals part of an image. Classic use: a circle mask for a round avatar.

Boolean operations

Combine shapes with union, subtract, intersect, and exclude to build complex icons from simple geometry.

Styles & Variables

Saved colors, text styles, shadows, and spacing tokens you apply by name — the design version of CSS variables.

Fills, Strokes & Effects

Every shape can have fills (solid, gradient, image), strokes (borders with weight and position), and effects like drop shadows and background blur.

Subtle shadows and the right stroke weight are most of what makes a UI feel polished.

Corner radius

Rounds the corners of any shape or frame — set all four at once or each corner independently. 0 = sharp, small values = cards and buttons, half the height = a pill.

Align & Distribute

One-click buttons that line up selected layers to an edge or center, and spread them with perfectly equal spacing — no more nudging by eye.

User Flow

A diagram of the path a user takes through the product — every screen, decision, and action from entry to goal.

Designing screens without a flow is decorating rooms in a house with no floor plan.

Lo-fi vs Hi-fi

Low-fidelity = quick and rough, for testing ideas. High-fidelity = real colors, type, spacing, and content — what the final product will actually look like.

Hi-fi Prototype

Hi-fi screens wired together with clickable hotspots, transitions, and animations — a fake app you can tap through on a phone before any code exists.

Stakeholders and test users react to something that feels real, not to static pictures.

Design System

The complete kit — components, styles, grids, and usage rules — that keeps every screen consistent and lets teams build fast.

Handoff & Dev Mode

Figma's developer view exposes exact sizes, colors, spacing, and CSS-like code for every element, so engineers can build precisely what was designed.

Smart Animate

A prototype transition that automatically animates matching layers between two frames — move a circle, change its size, and Figma tweens the difference smoothly.

It's how you fake real app animations — sliding menus, expanding cards — without writing any code.

Plugins & Community

Free add-ons from the Figma Community that drop real photos, icons, charts, and placeholder content straight into your file — plus thousands of free templates and UI kits to learn from.

Version History

Figma auto-saves checkpoints of your file as you work. Name important versions, browse the timeline, and restore any earlier state — nothing is ever truly lost.

It's the safety net that lets you explore bold ideas without fear of breaking the file.