Shared Language
Naming Conventions
How consistent names reduce friction across design, code, and conversation
Key Insight
Names are the primary interface between design and engineering. When designers call something a "card" and developers call it a "tile," small friction compounds into rework, bugs, and miscommunication. Naming by function rather than appearance creates names that survive rebrands and communicate intent. Aligning names between Figma and code is one of the highest-ROI system investments.
Key Points
- •Consistent names remove ambiguity from handoffs, reviews, and conversations
- •Function-based names survive visual changes; appearance-based names break
- •Misaligned design/code names create silent debt that compounds over time
- •A shared glossary is infrastructure — build and maintain it jointly
- •When two names exist for one thing, choose one and retire the other
Guidelines
- ✓Name by purpose: "Promotional Billboard" over "Big Blue Banner"
- ✗Avoid names tied to current visual values (colors, sizes) that change
- ✓Align Figma component names with code component names exactly
- ✓Document names in a glossary that both design and development own
- ✓Audit for synonyms quarterly and resolve them
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall — strengthens long-term retention