{{ p.category }}

{{ t }}

{{ p.title }}

{{ p.excerpt }}

U{{ author.name }} {{ p.readMins }} min read

{{ p.category }}

{{ p.title }}

{{ mo.sub }}

{{ m.tag }}

{{ m.t }}

{{ m.d }}

{{ m.left.t }}

✕{{ x.t }}

{{ m.right.t }}

✓{{ x.t }}

{{ m.big }}{{ m.label }}

{{ x.t }}

{{ m.label }}

✓{{ x.t }}

{{ x.t }}

{{ m.label }}
{{ x.t }}
{{ m.status }}

{{ m.label }}

{{ x.t }}{{ x.n }}

{{ x.t }}

{{ m.label }}{{ m.stepTxt }}

{{ x.t }}

{{ m.btn }}

{{ x.t }}

{{ m.q }}

{{ m.a }}

{{ x }}

{{ k.n }}

{{ k.v }}

{{ m.label }}

{{ m.status }}

{{ m.label }}

{{ st.n }}{{ st.t }}

{{ m.hub }}

{{ nd.t }}

AaAaAaAa

ButtonInput fieldTag

THE SHORT ANSWER

{{ p.answer }}

KEY TAKEAWAYS

✓{{ k }}

RELATED SERVICES

{{ b.t }}

{{ g.t }}{{ g.t }}

{{ g.t }}

{{ b.label }}:{{ b.t }}

{{ c.ini }}

{{ c.t }}

{{ c.d }}

{{ s.n }}

{{ s.t }}

{{ s.d }}

{{ h }}
{{ c.t }}

{{ b.alt }}

{{ g.alt }}

{{ b.title }}

{{ c.t }}

{{ c.s }}

{{ i }}

{{ c.t }}{{ c.s }}

{{ b.caption }}

{{ s.v }}

{{ s.l }}

{{ s.s }}

{{ b.caption }}

{{ b.title }}

{{ b.unit }}

{{ r.l }}{{ r.d }}

{{ b.caption }}

{{ b.title }}

A{{ b.a.t }}

{{ i }}

B{{ b.b.t }}

✓{{ i }}

{{ b.caption }}

{{ b.title }}

{{ t.d }}

{{ t.t }}

{{ b.caption }}

“

{{ b.t }}

{{ b.by }}

{{ b.title }}

{{ r.d }}

{{ r.l }}

{{ b.caption }}

{{ b.title }}

{{ m.n }}

{{ b.lo }}{{ b.hi }}

{{ m.n }}

{{ m.l }}

{{ m.d }}

{{ b.caption }}

{{ b.cs.client }} case study

Case study · {{ b.cs.client }} {{ b.cs.title }} {{ b.cs.text }}

{{ f.v }}{{ f.l }}

View case study →

SOURCES AND FURTHER READING

Frequently asked questions

{{ f.a }}

U

Written by {{ author.name }}

{{ author.role }}

Keep reading

More articles from across design, AI and marketing.

All articles

{{ r.category }} · {{ r.readMins }} min{{ r.title }}

Special Offer

25% Off Your Startup’s First Project

No Obligation
Quick Response
Exclusive for Startups

Figma basics: what Figma is and how to use it

Figma is a browser-based design tool used to create interfaces, prototypes and design systems. Teams design on a shared canvas using frames, shapes, text and auto layout, build reusable components and variables, link screens into clickable prototypes and hand designs to developers through Dev Mode, all with real-time collaboration.

What Figma is

Figma is a collaborative design tool used to create user interfaces for websites, mobile apps and software products. It runs in a web browser and as a desktop application, and files are stored in the cloud, so anyone with access can open the latest version without sending files back and forth. Designers use Figma to sketch ideas, design detailed screens, build reusable component libraries, create clickable prototypes and share work with developers and stakeholders.

Since its launch, Figma has become the most widely used tool for interface design. Its strength lies in real-time collaboration: several people can work in the same file at once, see each other’s cursors, leave comments and review changes. That makes it as useful for product managers, developers and clients as for designers.

Getting to know the interface

