Figma for Founders

Figma is not just for designers. It is a communication tool for product teams.

• ▸Communicate your vision — a wireframe beats a 10-page requirements document every time
• ▸Save money — design iterations in Figma are free, code iterations cost developer hours
• ▸Speed up hiring — show candidates exactly what you are building to attract top talent
• ▸Investor decks — build interactive prototypes that wow investors during demo day
• ▸Customer validation — share clickable prototypes with users before writing any code
• ▸Free tier — Figma's free plan includes unlimited files and up to 3 projects

Master the core concepts in 30 minutes.

• ▸Frames — The building block of everything. Think of frames as containers (like div in HTML)
• ▸Auto Layout — The most powerful feature. Makes frames behave like flexbox with padding and gap
• ▸Constraints — Pin elements to edges so designs scale correctly across screen sizes
• ▸Styles — Save colors, fonts, and effects as reusable styles for consistency
• ▸Components — Reusable UI elements like buttons, cards, and navigation bars
• ▸Variants — Multiple states of a component (default, hover, active, disabled) in one
• ▸Plugins — Unsplash for photos, Iconify for icons, Content Reel for placeholder text

Go from idea to visual in under an hour.

• ▸Start with mobile — Designing for the smallest screen forces you to prioritize what matters
• ▸Use gray boxes — Fill rectangles with different grays to represent content hierarchy
• ▸Stick to one font — Inter (built into Figma) with 3 sizes: 32px heading, 16px body, 12px caption
• ▸Grid system — Use a 12-column grid with 16px gutters for consistent spacing
• ▸Copy existing patterns — Screenshot competitor apps and use them as reference, not templates
• ▸Low fidelity first — Ugly wireframes that capture the right flow beat beautiful dead-end designs

A simple system saves hundreds of hours as your product grows.

• ▸Color tokens — Define 5 colors: primary, secondary, background, surface, and text
• ▸Typography scale — 4-5 sizes with consistent line height: H1, H2, Body, Small, Caption
• ▸Spacing scale — Use multiples of 4px: 4, 8, 12, 16, 24, 32, 48, 64
• ▸Button component — Build one button with variants for size (sm/md/lg) and style (primary/secondary/ghost)
• ▸Input component — Text fields, selects, and checkboxes with default, focus, error, and disabled states
• ▸Card component — A reusable content container with image, title, description, and action slots

Make your designs interactive without writing code.

• ▸Connections — Click any element, drag the blue arrow to the destination frame
• ▸Interactions — On Click, On Hover, On Drag, While Pressing, and more trigger types
• ▸Transitions — Smart Animate automatically tweens matching layers between frames
• ▸Overlays — Show modals, dropdowns, and tooltips without duplicating entire screens
• ▸Scrolling — Set frames to vertical or horizontal scroll for long content
• ▸Variables — Use boolean, string, and number variables for conditional prototyping logic
• ▸Present mode — Press Play to run the prototype. Share the link for remote user testing

Give your developers everything they need to build accurately.

• ▸Dev Mode — Toggle Dev Mode in Figma to show CSS, iOS, and Android code snippets
• ▸Inspect panel — Developers can click any element to see exact dimensions, colors, and spacing
• ▸Export assets — Mark icons and images for export at 1x, 2x, and 3x resolutions
• ▸Naming convention — Use clear, developer-friendly names: 'btn-primary-lg' not 'Rectangle 47'
• ▸Design specs — Add annotations for interactions, edge cases, and responsive behavior
• ▸Version history — Use Figma's version history to track changes and prevent confusion
• ▸Branching — Use Figma branches for design exploration without affecting the main file

Make Figma the single source of truth for your product team.

• ▸File structure — One project per product, one file per feature area, pages for versions
• ▸Naming pages — 'v1.0 — Launch', 'v1.1 — Onboarding Redesign', 'Archive' for old designs
• ▸Comments — Use Figma comments for async design feedback instead of Slack threads
• ▸FigJam — Use Figma's whiteboard tool for brainstorming, user flows, and sprint planning
• ▸Team libraries — Publish your design system so every file stays in sync automatically
• ▸Permissions — Editors for designers, Viewers for developers and stakeholders