Design Tokens

Girl who code — Fri, 27 Mar 2026 18:45:52 +0000

Design tokens are a single source of truth for reusable design properties, stored in such a way that computers and humans can easily read and process them. They represent core design decisions and translate them into a structured, sharable, and reusable format.

Examples of design tokens include:

Colors: primary-color: #FF5733
Typography: font-size-large: 16px
Spacing: spacing-sm: 8px
Borders: border-radius-md: 4px

Why Do Design Tokens Matter?

Historically, developers and designers often worked with separate tools and formats, leading to issues like:

Inconsistencies in design implementation.
Duplication of effort when updating or scaling designs.
Miscommunication between teams.
By using design tokens, these issues are minimized because tokens act as a shared, universal language.

How Design Tokens Work

Core Principles

Platform-agnostic: Stored in formats like JSON or YAML so they can be consumed by any system—web, mobile, or desktop.
Scalable: Tokens allow changes to propagate easily across all designs and implementations.
Customizable: Tokens can adapt to themes or user preferences, like dark mode.

Structure of Tokens for developers at work
Tokens are often stored hierarchically, e.g.:

{
  "color": {
    "primary": {
      "default": "#FF5733",
      "hover": "#FF7845",
      "active": "#FF4620"
    }
  },
  "typography": {
    "font-size": {
      "small": "12px",
      "medium": "16px",
      "large": "20px"
    }
  }
}

How They Benefit Designers

Consistency Across Designs:
A centralized repository ensures that every design adheres to brand standards.
For example, if the brand's primary color changes, updating the token reflects this change everywhere.

Efficient Prototyping:
Tokens allow designers to create prototypes that directly match the end product.

Bridge to Developers:
Design tokens provide a common language between design tools (like Figma or Adobe XD) and development tools.

Supports Dynamic Design Systems:
For responsive or adaptive designs, tokens enable scalability (e.g., changing spacing or font sizes across devices).

** ## How They Benefit Developers**

Reduced Manual Work:
Developers can pull tokens from a shared library instead of hardcoding values.

Improved Scalability:
When the design changes (e.g., a new color scheme for a theme), tokens enable quick updates without hunting down all instances.

Cross-Platform Consistency:
A single set of tokens can be applied across web, iOS, and Android platforms.

Facilitates Theming:
Tokens can be used to define multiple themes (e.g., light mode, dark mode, brand variations).

How Design Tokens Fit into Design Systems

Design tokens are a foundational element of design systems, which are comprehensive collections of reusable components, patterns, and guidelines.

Tokens provide:

Atomic definitions (e.g., colors, fonts, spacing) that feed into:

Components (buttons, cards, etc.)
Patterns (layouts, grids)

For example:
If a button uses primary-color for its background, updating the token instantly changes all buttons across the system.

Tools for Managing Design Tokens

Design Tools:
Figma Tokens Plugin: Automates token management within Figma.
Adobe XD: Allows exporting assets as tokens.

Token Management Platforms:
Style Dictionary: A tool by Amazon for transforming and managing tokens for multiple platforms.
Token Studio: Focuses on synchronizing design tokens between tools.

Development Frameworks:
Tailwind CSS: Utilizes a token-like approach with utility-first CSS.
Theme UI: Integrates tokens for React-based theming.

Practical Example: Button Styling with Tokens
Imagine styling a button component using tokens:

Design Token Definition (JSON):

{
  "color": {
    "button": {
      "background": "#3498db",
      "text": "#ffffff"
    }
  },
  "spacing": {
    "padding": "12px 24px"
  },
  "border": {
    "radius": "8px"
  }
}

CSS Using Tokens:

.button {
  background-color: var(--color-button-background);
  color: var(--color-button-text);
  padding: var(--spacing-padding);
  border-radius: var(--border-radius);
}

React Component:

const Button = () => (
  <button className="button">Click Me</button>
);

Result: Changing the color.button.background token in JSON changes the button's background color everywhere.

How Design Tokens Make Life Easier

For Designers:

Streamlined workflows.
Fewer handoffs and iterations with developers.
Easier brand updates.

For Developers:

Faster implementation and reduced bugs.
Unified experience across platforms.
Simplified maintenance and scaling.
In short, design tokens bridge the gap between design and development, improving collaboration and ensuring consistency. They're indispensable for modern, scalable design systems.

Controlled vs Uncontrolled Components in React

Girl who code — Sun, 15 Dec 2024 06:50:55 +0000

Controlled Components: React Components that control the state of form elements via state or props, i.e., every state mutation will have an associated handler function.

Characteristics

Value controlled by state - element value is bound to state variable
Requires event handler - To update the state you need event handler
Predictable - Since the component state represents the input value, the component is predictable and easy to debug
React Handles the input data and doesn't rely on DOM to keep track of the current input value

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange} 
      />
    </form>
  );
}

Uncontrolled Components: React Component where DOM itself handles the form element's state. React accesses the input value via ref, which stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Characteristics

Value controlled by DOM - The input field's value is not bound to a state variable.
Uses Ref to access a value or to get the value of input element when needed
They are simpler to set up if you don't need real-time control over input.
Suitable for scenarios where react state isn't required to control the input.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Here's a comparison table between controlled and uncontrolled components:

When to use when
Controlled - for real-time validations, input formatting, or immediate feedback.
Uncontrolled - used for simple use cases like file uploads pre-filled form value isn't frequent or needs to be deferred until form submission.

Forem: Girl who code

Design Tokens

How Design Tokens Fit into Design Systems

How Design Tokens Make Life Easier

Controlled vs Uncontrolled Components in React