Figma
Where design decisions get made before a line of code is written.
What it is
Figma is a browser-based interface design tool. You design screens, create interactive prototypes, build component libraries, and collaborate with clients and developers all in one place. It replaced desktop tools like Sketch and Adobe XD for most teams because everything lives in the cloud, there's nothing to install, and sharing a design is as simple as sending a link.
The component system is the most important feature: design elements like buttons, cards, navigation bars, and form fields are defined once as components and reused across designs. Change the main component and every instance updates. That keeps designs consistent and makes exploring variations fast.
How I use it
Every web project starts in Figma. Before any code is written, the layout, typography, colour system, component structure, and responsive breakpoints are all worked out at design stage. That makes the development process faster because there are no mid-build decisions about spacing or hierarchy - they've already been resolved.
Client review happens in Figma too. Sharing a prototype link means clients can click through the design, see how transitions work, and give feedback on the actual visual output rather than trying to interpret wireframes or static screenshots. Changes at design stage cost minutes; the same changes in code cost hours.
Why this over the alternatives
Figma has become the standard for interface design because it combines the best parts of previous tools (component libraries from Sketch, auto-layout from XD) and adds real-time collaboration that makes client review practical. Adobe XD is now discontinued; Sketch is Mac-only; Figma runs anywhere.
What it means for your site
- Designs can be shared with clients for review before development begins
- Component libraries ensure visual consistency across every screen
- Auto-layout mirrors how CSS flexbox and grid work, so designs translate directly to code
- Dev mode exports CSS values, spacing measurements, and assets directly from designs
Also in Design
Want this on your project?
Get in touch and we can talk through what stack makes sense for what you are building.
Start a conversation