Figma
Also known as: Figma design, FigJam, UI design tool
Figma is a cloud-based design and prototyping tool for creating user interfaces (UI) and user experience (UX) designs for websites and apps.
Designers use it to create mockups, interactive prototypes, and design systems. It's browser-based with real-time collaboration, making it the standard handoff tool between designers and developers. Figma became the dominant UI design tool in the industry through the 2020s.
Figma, explained at three levels
At home
Figma is the design tool that product designers use to create the visual layouts of apps and websites before developers build them. Think of it as a very precise drawing tool where you can design what an app screen looks like, then link screens together to simulate how the app would actually work, without writing any code.
At work
In a product or tech company, Figma is where the design team works. Designers create wireframes (rough layouts), mockups (detailed visual designs), and prototypes (clickable simulations) in Figma. Developers inspect the Figma file to get exact measurements, colours, fonts, and assets for building the real product. Product managers and stakeholders review designs and leave comments directly in Figma.
At home
Figma's component system is its most powerful feature for consistent design. A component is a reusable design element (like a button or navigation bar) that you define once. When you update the master component, every instance of that component in your design updates automatically, similar to how styles work in word processors, but for UI elements.
At work
Figma's Dev Mode gives developers a dedicated view of design files with auto-generated CSS, iOS, and Android code snippets, making design-to-development handoff precise and fast. Variables and tokens allow design teams to define a single colour or spacing value that syncs across all components and directly exports to developer code. Auto Layout makes designs responsive by defining how elements grow and stack at different sizes.
At home
Advanced Figma users build full design systems: libraries of components, styles, and design tokens that enforce visual consistency across an entire product. Figma's advanced prototyping (smart animate, variants, conditional interactions) creates high-fidelity prototypes that feel like real apps for user testing. Plugins extend Figma's functionality with tools for accessibility checking, icon libraries, and content population.
At work
At enterprise scale, Figma's organization structure (teams, projects, libraries) requires careful governance to keep design systems in sync across product lines. Figma's REST API allows programmatic access to design files, used by teams that automatically generate design tokens for engineering, sync design data with documentation tools, or build internal design review automation. Figma's branch and review system (similar to git branches) allows teams to propose design changes and merge them after review, reducing conflicts in large design projects.
Real-world examples
At home
Marcus was learning UI design and used Figma to redesign his favourite app as a portfolio project. He used the Community library to find an iOS component kit, then designed three screens showing how he would improve the onboarding flow, linked them together as a prototype, and shared the link with potential employers.
At work
Aisha, a product designer, maintained a shared Figma component library used by her entire eight-person design team. When the brand refreshed its primary colour from blue to teal, she updated the colour token in one place and the change propagated across 40 design files and hundreds of components in seconds.
How it compares
| feature | Figma | Canva | Adobe Photoshop |
|---|---|---|---|
| Primary use | UI/UX design and prototyping | Marketing graphics and templates | Photo editing and raster graphics |
| Collaboration | Real-time, browser-based | Real-time, browser-based | Limited (file-based) |
| Dev handoff | Built-in Dev Mode with code specs | Not applicable | Manual measurement |
| Design systems | Component libraries, tokens, variables | Brand Kit (limited) | Styles and actions (limited) |
| Best for | Product design teams, app/web UI | Non-designers, marketing content | Photography, complex image editing |
Figma is the standard for product designers creating app and website interfaces, especially for teams that need real-time collaboration and seamless developer handoff. Canva is better for non-designers creating marketing content from templates. Adobe Photoshop is better for photo editing and raster-based design work.
For analysts
When assessing a product team's design process, Figma file organization is often the first sign of maturity level. Teams with one giant 'Main' file containing everything are typically struggling with file performance and access control. Recommend a file structure (one file per product area or feature, shared component libraries as separate files) as an early quick win.
History & origin
Figma launched in 2016 after four years of development, founded by Dylan Field and Evan Wallace. Its browser-based, real-time collaboration model directly challenged Sketch, the Mac-only app that then dominated UI design. Figma gained rapid adoption in design-forward tech companies. In 2022, Adobe announced a $20 billion acquisition of Figma, but the deal was abandoned in December 2023 after regulatory scrutiny from the EU and UK. FigJam (an online whiteboard) was added in 2021. By 2025, when it went public, Figma reported about 13 million monthly users and was the standard design tool at most major tech companies.