A Better Approach to Naming in Design Systems

Dec 30, 2024

In the ever-evolving world of design systems, names matter. The terminology we use directly impacts how accessible and scalable a system is for designers, developers, and stakeholders.

One of the most overlooked areas in design systems is the naming of tokens. Recently, I’ve been exploring the idea of renaming the density, padding, spacing, or dimensions token set to something simpler and more intuitive: layout tokens.

Here’s why this shift could make a meaningful difference.


What Are Layout Tokens?

Layout tokens are a proposed way to categorize tokens that influence the spacing, padding, density, and dimensions of components and pages. These tokens impact how elements are arranged and interact with one another, making them foundational to the structure of a design system.

By renaming these tokens "layout," we make their purpose clearer to all users, regardless of their technical expertise.


3 Reasons to Rename Tokens to Layout

  1. It’s Inclusive and Intuitive
    Not everyone using a design system is a technical user. Product managers, marketing teams, and stakeholders often interact with these systems. Terms like "density" or "dimensions" can be confusing, but "layout" resonates across roles and disciplines.

  2. It Reflects Their True Purpose
    Layout tokens influence the structure and arrangement of components and pages. Using a name that aligns with their function ensures clarity and reduces confusion, especially for teams new to the system.

  3. It Promotes Consistency and Scalability
    Unified naming conventions make design systems more scalable and easier to use. A clear term like "layout tokens" simplifies onboarding for new users and ensures consistency across teams.


What to Consider Before Renaming Tokens

While the idea of renaming tokens may sound straightforward, there are a few considerations to keep in mind:

  1. Avoid Overlaps:
    Ensure the term "layout" doesn’t conflict with other token sets, such as grid or alignment tokens. Clearly define the scope of layout tokens in your documentation.

  2. Update Documentation:
    Any name change requires updates to your documentation. This includes definitions, examples, and implementation guides to ensure smooth adoption across teams.

  3. Coordinate Migration:
    If these tokens are already in use, plan the migration carefully with developers to avoid disruptions. Tools like Figma, Tokens Studio, or codebases linked to tokens might need updates.


Why This Matters for Design Systems

Design systems thrive on collaboration and clarity. Renaming tokens isn’t just about semantics—it’s about making systems more accessible, intuitive, and effective for all users.

When naming reflects intent, it strengthens adoption and enhances usability. It ensures that everyone, from designers to developers to stakeholders, is aligned on how to use the system.