🧩 Figma Tokens
What Are Design Tokens?
Design tokens are the atomic values used to construct and maintain a consistent design system. They represent the foundational styles of a product—such as colors, typography, spacing, border radius, and more—in a way that can be platform-agnostic and developer-friendly.
In Figma, design tokens allow us to connect visual decisions to code and ensure alignment between design and development.
Example Tokens:
- color.primary = #007AFF
- font.size.sm = 12px
- spacing.md = 16px
- border.radius.sm = 4px
⚙️ How We Use Design Tokens in Figma
1. Setup and Structure
We use plugins like Figma Tokens or Tokens Studio to define and manage our design tokens. Tokens are organized into categories such as:
- Colors: Base colors, semantic colors (e.g., success, warning), and dark/light mode variants.
- Typography: Font sizes, weights, line heights, letter spacing.
- Spacing: Padding, margins, grid gutters.
- Radii & Shadows: Corner radius for components, elevation levels.
- Borders & Opacity: Used for component states like hover and disabled.
2. Applying Tokens in Figma
Design tokens are applied to components and frames via:
- Styles (for colors, text, effects)
- Naming conventions (e.g., spacing/sm, font/heading/lg)
- Token plugins to sync changes and apply variable values consistently
Using these ensures our designs remain scalable and easy to update, especially when we support multiple themes (light/dark) or brands.
👥 How to Use Design Tokens as a Team
✅ Designers
- Always apply existing tokens instead of creating new styles unless approved.
- Use token libraries for cross-project consistency.
- Document any new tokens added (via naming conventions and version logs).
✅ Developers
- Sync token JSON files via Git or code repo.
- Consume tokens from the design system package (e.g., using Tailwind config, CSS vars, or theme objects).
- Coordinate with design to understand token changes/releases.
✅ Everyone
- Refer to the {insert design token dictionary link} for clarity.
- File a Token Request if a new token or semantic mapping is needed.
- Use version control to track changes and sync across tools (e.g., GitHub → Figma Tokens Plugin → Codebase).
🗂 Token Reference (Internal)
Token Name
Type
Value
Usage Example
color.primary
Color
#007AFF
Buttons, links
font.size.sm
FontSize
12px
Captions, tags
spacing.md
Spacing
16px
Card padding, grids
radius.sm
Radius
4px
Inputs, chips
