Figma basics: the four concepts everything else is built on

What exactly is Figma, and why does it live in the browser?

Figma is an interface design tool, not a photo editor and not a layout application. What it does is this: you build a product's screens, define the repeating parts once, and wire the screens together so you can see the flow before any code is written.

Its structural difference from Photoshop and Illustrator is where the file sits. The file stays on their servers and you work on it in a browser. That has three direct consequences and all three matter. First, several people are inside one file at the same time and can see each other's cursors, so design review stops being screenshots in a chat and becomes a comment attached to the element itself. Second, "final version 3" ceases to exist, because versions are history rather than files. Third, and this is said less often: your file lives in somebody's account, and the terms of that account are not yours either.

That third point is what separates this lesson from a tour of the interface. If you have a confidentiality agreement with a client, where the file is kept is part of the decision rather than a technical detail. Further down you will see what Figma's AI settings default to on the smaller plans.

The four concepts that are enough to learn

A frame is a container. Every screen, every card, every button is a frame, and frames nest. The most important capability that sits on a frame is auto layout: you tell Figma to stack this frame's children with a set gap, and from then on the button grows when its label gets longer. Anybody who has once nudged buttons by hand understands why this comes first.

A component means build once, use everywhere. You change the main copy and every instance changes with it. Variants are the states of that same component: default, hover, disabled, loading. Beginners usually build the default state only, and that is exactly where handoff falls apart, because the code needs all five.

Styles and variables mean giving names to colour, type and spacing. "Primary blue" is a decision; a hex code is only a number. Once something has a name it can be changed in one place and land everywhere, and more importantly the name you chose becomes the name the developer writes in the code.

A prototype is the wiring between screens. What it actually does is not to show a pretty animation; it is to establish, before any code, where a user goes and where they get stuck. It also gives you a shareable link the client opens on their own phone, and that link works better than any PDF.

Everything else in Figma is, almost without exception, a shortcut over those four concepts.

How far does Figma free plan go?

We read the numbers off Figma's own pages rather than off second-hand comparisons.

The pricing page lists the Starter plan as unlimited drafts, UI kits and templates, and 150 AI credits a day up to 500 a month. The plans help page states a limit the pricing page does not put as plainly: a single team with one folder and 3 files, and 30 days of version history. The Professional plan is $16 a month per full seat.

The difference between a draft and a team file is exactly where beginners get stuck. Drafts are yours and unlimited; team files are the thing capped at three. If you work alone and keep your work in drafts, the free plan lasts a long while. The moment somebody has to edit alongside you, three files runs out quickly.

The 30 day history is a real limit too, and one the marketing does not dwell on. If a project runs six months, the version you had three months ago is no longer recoverable on the free plan. The simple, free workaround: at the milestones of a project, export the main screens and keep them next to the project files.

Handoff: where a beautiful file turns into bad code

Figma's real payoff is in the handoff, not in the drawing. A developer wants two things from your file: names and numbers. A colour without a name is just a six-digit code they have to guess the repetitions of.

An example from this very site. The whole colour and shape layer of rgb.ir is defined in one root block: 28 tokens, 19 of them a colour or a gradient, with four radius steps at 12, 18, 26 and 34 pixels. This site's developer never writes a colour code; they write a name. The result is that when we decided the capsule shape had to leave the site, the button radius became 15 in one place and the chip became 12 in one place, and the whole site changed. Had that decision been repeated by hand inside forty Figma frames, it would have been a day of work.

So a deliverable file means: every colour a style or variable named for its role, spacing from a defined scale rather than arbitrary numbers, every component with all of its states, and layer names a human can read. Those four beat any handoff document.

One habit ends the argument for good: bring your Figma naming close to what already exists in the code. If the code has --blue, the style is blue and not "light blue 2". The fast path at the end of this lesson does exactly that, from the live site.

Persian and right-to-left text in Figma

Figma's own help page states that right-to-left text is supported, including Arabic, Hebrew, Farsi and Urdu, that direction is handled automatically from language detection, and that you can override it. The controls sit in three places: the sidebar, the quick actions menu with Cmd or Ctrl and slash, and the main menu under Text and Text direction. The same page says the feature works on any plan and is available in Figma Design and FigJam files.

The sentence that matters more for Persian is elsewhere on that page: if a font does not support a character you input, Figma renders that character in a Noto font. Which means your text can look intact on screen while it is in fact made of two fonts. That is where a design starts differing from what ships on the site, and it is hard to catch because nothing errors.

Another limitation they state themselves: a text layer carries only one alignment setting, and a part of the text needing different alignment has to become its own layer. In Persian that comes up often: a Latin heading above a Persian paragraph, or a number that has to stay where it belongs.

And one point that comes from doing the work rather than from the documentation: a Persian sentence is not the same length as its English equivalent. A button that fits in the English design overflows or rattles in Persian. The answer is the auto layout from the first column: take the button's size from the text rather than from your hand, and test every component once with its longest Persian string.

Where Figma is the wrong tool

A lesson that only says this tool is good has done half the job. There are four places where Figma is the wrong choice.

• Print work. Catalogues, brochures, anything going to a printer in CMYK with trim marks, is a layout tool's job.
• Photographic work. Retouching, exposure correction, compositing several photographs; these belong to a pixel tool and Figma takes none of them seriously.
• A single-page flyer. For work done once with no repetition, the cost of building components and styles never comes back.
• When the connection is not dependable. A tool that runs in the browser and keeps the file on a server depends on the internet. That is not a flaw to hide; it is a condition of use.

There is a legal point as well, covered more fully in graphic design tools: Figma's terms of service carry a separate clause on export controls and sanctions, and they write that they may suspend access to the platform in order to comply. We quote that from their own document and make no claim about what happens on your connection today.