Figma
Figma
The standard tool for interface design; the free Starter plan is enough to get going.
A tool for interface design and prototyping, with many people working together in the browser.
Overview
Figma is a collaborative design platform used to design websites, apps and many other products. Multiple people can open the same file, see each other's cursors, comment and edit in real time.
Besides Figma Design, the ecosystem includes FigJam (whiteboard), Figma Slides, Dev Mode (turning designs into information for developers), Figma Make and some products in beta such as Figma Sites and Figma Buzz.
Features like auto layout, components and variables help build a reusable interface identity, very useful when a business has many channels and many people working on design.
Highlights
Real-time collaboration
Many people work on one file, with comments and cursor chat.
Auto layout
Frames resize and rearrange automatically when content changes.
Components and variables
Reuse interface elements and values for color, spacing and text.
Dev Mode
Helps developers get the information to turn designs into code, and connects the design system to the codebase via Code Connect.
Full ecosystem
FigJam, Slides, Make, Draw and other products on the same platform.
Branching and merging
Create branches to try design options, then merge them back.
What it's for
Designing websites and apps
Designers build interfaces and send a link so business owners can comment directly on the file.
Shared brand kit
Save colors, fonts and buttons as components so all materials stay in sync.
Brainstorming with FigJam
The marketing team maps customer journeys and brainstorms campaign ideas on the whiteboard.
Handoff to devs
Developers use Dev Mode to get specs when building the interface.
Making presentation slides
Use Figma Slides to make presentations that follow your brand identity.
How to use it
- 1
Create an account
Sign up at figma.com; you can start with the free Starter plan.
- 2
Create a design file
Create a new Figma Design file and choose frames by the screen size you need.
- 3
Build components and variables
Define colors, text and buttons as reusable elements.
- 4
Invite collaborators
Share the file so colleagues or customers can comment directly.
- 5
Handoff
Pass it to developers to view through Dev Mode and build the real product.
Video guides
Course overview: Figma Design for beginners [1 of 13]
Figma
Free Figma Crash Course for Beginners 2026 UI/UX Design
DesignWithArash
A Guide to Auto Layout: Best Practices, Tips & Tricks Figma
Figma
Real-world example
A small travel company in Nha Trang is preparing to rebuild its tour booking website. A freelance designer creates a Figma file, with ready-made components for tour cards and the booking button and a brand color palette using variables. The company owner opens the link in the browser to comment directly on each screen, then the developer uses Dev Mode to get specs and build the website exactly as designed.
Tips & notes
Build components first
With standard components, later pages are made faster and stay consistent.
Use variables for brand colors
Change one place and the whole design updates.
Choose the right seat type
People who only give feedback can use a cheaper seat; check each seat type's permissions on the pricing page.
FAQ
Does Figma have a free version?
Yes, the free Starter plan with limited access to Figma products.
How much is the Professional plan?
Per the pricing page, Full seat 16 USD, Dev seat 12 USD, Collab seat 3 USD per seat per month.
Can non-designers use it?
Yes, business owners and marketers can view and comment, while FigJam and Slides suit the whole team.
Useful links
Want to apply this in your business?
2dm looks at your workflows, picks the right tools and sets them up with your team. The first call is free.
Same topic
shadcn/ui
4.5
A set of UI components for React and Tailwind CSS: copy the code into your project, then customize it.
Lucide Icons
4.5
An open-source set of thin-stroke icons, usable for the web, React and design.
Tailwind CSS
4.5
A utility-class CSS framework for building interfaces quickly right in HTML.