Area	What it does
Canvas	The infinite workspace where you design
Toolbar	Tools for frames, shapes, text, pen and comments
Layers panel	Lists every element and page in the file
Properties panel	Controls size, layout, colour, type and effects for the selected element
Assets panel	Shows components and libraries available to use

Files can contain several pages, which helps organise work, for example separating explorations, final designs and component libraries. Keyboard shortcuts speed up almost every action, and learning the common ones early saves a lot of time.

Frames, shapes and text

Frames are the containers for designs. A frame can represent a phone screen, a web page or a single component such as a card. Figma includes preset sizes for common devices. Inside frames, designers add shapes, text, images and other frames. Frames can be nested to build complex layouts, and they can clip content, apply backgrounds and act as the basis for responsive behaviour.

Auto layout

Auto layout is one of Figma’s most powerful features. It lets frames arrange their contents automatically in rows or columns, with defined spacing and padding. When content changes, for example when button text gets longer, the frame resizes itself. Auto layout makes designs behave much more like real code, which speeds up design work and helps developers understand how layouts should respond.

Set direction: horizontal or vertical
Define spacing between items and padding around them
Choose whether elements hug their content or fill available space
Nest auto layout frames to build complex, responsive layouts

Components, variants and variables

Components are reusable design elements, such as buttons, inputs or navigation bars. When you edit the main component, every copy updates automatically. Variants group related versions of a component, such as primary and secondary buttons or default and error states, into a single set. Variables and styles store values like colours, spacing and typography, and can support themes such as light and dark mode. Together, these features form the basis of a design system; our guide to building a design system from zero explains how to structure one.

Prototyping

Figma’s prototyping tools turn static screens into clickable flows. Designers connect elements to destination frames and choose how transitions behave, such as instant changes, slides or smart animate, which smoothly animates matching layers between screens. Interactive components let elements such as toggles and dropdowns respond inside a prototype. Prototypes can be shared with a link and tested on desktop or mobile devices.

Design the screens: Create each frame in the flow.
Add connections: Link buttons and elements to destinations.
Choose transitions: Pick the animation and timing.
Preview: Test the flow in presentation mode.
Share and test: Send a link to users or stakeholders.

Collaboration and feedback

Real-time collaboration is central to Figma. Team members can work in the same file simultaneously, leave comments pinned to specific elements and resolve them when addressed. Version history lets teams review and restore earlier versions. Branching, available on some plans, allows larger changes to be explored separately and merged later. Our guide to giving effective design feedback helps teams use comments well.

Handoff to developers

Developers can inspect designs directly in Figma to see measurements, colours, typography and spacing, and export assets such as icons and images. Dev Mode provides a view focused on implementation, with code snippets and links to component documentation. Well-organised files, with clear layer names, consistent components and documented variables, make handoff much smoother.

Getting started as a beginner

If you are new to Figma, start by recreating a simple screen from an app you use, such as a login page or settings screen. Practise frames, text and auto layout first, then turn repeated elements into components. Once you are comfortable, link a few screens into a prototype and share it with someone for feedback. Figma’s own learning resources and community files are a good place to find examples. For the principles behind good interfaces, see our modern UI design guide.

Figma now includes AI tools too. Our Figma Make tutorial shows how to turn a prompt into a working prototype, and our guide to Claude Design covers Anthropic’s alternative.

Tips for working efficiently

Name layers and frames clearly
Use auto layout for almost everything
Build components for anything you use more than once
Store colours and type as styles or variables
Organise files with pages and sections
Learn the most common keyboard shortcuts

Frequently asked questions

Is Figma free?

Figma offers a free plan with core features, and paid plans that add team libraries, advanced features and more collaboration options.

Do developers need a paid Figma seat?

It depends on how they use it. Viewing and commenting is broadly available; Dev Mode features are included in specific paid plans.

Can Figma be used for presentations?

Yes. Many teams create slide-style presentations and share prototypes in presentation mode.

Is Figma only for UI design?

It is mainly used for interfaces, but teams also use it for diagrams, social graphics, presentations and whiteboarding.

How long does it take to learn Figma?

Most people learn the basics in a few days of practice. Mastering auto layout, components and variables takes a few weeks of regular use.

Related articles