Skip to main content
Design & UX

Figma

Portrait of Robert Klimant, co-founder of Roelu Studio
Robert KlimantCo-founder

What is Figma?

Figma is a browser-based design and prototyping tool used by product and marketing teams to design websites, apps, and interfaces. Multiple people can edit the same file at the same time, which is why it became the default for design teams. Figma supports vector design, component libraries, design tokens (via variables), interactive prototypes, and developer handoff. The same file is the source of truth for designers, engineers, and stakeholders.

Why it matters

Before Figma, design files lived on someone's laptop in Sketch or Photoshop, and "the latest version" was an ongoing argument. Figma killed that. The design is the URL. Everyone sees the same thing in real time, comments live next to the artwork, and developers can inspect spacing and colors directly. For a marketing team, Figma is also where the brand actually lives — the components, the tokens, the templates. When the next campaign page needs to ship, the team isn't starting from a blank canvas. They're remixing what already exists.

How it works

A designer opens Figma in a browser, creates frames for each page or screen, and designs with vector shapes, type, and components. Reusable elements — buttons, cards, navigation, modals — get turned into components and stored in a shared library that the whole team can pull from. Variables hold design tokens (colors, spacing, type scale) that every file in the workspace pulls from. Prototypes are built by wiring frames together with interactions and tested with real users. Stakeholders open a link, click through the design, and leave comments anchored to specific elements. Engineers use the inspect panel to copy spacing, colors, and exportable assets straight into code, or plug Figma into a build pipeline via the API so tokens flow automatically into the codebase.

Related terms

  • Design System

    Design & UX

    A shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…

  • Component Library

    Design & UX

    A reusable set of pre-built UI pieces — buttons, forms, cards, modals, navigation — that designers and developers pull from instead of building each one fresh…

  • Prototype

    Design & UX

    A clickable mock-up of a website or product that simulates the real interactions — clicks, transitions, flows, micro-states — so the team can test how it…

  • Wireframe

    Design & UX

    A low-fidelity sketch of a webpage that shows structure, layout, and content priorities — without color, type, or polish — so the team can argue about the plan…

  • Design Tokens

    Design & UX

    The named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…

  • User Interface

    Design & UX

    The visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…

  • Visual Identity

    Design & UX

    The visual half of a brand — logo, typography, color, imagery, iconography, motion — the parts of the brand you can actually see, designed as a coherent system…