What is Figma?

What Figma is

Figma is a browser-based design tool for interfaces, prototypes, and design systems, built for teams to work together. Clients can review and comment on designs before any code is written, which saves time and rework.

Figma was founded in 2012 by Dylan Field and Evan Wallace. Their idea was to put a professional design tool in the web browser, so that people could work on the same file at the same time. After several years of development, Figma opened to the public in 2016.

It grew quickly among product design teams, largely because sharing a design was as simple as sending a link. Figma released FigJam, an online whiteboard, in 2021. Adobe announced a plan to buy Figma in 2022, but the two companies ended the deal in 2023, and Figma stayed independent.

How Figma works

Figma runs in the browser, and files are stored online. You work on a large canvas. On it you draw frames, which stand for screens or sections, such as a phone screen or a web page. Inside frames you place shapes, text and images, arranged in layers. Everyone with access sees the same file, and you can watch other people's cursors move as they work.

Components are reusable pieces, such as a button or a card. You design the component once and place copies, called instances, wherever you need them. When you change the main component, every instance updates. Variants hold different versions of a component, such as a default and a hover state. Styles and variables store shared colors, text settings and spacing. Together these make up a design system.

Auto layout makes a frame resize around its content, in a way that is close to how layouts work in CSS. Prototyping lets you link frames together so that clicking a button moves to another screen, which gives you a clickable demo without code. Developers can then inspect any element to read its sizes, colors and spacing.

Key features of Figma

• Real-time collaboration

  Several people can edit one file together, leave comments and see changes as they happen.

• Components and variants

  Build a button or card once and reuse it everywhere. Updates flow to every copy.

• Auto layout

  Frames grow, shrink and reflow as content changes, which keeps designs close to how they will be built.

• Prototyping

  Connect screens with clicks and transitions to test a flow before development starts.

• Developer handoff

  Developers can inspect measurements, colors and assets directly in the file. Dev Mode adds more tools for this.

• Plugins and Community

  A large library of plugins, templates and UI kits shared by other users.

When to use Figma

Figma compared with alternatives

How to start learning Figma

1. 01Create a free account at figma.com and open a new design file.
2. 02Learn frames, shapes, text and layers by copying the layout of a simple app screen you like.
3. 03Go through the beginner lessons in Figma's official help center.
4. 04Rebuild your screen with auto layout and turn the buttons into components.
5. 05Link two or three screens together in prototype mode and share the link with someone for feedback.

What Figma costs

Figma has a free plan with limits on the number of files and some features. Paid plans are billed per seat and add unlimited files, shared libraries and more developer tools. Check the official pricing page for current plans, since they change.

How DATAL Projects uses Figma

Figma is part of our ui/ux design work in the Philippines. Common uses:

• Website and app mockups
• Clickable prototypes
• Design systems

Common questions about Figma