Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Basics of Tokens

Design Tokens are reusable design values used across the entire UI system.

Simple meaning:

"Store design values once and reuse everywhere."

Why Tokens Are Used?

Instead of writing random values everywhere:

[code theme="dark"] #ff6600 16px 12px [/code]

We create reusable names.

Example

[code theme="dark"] Primary Color Heading Size Border Radius Spacing [/code]

Simple Real World Example

Suppose a company uses:

  • Orange primary color
  • 16px spacing
  • 12px border radius

Instead of manually remembering these values everywhere, tokens store them centrally.

Color Token Example

Figma Token

[code theme="dark"] Primary Color [/code]

Actual Value

[code theme="dark"] #ff6600 [/code]

Frontend Example

SCSS

[code theme="dark"] $primary:#ff6600; [/code]

CSS Variables

[code theme="dark"] :root{ --primary:#ff6600; } [/code]

Tailwind

[code theme="dark"] colors:{ primary:"#ff6600" } [/code]

Why This is Powerful?

If company changes brand color:

[code theme="dark"] Orange → Blue [/code]

You only update token once.

Entire UI updates automatically.

Main Types of Tokens

  • Colors
  • Typography
  • Spacing
  • Border Radius
  • Shadows
  • Z-index
  • Animation timing

1. Color Tokens

[code theme="dark"] Primary Secondary Success Error Warning [/code]

2. Typography Tokens

[code theme="dark"] Heading XL Heading MD Body Text Caption [/code]

3. Spacing Tokens

[code theme="dark"] 4px 8px 16px 24px 32px [/code]

Used for:

  • Padding
  • Margins
  • Gap

4. Radius Tokens

[code theme="dark"] Small Radius Medium Radius Large Radius [/code]

5. Shadow Tokens

[code theme="dark"] Card Shadow Modal Shadow Dropdown Shadow [/code]

How Figma Uses Tokens?

In Figma, designers create reusable styles:

  • Color styles
  • Text styles
  • Effects
  • Spacing systems

These behave like tokens.

Simple Workflow

[code theme="dark"] Designer Creates Tokens ↓ Frontend Maps Tokens ↓ Reusable UI System [/code]

Example Flow

Figma

[code theme="dark"] Primary Color → #ff6600 [/code]

Frontend

[code theme="dark"] bg-primary [/code]

Why Developers Should Understand Tokens?

  • Easy theme management
  • Consistent UI
  • Better scalable architecture
  • Faster development
  • Easy dark mode support

Dark Mode Example

[code theme="dark"] Light Theme: Background → White Dark Theme: Background → Black [/code]

Only token values change.

Without Tokens

Developers may write:

[code theme="dark"] #ff6600 #ff6600 #ff6600 [/code]

Repeated everywhere.

With Tokens

[code theme="dark"] Primary Color [/code]

Single reusable source.

Tokens in Large Companies

Large companies maintain tokens for:

  • Web apps
  • Mobile apps
  • Dashboards
  • Design systems

Simple Understanding

Tokens are basically reusable design variables.

Just like:

[code theme="dark"] SCSS Variables CSS Variables Tailwind Theme Config [/code]

Quick Summary

  • Design Tokens store reusable design values
  • Used for colors, spacing, typography, shadows, etc.
  • Help maintain consistency across UI
  • Easy to update themes and branding
  • Foundation of modern design systems

Design Tokens are the bridge between designers and frontend developers.