Figma
Figma is a browser-based design and prototyping tool. No install, real-time collaboration, and a free tier that’s enough to design and share flows. This guide focuses on the concepts that add value: what to learn first, what to skip until you need it, and how to keep work usable by others.
Getting started with Figma: A beginner's guide
Why figma fits product work
Core concepts that matter
Frames and pages
Every screen lives in a frame (device-sized or custom). Pages group flows (e.g. “Onboarding”, “Settings”). Use one or two pages for a simple app; add more as the file grows.
Components and variants
Components are reusable elements (buttons, cards, inputs). Edit the master; instances update. Variants (e.g. primary / secondary, or default / hover) live in one component and switch in the properties panel. Build components for what you repeat most: nav, buttons, form fields.
Figma components: the basics to creating robust components
Auto layout
Auto Layout makes a container size to its content (and optionally to space). You set padding, gap, and direction (vertical/horizontal). Use it for lists, cards, and anything that should reflow - it’s the basis for responsive mockups and for design that maps cleanly to flexbox/grid in code.
A Guide to Auto Layout: Best Practices, Tips & Tricks
Styles: color and text
Define color and text styles once and reuse them. They keep shades and fonts consistent and become the base for a design system later. Start with a small set (e.g. one primary, one neutral, a few text sizes).
Prototyping and flows
Add hotspots to a frame, set destination and transition, and chain frames into a flow. Share the prototype link for demos or usability tests. One clear path (e.g. signup → onboarding → dashboard) is more useful than many half-finished branches.
Comments and handoff
Comments attach to a spot or a layer. Use them for feedback and spec notes. On the free tier, a “Specs” or “Handoff” page with notes and “in/out for v1” makes a big difference. Dev Mode adds inspect and code snippets (paid).
Figjam: when to use it
FigJam is the whiteboard. Use it for brainstorming, user journeys, workshops, and lightweight roadmapping. When an idea becomes a flow or a screen, move it into Figma (redraw or paste a screenshot) and refine there. Keep exploration in FigJam and shippable UI in Figma.
Practical habits
When figma isn’t the fit
Pricing (high level)
Free - Unlimited files and collaborators, core Figma and FigJam. Enough for most solo and small-team use. Some advanced features (e.g. unlimited Dev Mode, branching) are paid.
Professional / Team - More seats, better org controls, version history. Enterprise - SSO, security, compliance. Check Figma’s pricing for current details.
Release Notes 2024 - September Edition
For most product work, Figma is a strong default. Start with the free tier, lean on components and Auto Layout, and add libraries and Dev Mode as the team and product grow.
