Figma: design and prototyping for teams
Figma is an interface design tool that runs in the browser. Designers, developers and managers work on the same file at the same time. It is the centre of product design, from wireframes to the design system and clickable prototypes.
- Type
- Interface design and prototyping
- Price
- Free starter, paid team plans
- Platform
- Browser and desktop
- For developers
- Dev Mode
What is Figma?
In Figma a design system is built from components and variables: change a button once and it updates on every screen. Prototype mode links screens together so you can check the flow before user testing.
In product projects Figma is also my documentation: sitemap, flows, comments and handoff live in one file. Dev Mode gives developers the measurements and code directly.
What Figma makes possible
Wireframes and flows
Structure and the user path.
Components and variables
The basis of a design system.
Prototype
A clickable demo and user testing.
Collaboration and comments
With your team in real time.
Dev Mode
Measurements and code for developers.
FigJam
A board for brainstorms and workshops.
What Figma works with
- Open the guide
Webflow
A visual site builder, CMS and hosting in one place.
- Open the guide
Claude Design
Design with Claude: screens, prototypes and visuals.
- Open the guide
WeWeb
A visual front-end builder. Web apps with Xano and Supabase.
- Open the guide
GitHub
Code hosting, version control, teamwork and CI/CD.
My experience
Projects where I used Figma:
- [Project: brand, what I built, result %]
- [Project: brand, what I built, result %]
Figma resources
Questions about Figma
Is Figma free?
The starter plan is free. Team libraries and Dev Mode need a paid plan.
Can a non-designer use it?
For viewing, commenting and simple edits, yes. FigJam is easier for managers.
Can Figma produce a website directly?
There are links and plugins for tools like Webflow, but for a good result the design has to be structured for it.