Magic Assist AI All guides
🎨
Design

How to use Figma

Figma is a browser-based design tool where you draw inside frames, arrange elements with auto layout, and reuse repeated pieces as components that update everywhere at once.

You don't need to be a designer to be productive in Figma — you need three concepts. Frames are containers, auto layout is how things space and resize themselves, and components are the reusable bits. Everything else is decoration.

What people actually use Figma for

  • Mock up a screen or landing page before anyone builds it
  • Edit an existing design handed to you by a designer
  • Build a simple set of reusable buttons and cards
  • Comment on and hand off designs to developers
  • Prototype a clickable flow for user testing

Figma in five steps

  1. 1

    Create a frame, not a rectangle

    Press F and pick a device size. Frames clip, scroll and export; loose rectangles do none of that, which is why beginner files behave strangely.

  2. 2

    Turn on auto layout early

    Select your elements and press Shift+A. Now spacing, padding and resizing behave like real UI instead of hand-placed pixels.

  3. 3

    Make components out of repeats

    Any element used twice becomes a component (Ctrl/Cmd+Alt+K). Edit the main component and every instance updates.

  4. 4

    Define colour and text styles

    Save your palette and type sizes as styles. Changing the brand colour later becomes one edit rather than an afternoon of clicking.

  5. 5

    Share with the right permission

    Share gives view or edit access by link. Developers use Dev Mode to read spacing and export assets without touching your layers.

Stuck on your own screen?

Paste a screenshot of the exact Figma screen you're on and Magic Assist AI tells you what to click next — no course, no 40-minute video.

Teach me Figma

Common Figma mistakes

Designing outside frames

Free-floating layers can't be exported cleanly or responsively resized, and prototypes won't scroll.

Detaching instances

Detaching breaks the link to the main component, so your "one change" no longer propagates. Use overrides instead.

Hard-coded colours everywhere

Hex values sprinkled across layers make rebrands miserable. Styles and variables exist for this.

Unnamed layers

Rectangle 47 inside Group 12 is unreadable to everyone including future you, and it makes handoff slower.

Figma FAQ

Is Figma free to use?

Yes, there's a free tier that covers individuals and small files. Paid plans add shared libraries, unlimited version history and more collaborative seats.

What is auto layout in Figma?

Auto layout makes a frame arrange its children automatically with set spacing and padding, resizing as content changes — the design equivalent of flexbox.

Can non-designers use Figma?

Yes. Viewing, commenting and simple edits take minutes to learn. Frames, auto layout and components cover most non-designer needs.

Does Figma work offline?

Largely no. The desktop app can keep a file open briefly, but Figma is built around real-time cloud collaboration.

More guides

Or search any software and get a plan built on demand.