Figma — Designing Before You Build
A visual blueprint before any code is written
Figma is a design tool where you lay out exactly what a screen should look like — colors, spacing, buttons, text — before a developer builds it in code. This platform itself follows a strict "Figma first" rule: no new UI screen gets built without an approved Figma design.
Why design-first saves time, not costs it
It's far cheaper to move a button around in a design file than to rebuild it in working code. Catching layout and usability issues on a static design, before any code exists, prevents expensive rework later.
A frame is one screen; a component is a reusable piece
In Figma, a "frame" typically represents one full screen or page. A "component" is a reusable design piece (like a button or a card) defined once and reused everywhere, so changing it once updates every instance — the design equivalent of code's reusable functions.
Key Takeaways
- Figma is where a screen's visual design is laid out before any code is written.
- Design-first catches usability issues cheaply, before expensive code rework is needed.
- A "frame" is typically one full screen; a "component" is a reusable design piece.
- This platform enforces a strict Figma-first rule for all new UI screens.
Open a public Figma file
Search 'Figma community design system' and open any public file. Click on a frame and a component to see the difference between them.