Design Systems & Figma Integration Study Guide

A comprehensive set of vocabulary flashcards covering design systems, design tokens, Figma integration, component architecture, and governance based on the long-form study document.

Design System

A shared language between design and engineering that serves as a single source of truth for how a product looks and behaves, consisting of design tokens, a component library, and documentation.

Design tokens

Named, platform-agnostic design decisions stored as data (e.g., colors, spacing, typography) that encode design decisions as raw values.

Component library

A set of reusable UI components; unlike a full design system, it lacks the broader context of principles, governing documentation, and the processes that sync design and code.

Documentation

A layer of a design system that includes usage guidelines, patterns, accessibility requirements, and the rationale behind design decisions.

Paved path principle

The concept of providing blessed, documented, and opinionated ways to accomplish common UI tasks to ensure velocity, consistency, and accessibility.

Primitive tokens

Also known as global or reference tokens, these are context-free values representing the full available palette, such as $\text{color-blue-500: \#0070f3}$ or $\text{spacing-4: 16\,px}$.

Semantic tokens

Also known as alias tokens, these are purpose-driven references that point to primitives (e.g., $\text{color-action-primary: \{color-blue-500\}}$), enabling easier theming.

Composite token

A token whose value is comprised of multiple named child values, such as a shadow token containing $x$, $y$, blur, spread, and color sub-values.

DTCG (Design Tokens Community Group)

A W3C community group that publishes the standard specification (stable version $2025.10$) for how tokens should be formatted in JSON for cross-platform interoperability.

Style Dictionary

An open-source token transformation tool by Amazon that reads DTCG JSON and transforms it into platform-specific outputs like CSS custom properties, iOS Swift constants, or Android XML.

Figma components

Reusable design elements consisting of a main component, which serves as the source of truth, and instances that inherit changes from that main component.

Figma variables

The Figma-native implementation of design tokens that supports aliasing, multi-mode functionality (light/dark), and a type system, adopted by $84\%$ of teams in $2025$.

Variable modes

Named variants within a Figma variable collection (e.g., Light and Dark) that allow a single semantic variable to map to different primitive values depending on the context.

Figma variable types

The four available types in Figma for variables are Color, Number, String, and Boolean.

Figma Dev Mode

A specialized Figma mode for engineering handoff that provides inspection tools, copy-as-code features, and access to token/variable values.

Code Connect

A tool that links a Figma component to its actual code implementation, displaying the real import and usage example with mapped props within Dev Mode.

Tokens Studio

A Figma plugin (formerly Figma Tokens) that manages design tokens and syncs them bidirectionally with external storage like GitHub or GitLab.

Supernova

A design system platform that ingests Figma variables/styles and outputs tokens in multiple formats while providing managed documentation.

Compound component pattern

A design pattern where a parent component manages shared state and child sub-components compose the UI, such as $<Select>$ and $<Select.Option>$.

Headless component

A component that provides logic, state, and accessibility behavior (e.g., Radix UI) without providing any visual markup or styling.

Controlled component

A component where the consumer owns the state, and the component receives the value and an $onChange$ handler as props.

Uncontrolled component

A component that manages its own internal state, where the consumer uses properties like $defaultValue$ and refs to interact with it.

Component API contract

The public props interface a component exposes, which should be minimal, composable, semantically named, and stable.

Escape hatch

A prop (such as $className$, $style$, or $asChild$) that allows consumers to break out of a component's constraints for unsupported use cases.

asChild prop pattern

A convention (popularized by Radix UI) that allows a component to render as a different HTML element or custom component while maintaining its own behavior.

Variant

A named configuration of a component's visual appearance, such as $\text{variant="primary"}$ or $\text{variant="ghost"}$.

cva (class-variance-authority)

A modern standard for Tailwind-based design systems that maps variant, size, and state combinations to class strings with type safety.

Token-based theming model

A runtime method where components reference semantic CSS custom properties that are redefined under a scoped selector like $[data-theme="brand-a"]$.

Multi-brand theming

A process that swaps the entire semantic layer of tokens (colors, typography, etc.) to support different brands without changing the underlying components.

Token aliasing

The model where semantic tokens reference primitive tokens by name rather than value, which is the key to scalable theming.

Storybook

The standard development and documentation environment for UI components, serving as a sandbox, living documentation, and accessibility audit environment.

Chromatic

A visual regression testing service for Storybook that diffs screenshots in a headless browser on every PR to catch unintended visual changes.

Semantic versioning (semver)

A versioning system structured as $MAJOR.MINOR.PATCH$; design systems use this to communicate breaking changes, new features, and bug fixes.

Federated contribution model

A model where various teams build in their own space and the core design system team certifies and absorbs their contributions into the system.

WCAG AA Contrast Requirements

The accessibility standard requiring a contrast ratio of at least $4.5:1$ for standard text and $3:1$ for large text and UI components.

ARIA authoring practices guide (APG)

The authoritative W3C reference for implementing ARIA patterns correctly, including keyboard interactions and roles for widgets.

CSS custom properties

The runtime implementation of design tokens on the web, accessed via syntax like $var(--color-action)$.