Figma

Figma is a collaborative environment for designing interfaces, building prototypes and developing visual materials. Its product family includes design, digital whiteboards, presentations and tools connecting design work with development.

In brief

Design and images

Official website

Contents
  1. What Figma is and which products it includes
  2. Origins and product development
  3. Company, proposed acquisition and public listing
  4. Frames, components and design systems
  5. Prototypes, specifications and developer handoff
  6. Whiteboards, presentations, illustration and motion
  7. Make, Sites, Buzz, Weave and AI capabilities
  8. Exports, extensions and connections to agents
  9. Platforms, plans and content handling
  10. Practical applications in OSH
  11. Worked example and result checks
  12. Limitations and conditions of use
  13. When to choose it and how to complement it
  14. Frequently asked questions
  15. Related profiles
  16. On the Sabentis blog
  17. Sources and documentation

Back to Tools

What Figma is and which products it includes

Figma is a platform for designing and creating digital products. Its core product, Figma Design, supports collaborative interface design and prototyping. The name also identifies the company and a broader application family covering whiteboards, presentations, illustration, website publishing and AI-assisted creation. Descriptions should identify the particular product: a designed screen, a connected prototype and an application generated with Make are different outcomes.

Its central contribution is bringing visual and functional decisions into a space that designers, developers and product owners can review together. A form, for example, can be examined through its fields, messages, states and journeys rather than simply as an image. This perspective is useful for products intended for workers, where ambiguous wording or a poorly identified state can obstruct a task even when the interface looks polished. It also gives teams a place to explain why a design decision was made before translating that decision into implementation work.

Reference documentation: Figma Design · Figma Make.

Origins and product development

Dylan Field and Evan Wallace founded Figma in 2012. The project explored bringing a professional design tool into the browser using technologies such as WebGL. An initial public preview appeared in December 2015; general access with simultaneous editing followed in September 2016. The browser became a place where people could jointly produce a design, extending its role beyond displaying the finished result.

Figma Community was introduced in 2019 as a space for publishing files that others could inspect and reuse. Subsequent development extended the environment from interface design into planning, communication and product creation. In October 2025 Figma announced its acquisition of Weavy, the origin of Figma Weave, to expand image, video and other media work through AI workflows. These milestones explain the breadth of the current brand while keeping the age of the original editor separate from the much newer applications within its family.

Reference documentation: Design, meet the internet, 3 December 2015 · Multiplayer editing in Figma, September 2016 · Introducing Figma Community, October 2019 · Welcome Weavy to Figma, October 2025.

Company, proposed acquisition and public listing

Adobe announced a proposed acquisition of Figma in September 2022. The transaction was abandoned in December 2023 because the companies could not identify a clear route to regulatory approval. In its provisional findings of November 2023, the UK’s Competition and Markets Authority had raised concerns about reduced competition and innovation in design software. This was an assessment of the transaction, rather than a technical defect in the editor.

Figma continued independently of Adobe and completed its initial public offering in August 2025, according to its SEC filings. The proposed transaction therefore does not make Figma an application included within Creative Cloud. For organisations, the distinction has practical consequences: procurement, user administration, data handling and support operate within Figma’s own offering. Historical reporting about the proposed acquisition should be read with its eventual cancellation in mind.

Reference documentation: Adobe collaboration announcement and cancellation update · CMA: Adobe/Figma provisional competition findings, November 2023 · Figma Form 10-Q, quarter ended June 2025.

Frames, components and design systems

Figma Design organises work through layers and frames representing screens, components or groups of content. Reusable components allow a button, card or notice to become part of a design system. Auto layout arranges content horizontally, vertically or in a grid, controlling spacing, padding and how dimensions adapt.

Variables store reusable values and can be grouped into collections with different modes. They can represent visual themes, dimensions or alternative text. Their practical value appears when a change must remain consistent: adjusting field spacing or revising a state’s name across multiple screens, for example.

A design system needs decisions as well as reusable elements. Document when each component is used, what each state means and which content it accepts. For a multilingual interface, test long words, multiline messages and empty fields. A design fitted to the shortest sample text can overflow after translation or when a real error message appears. This is why representative content belongs in a design trial early, rather than being inserted only after the layout has been approved.

