## glossary

What is Figma?

Figma is an interface design and prototyping tool that runs entirely in the browser, with real-time collaboration. Launched in 2016, it became the industry standard in digital product design by solving a problem earlier tools handled poorly: several people working on the same file at the same time.

Before it, the usual workflow involved local files, versions sent by e-mail and manual exports for developers. Figma removed that friction by putting the file in the cloud, reachable by link.

Concepts that structure the work

Frame — the container representing a screen or section, with its own dimensions and layout rules.
Component — a reusable element; changing the master component propagates the change to every instance.
Variants — group the states of the same component (default, hover, disabled) into a single definition.
Auto Layout — creates responsive behavior, with elements rearranging as the content changes.
Styles and Variables — centralize colors, typography and spacing, forming the foundation of a design system.

Why it matters to people who code

Developers rarely create in Figma, but they consume from it all the time. Inspect mode exposes exact measurements, colors, typography and spacing, and also generates CSS snippets. More importantly: when the design uses components and variables in a disciplined way, the structure of the file mirrors the component architecture of the code.

Design system tokens reaching the code

/* variables defined in Figma, mirrored in the CSS */
:root {
  --cor-primaria: #14b8a6;
  --cor-superficie: #0b1120;
  --espaco-2: 0.5rem;
  --espaco-4: 1rem;
  --raio-md: 0.5rem;
  --fonte-titulo: 'Sora', sans-serif;
}

.botao {
  background: var(--cor-primaria);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--raio-md);
}

That correspondence is what prevents the classic drift between what was designed and what was built. When the tokens share the same names on both sides, the conversation between design and development stops depending on interpretation.

Prototyping and validation

Beyond static drawing, Figma lets you connect screens with interactions and transitions, producing navigable prototypes. That makes it possible to test flows with users before writing a single line of code — the cheapest way to discover that an idea does not work. The criteria for evaluating those interfaces are in the Nielsen heuristics, and the role of AI in that process in artificial intelligence in design.

## faq

Frequently asked questions

Is Figma free?

It has a generous free plan, enough for individual use and small projects, with limits on the number of files with full history and on team features. Paid plans unlock shared libraries, advanced permissions and organizational controls.

Do developers need to learn Figma?

Not in depth, but knowing how to navigate, inspect elements and extract measurements and assets saves a lot of time and reduces back-and-forth with the design team. It is a reading skill, not necessarily a creation skill.

Can you generate code directly from Figma?

Partially. It exports CSS and there are plugins that generate components, but the result usually requires significant adjustment — the generated structure rarely matches the intended architecture. The most productive use is extracting values and assets, not finished code.