What is Figma? How it works and why designers use it

Figma is a design tool that runs in your web browser and lets many people work on the same design at the same time. Designers use it to plan and draw websites, apps and other screens, turn them into clickable prototypes, and hand them to developers with exact sizes, colors and code hints. There are desktop apps for Mac and Windows, but everything lives in the cloud, so the file you open is always the latest version. Over time Figma has grown from one design app into a set of tools for whiteboarding, slides, AI prototyping and even publishing websites.

Here is how it works, what it costs, and where it fits when we design and build a business website.

How Figma works: the core ideas

You do not need to learn every feature to use Figma well. These are the pieces that matter most.

Files, pages and frames

Everything starts with a file, which is like a document. A file can hold several pages, such as "Wireframes," "Homepage" and "Mobile." On each page you draw frames. A frame is usually one screen, like a desktop homepage at 1440 pixels wide or a phone screen. Frames can also sit inside other frames to group parts of a layout.

Layers

Every shape, image and line of text is a layer. The layers panel shows them in a tree, a lot like folders on a computer. Naming and grouping layers clearly is one of the habits that separates a tidy file from a messy one.

Components and variants

A component is a reusable piece, such as a button, a nav bar or a pricing card. You build it once, then place copies (called instances) wherever you need them. Change the main component and every copy updates. Variants let one component hold its different states, like a button that is primary or secondary, or default, hover and disabled.

Auto layout

Auto layout makes frames behave more like real web pages. Items stack in rows or columns with set spacing and padding, and the frame grows or shrinks as content changes. If a button label gets longer, the button widens on its own. It maps closely to how CSS Flexbox works, which makes handoff easier.

Styles and variables

Styles save colors, text settings, effects and grids so everyone uses the same ones. Variables store values like colors, spacing and numbers, and they can have modes, such as light and dark themes. Together they are how you keep a style guide consistent across hundreds of screens.

Libraries and design systems

You can publish components, styles and variables as a library that other files use. A shared library is the heart of a design system: one set of approved parts that every designer pulls from. Note that libraries are not included on the free Starter plan.

Prototyping and interactions

Link frames together with clicks, hovers and transitions, and you get a clickable prototype. Clients and testers can tap through it in a browser like a real site before any code exists.

Comments

Anyone with access can drop a comment on an exact spot in the design. Feedback stays attached to the thing it is about instead of getting lost in email.

Dev Mode

Dev Mode is a view for developers. It shows measurements, colors, fonts, spacing and code snippets, and it can connect to code through features like Code Connect. Figma also offers an MCP server so AI coding agents in a developer's editor can read designs.

Plugins and Community files

Plugins add features, from icon sets to accessibility checkers to content fillers. The Figma Community has free and paid files, templates and UI kits you can copy as a starting point.

Figma's other products

Figma now sells more than its original design app. As of November 2026, its help center lists these:

Figma Sites, Make, Draw and Buzz were announced at Figma's Config conference in May 2025. Features and labels change often, so check the What is Figma page in Figma's help center for the current list.

Why designers use Figma

• Real-time collaboration. Several people can work in the same file at once and see each other's cursors. No more "final_v7_REAL.sketch."
• One source of truth. The file lives in the cloud, so there is one current version, with version history to go back to.
• Runs anywhere. A browser is all you need. Clients can view and comment with a free view seat and no install.
• Better handoff. Developers get exact specs in Dev Mode instead of guessing from a screenshot.
• A huge ecosystem. Plugins, templates, UI kits and tutorials are easy to find, and most designers and agencies already know it.

That last point is a big one. If you hire a designer, there is a good chance they work in Figma, which is why it shows up early in our roadmap on what to learn to get into web design.

A typical web design workflow in Figma

1. Wireframe. Start with gray boxes to plan layout and content order. A wireframe answers "what goes where" before anyone argues about colors. Many teams sketch the sitemap and page goals in FigJam first.
2. Mockup. Add the real brand: fonts, colors, photos and copy. This is where the UI comes together. If your brand is new, see getting a new business brand onto your website.
3. Prototype. Link the screens so people can click through. Test the main paths, like "find a service and request a quote," to catch UX problems early.
4. Handoff. Developers open Dev Mode, check spacing and styles, and export images and icons.
5. Build. The design gets built on the chosen platform, then checked against the Figma file on real phones and browsers.

Figma pricing as of November 2026

Figma charges per seat, and the seat type decides which products a person gets. According to Figma's help center:

• Full seat: Figma Design, Dev Mode, FigJam, Figma Slides, Figma Make and Figma Draw.
• Dev seat: Dev Mode, FigJam and Figma Slides.
• Collab seat: FigJam and Figma Slides.
• View: Free. View and comment on files.

Prices shown on figma.com as of November 2026:

The free Starter plan allows one team with a few files and 30 days of version history, and it leaves out libraries and Dev Mode. Figma also offers free access for eligible students and educators. Prices, billing terms and AI credit limits change, so always confirm on Figma's pricing page before you budget.

Figma alternatives

Limitations to know about

• It needs the internet. Figma is built around the cloud. The desktop app does not make it a true offline tool.
• Big files get slow. Huge files with many pages and images can lag, especially on older laptops.
• Costs add up. Per-seat pricing gets expensive on larger teams, and it pays to review who needs a Full seat versus a Dev or Collab seat.
• A design is not a website. A Figma mockup does not handle forms, SEO, content editing, speed or accessibility by itself. Someone still has to build those.
• Learning curve. Basic drawing is easy, but components, variants, variables and auto layout take practice to use well.

How Figma fits with WordPress, Webflow and Next.js

Figma is where a site gets planned. The platform is where it lives. Picking the platform is its own decision, which we cover in how to choose a website platform.

• WordPress. A developer builds a theme or block patterns that match the Figma design. Components in Figma often line up with reusable blocks in the editor.
• Webflow. Webflow thinks in boxes, classes and Flexbox, so a Figma file built with auto layout and named styles translates well. See Webflow for design-led sites.
• Next.js. Developers rebuild Figma components as React components, and variables become design tokens in CSS. Dev Mode and the MCP server help here. Learn more in Next.js for business websites.

Figma Sites and Figma Make blur this line by publishing straight from Figma. They can work for simple pages and prototypes, but for a site that has to rank, take leads and be easy to update, we still prefer a proper platform.

A little history

Dylan Field and Evan Wallace started experimenting with web-based design tools while at Brown University, and Figma was founded in 2012. Adobe announced a plan to buy Figma in September 2022, but the two companies dropped the deal in December 2023 after about 15 months of regulatory review. Figma went public on the New York Stock Exchange under the ticker FIG, with trading starting July 31, 2025, according to Figma's IPO announcement.

The bottom line

Figma is the standard tool for planning websites and apps because it puts design, feedback and developer handoff in one shared place. You do not need to be a designer to get value from it: being able to open a file, leave comments and click through a prototype is enough for most business owners.

Want a site that is designed in Figma and built to perform? Talk to us about your project.