Reference documentation: Guide to auto layout · Variables, collections and modes · Figma Design.

Prototypes, specifications and developer handoff

Prototypes connect frames through interactions and starting points. One file can contain several flows representing different tasks. Testing should include alternative routes: a mistaken selection, returning to an earlier step or interrupting the process. These reveal missing instructions and decisions that have not yet been settled.

Dev Mode supports property inspection, asset access and version comparison, helping communicate which work is ready for implementation. Figma Specs, in beta at the review date, adds a place to express intent, requirements and context that development agents can also use.

A useful handoff connects the screen, its behaviour and an acceptance criterion. “The message appears” is insufficient without specifying when, for whom and what happens next. A submission confirmation, for example, must correspond to effective receipt in the finished application. The design can define that intention; implementation and testing must demonstrate that it is met. Recording unresolved questions alongside approved decisions avoids presenting an attractive prototype as a complete specification.

Reference documentation: Figma — Guide to prototyping · Figma — Guide to Dev Mode · Figma Specs.

Whiteboards, presentations, illustration and motion

  • FigJam: a collaborative whiteboard for organising ideas, diagrams and decisions. It fits the analysis preceding an interface or a session whose outcome does not yet have a defined shape.
  • Figma Slides: presentations that can incorporate interactive prototypes and audience participation. It supports explaining a proposal while allowing an audience to explore the behaviour being discussed.
  • Figma Draw: vector illustration tools, brushes, textures and effects within the design environment. It adds expressive control over graphics and illustrations.
  • Figma Motion: animation using a timeline, keyframes and curves, with outputs such as CSS, JSON or React. It is in beta; some announced capabilities, including certain 3D transformations, were still listed as forthcoming on 8 November 2026.

The choice depends on the deliverable: a decision map, an explanation for a meeting, an illustration or animated behaviour. Using one product family can help maintain visual continuity, but each format still needs a review suited to its content and destination.

Reference documentation: Figma FigJam · Figma Slides · Figma Draw · Figma Motion.

Make, Sites, Buzz, Weave and AI capabilities

Figma Make generates functional prototypes and web applications from instructions and reference material. Figma Sites focuses on designing and publishing responsive websites, including CMS content collections. Figma Buzz organises the production of branded assets through templates and protected elements. Sites and Buzz were in beta on 8 November 2026; their presence in the product family does not mean every account has identical capabilities.

Figma Weave connects models and editing operations into workflows for images and other media. Current documentation distinguishes its account and credits from Figma’s, while offering connections with Design elements. Figma’s agent and code layers add conversational creation and executable behaviour to the canvas; availability depends on the product, account and beta stage.

These paths solve different problems. Exploring an interaction may need only a prototype; demonstrating coded behaviour may suit Make; an informational website may suit Sites. Before choosing, define whether the outcome must retain data, authenticate people, connect to other systems or simply explain a proposal. That requirement determines the scope of later testing and ownership.

Reference documentation: Figma Make · Figma AI overview · Figma Sites · Figma Buzz · Figma Weave FAQ.

Exports, extensions and connections to agents

Static designs can be exported as PNG, JPG, SVG or PDF. PNG and JPG produce images; SVG retains vector information, with choices about outlining text; an exported PDF is not equivalent to a fully editable text document. None of these formats independently preserves all prototype interactions.

The plugin ecosystem, introduced in 2019, extends tasks such as managing layers, inserting assets and automating operations. Before depending on an extension, identify its provider, the data it uses and its compatibility with the team’s workflow. An external plugin has its own development and terms.

Figma’s MCP server supplies design context to agents and, through supported capabilities, writes native elements onto the canvas. Writing requires the remote server and a Full seat outside personal drafts; it is documented as beta. To evaluate an integration, compare its output against the original components, spacing and states, and establish which files and permissions it actually needs. Successful connection alone does not establish the fidelity of the resulting implementation.

Reference documentation: Export formats for static designs · Introducing Figma plugins, August 2019 · Figma MCP server documentation.

