Sources read

Figma for Beginners: Toolbar, Frames and Free Plan Limits

Figma is a browser design tool where you draw inside frames, using a toolbar of about nine tool groups. The free Starter plan gives one team with one folder and 3 files, plus 30 days of version history. Professional starts at $16 a month for a Full seat, per Figma's pricing page read on 2026-11-01.

Start with the toolbar: nine groups, Move first

Figma's help page describes the Design editor toolbar as a row of menus. Move is the default tool, and its menu holds Hand, for panning without selecting, and Scale. Learn those two and you can already look around a file.

The Region menu has Frame, Section and Slice. The Shape menu has Rectangle (the default), Line, Arrow, Ellipse, Polygon, Star and Image or video. The Creation menu has Pen, for vector paths and Bezier curves, and Pencil, for freehand drawing.

  • Text: click once for auto-width text, or click and drag for a fixed-size box.
  • Comment menu: Comment for every viewer and editor, Annotation and Measurement for Full seats only.
  • Actions menu: AI tools, library search, plugins and widgets.
  • Draw opens Figma Draw, a vector toolset inside the Design editor.
  • The Dev Mode toggle switches to the developer view.

Frames are the building block, not the canvas

A frame is a container that holds shapes, text and images. You can draw one at a custom size on the canvas or choose a preset in the properties panel on the right side of the screen. A Section, by comparison, organizes files and marks content for developers, so use Frame for the design itself.

The navigation panel lists your layers. Its Actions menu can collapse all layers at once, which helps when a file grows past a screenful.

Four shortcuts worth learning on day one

Hold the space bar to switch to Hand temporarily, then let go and you are back on your tool. Press T for Text. Press Shift + D to toggle Dev Mode.

To hide a layer, press Command + Shift + H on a Mac or Control + Shift + H on Windows. Hidden layers cannot be selected on the canvas, but you can still select them in the Layers panel, and Command or Control + Shift + O shows their outlines.

What the Starter plan includes

Figma's plans page says Starter is one team with one folder and 3 files. Professional allows unlimited folders, and Organization and Enterprise allow several teams. The pricing page also says Starter includes unlimited drafts, so drafts are where you can keep experimenting without counting.

Version history on Starter reaches back 30 days, while Professional, Organization and Enterprise list it as unlimited. Starter has 150 AI credits a day, up to 500 a month.

Paid seats: Full, Dev and Collab

Figma prices by seat type in USD. Professional is $16 a month for a Full seat, $12 for Dev and $3 for Collab. Organization, billed annually, is $55, $25 and $5. Enterprise, billed annually, is $90, $35 and $5.

AI credits a month rise with the seat: 3,000 for a Professional Full seat, 3,500 for Organization Full and 4,250 for Enterprise Full, while Dev and Collab seats on Professional get 500. The Professional plan has a monthly and annual toggle, but the annual prices did not show on the page I read, so none are quoted.

A worked example: three people on Professional

Take a team of 3: 1 designer, 1 developer and 1 manager who only comments. On Professional that is one Full seat at $16, one Dev seat at $12 and one Collab seat at $3, so $31 a month for the team.

Compare that with putting all 3 on Full seats, which would be $48 a month. The $17 difference comes from matching each seat to what the person does. Annotation and Measurement are Full-seat tools, so a Collab seat holder can comment but not annotate.

Working offline has a clock on it

Figma can keep working when your connection drops, with limits. You can create one new file offline. Only the current page and pages already loaded in the session work offline. Changes sit in your browser's IndexedDB, so you cannot see them from another device.

Figma stores offline changes for up to 30 days, or 7 days in Safari. After that they cannot be synced. When you reconnect, syncing adds two version history checkpoints, one before and one after the offline changes are applied.

Mistakes beginners make

Drawing shapes straight onto the canvas instead of inside a frame makes sizing and export harder later. Another is stacking effects without knowing the cap: each layer takes up to eight drop shadows, eight inner shadows, one layer blur, two noise effects, one texture effect, one background blur and one glass effect.

A third mistake is treating the free plan as unlimited. The 3-file cap applies to the team's files, so move finished work out of the way before starting a fourth. Drafts are the exception, because Figma lists them as unlimited on Starter.

Who Figma suits and what this page could not confirm

Figma suits people who design screens, flows or presentations and want to share a link instead of sending a file. It suits less well someone who only needs a quick poster, where a template tool is faster.

I could not find an official pages-per-file limit, so none is given here. The prototyping and auto layout help pages I tried were not available, so they are not covered. If a Figma dialog or error puzzles you, Crade can read your screen and explain it.

Questions people ask

Is Figma free?

Yes. The Starter plan costs $0 and includes one team with one folder and 3 files, unlimited drafts and 30 days of version history, according to Figma's pricing and plans pages.

How much is Figma Professional?

$16 a month for a Full seat, $12 for a Dev seat and $3 for a Collab seat on the monthly price shown. The annual prices were not visible on the page read on 2026-11-01.

What is the shortcut to switch to Dev Mode in Figma?

Shift + D toggles Dev Mode. The toggle is also in the toolbar.

Does Figma work offline?

Partly. You can create one new file offline and work on pages loaded in your session. Changes are kept for up to 30 days, or 7 days in Safari, and then cannot be synced.

What is the difference between a frame and a section?

A frame is a container for shapes, text and images, and you can pick a size preset in the properties panel. A section organizes files and marks content for development.

Sources