Wireframing & Prototyping
Low-fidelity wireframes and high-fidelity interactive prototypes.
Wireframing is the cheap-paper sketching phase; prototyping is the click-through-it-feels-real phase. Most modern UI tools do both; specialized tools still beat them at the extremes.
All-in-one (UI design + prototyping)
- ★ Penpot — open source (MPL-2.0), includes interactive prototyping with transitions, overlays, and flows. The default OSS pick.
- ★ Figma (free tier) — built-in prototyping; free tier limits the number of files but not prototyping features. Industry default.
Low-fi wireframing (deliberately ugly)
- ★ Excalidraw — hand-drawn aesthetic; free + OSS; great for sketching flows in meetings. See Whiteboards.
- Balsamiq Wireframes — closed source, paid; the original "looks like pencil sketches" wireframer. 30-day trial only.
- Mockflow Wireframepro — freemium; one project free.
- Whimsical — closed source, freemium (4 boards free); wireframes + flows + sticky notes.
- Wireflow — free OSS user-flow charting tool; opinionated and lightweight.
- Plain HTML —
<input>,<button>, browser styles. Underrated.
High-fi interactive prototyping
- ★ Framer (free tier) — closed source; free site / 3 pages; the best "code-flavored" interactions outside of writing real code. Site builder and prototyper.
- ProtoPie (free tier) — closed source; sensor-aware (mic, tilt, camera) prototyping; free hobby plan.
- Origami Studio — Meta's free prototyping tool (macOS only); patch-based, designed for advanced interaction prototypes. Closed source but free.
- Principle — macOS, paid; legacy timeline-based prototyper.
- Play — iOS prototyping on iPad; closed source, free tier.
Code-flavored prototyping
- ★ Real components in Storybook / Ladle — see UI Components. For dev-leaning teams, the highest-fidelity prototype is the actual component.
- v0.dev, bolt.new, Lovable, Subframe — AI-flavored prototype-to-code tools (2025–26). Free tiers vary; closed source.
- CodeSandbox / StackBlitz / Tonic — see Code Playgrounds.
Flow charts and user journeys
- See Diagrams & Flowcharts (xyflow, Mermaid, drawio).
- FigJam (Figma's whiteboard) — free tier covers it.
Pick this if…
- Default OSS, end-to-end: Penpot.
- Stuck on Figma, that's fine: Figma + FigJam free tier.
- Quick scribble wireframes: Excalidraw.
- Sensor / mobile prototypes: ProtoPie or Origami Studio.
- Marketing site prototype that ships: Framer free tier.
- Engineer-led team: real components in Storybook.