Platforms, plans and content handling

Figma runs in a browser and offers official desktop applications for macOS and Windows, alongside mobile applications for iOS and Android. The downloads page reviewed does not offer an official Linux desktop application. Spanish is an interface language; Catalan is not listed as one, although designs can contain Catalan text.

The main plans are Starter, Professional, Organization and Enterprise. Full, Dev and Collab seats distribute capabilities according to a participant’s role. Assess editing, inspection and collaboration separately, and review AI credits and beta features before budgeting.

AI access and the use of content for training are separate controls. Current documentation states that content training is initially enabled for Starter and Professional, with an administrative opt-out, while Organization and Enterprise keep it disabled. An account review should examine its effective settings and the material being shared. For prototypes involving workplace information, a collection of fictional examples can represent useful situations without moving personal case records into the file. Include unusually long entries and incomplete information in those examples so that privacy protection does not come at the expense of realistic interface testing.

Reference documentation: Figma downloads · Figma plans and pricing · Manage AI and content training.

Practical applications in OSH

It can contribute to occupational safety and health when designing reporting forms, applications or safety communications. Teams can explore how people understand instructions and find information before a solution is built, incorporating worker and prevention specialist feedback early in the process instead of assuming that a clear layout works for everyone.

In prevention work, it can help check whether a form uses understandable terms, whether instructions work on a mobile screen, or whether people recognise their next step. It can also help design errors, required fields and pending states, which are often absent from an idealised mock-up.

The value lies in observing specific difficulties before building. Saying that a screen looks attractive does not replace testing a task with representative people and different access needs. Record the action attempted and the point of difficulty rather than assigning vague satisfaction scores.

Worked example and result checks

Example: prototype a form for reporting an unsafe condition, with clear fields and a short workflow. Test it with representative users to identify ambiguous wording, reading difficulties or steps that prevent a report from being completed.

  1. Define the objective: report an observed condition without demanding information the person does not know. Use fictional examples rather than identifiable incidents.
  2. Create initial, incomplete-entry, review and confirmation states. Distinguish “submitted” from “resolved” to avoid promising action that has not occurred.
  3. Connect the journey and test alternative routes: going back, correcting a field and leaving. Include clear labels rather than relying only on icons.
  4. Observe whether participants find the action without instructions. Record hesitation, expected information and interpretation of messages.
  5. Hand agreed decisions, states and wording to development. Repeat checks in the actual product because the prototype does not reproduce its full behaviour.

This is a proposed design exercise, not a claim that a particular application has been built or validated.

Limitations and conditions of use

A prototype does not itself validate accessibility, cybersecurity or the functioning of the final system. Avoid real personal data in testing, and subsequently check that the implemented application preserves the agreed behaviour and improvements.

A prototype can appear to save information while merely displaying the next screen. It does not establish permissions, traceability, alert delivery or offline availability. It also cannot replace accessibility testing of the final code. Before sharing a link, check which pages and assets recipients can see, rather than only inspecting the initial screen.

Reference documentation: Figma — Guide to prototyping · Figma — Guide to Dev Mode.

When to choose it and how to complement it

Choose Figma when the central question concerns how someone will navigate an interface. For open-ended idea collection it can complement Miro. Building an application with a tool such as Power Apps is a separate phase involving data, permissions and maintenance.

A selection trial should include a requirement change: check whether components and states can be updated consistently without leaving obsolete screens connected to the flow.

Frequently asked questions

Is a Figma Design prototype already an application?

A Design prototype represents an experience and intended interactions. Make is another product in the family that can generate web applications; its output also requires testing before use. Actual behaviour needs separate implementation and verification.

Can a form be tested without personal information?

Yes. Fictional data allow investigation of comprehension and navigation without real case files.

What should developers receive?

Alongside screens, provide error states, approved wording, expected permissions and observable acceptance criteria. Identify decisions that remain open.

Reference documentation: Figma — Guide to prototyping · Figma Make.

Request a Demo

Discover all that Sabentis can do for your organization.

Try Sabentis

request a demo
stars 5
GetApp Software Advice Capterra