Design Systems Practice Exam — LearnCoachAssist

Question 1 Design Systems

What is "Figma library"?

System components serve many products; product components serve one — usually built on top of system primitives. The smallest UI building block — a button, input, icon, or single token — not useful alone but combined into molecules. A shared Figma file containing the system's components, accessible by team members across files. A clear visual indication of which element has keyboard focus — required for keyboard accessibility.

Question 2 Design Systems

What is "color contrast ratio"?

Figma's native token primitive — values used across designs that can be theme-swapped. The luminance ratio between text and background — WCAG AA requires 4.5:1 for normal text, 3:1 for large text. The sequence keyboard focus moves through interactive elements — should match visual order and be logical. An earlier headless library by Ryan Florence focused on accessibility.

Question 3 Design Systems

What is "the search-first docs principle"?

Docs should be findable via the consumer's actual words, including misspellings and synonyms. Clear contribution rules make it easier for teams to improve the system without creating chaos. The published policy for how long deprecated components remain available before removal — e.g., 1 major version with warning. Atlassian's system supporting Jira, Confluence, and Trello with shared tokens and components.

Question 4 Design Systems

What is "interaction test"?

Components that adapt internally to their container width — usually via container queries, not just viewport. System debt is the inconsistency and duplication that accumulate when teams bypass or fragment the shared patterns. A test simulating user behavior (click, type, focus) — verifies component behavior, not just appearance. Any change requiring consumer code changes — prop rename, prop removal, default change, behavioral shift.

Question 5 Design Systems

What is versioning in a design system?

A geometric or linear progression (4, 8, 12, 16, 24, 32, 48, 64) used everywhere to enforce visual rhythm. Components that exist for design exploration but not yet in code — should be labeled "experimental" to prevent premature use. Versioning tracks changes so teams can adopt updates intentionally and manage breaking changes safely. A component that follows semver — breaking changes require a major release.

Question 6 Design Systems

What is "RFC" in a design system?

A component scheduled for removal — actively guides consumers to a replacement. Components shipping only behavior (state, ARIA, keyboard) with consumer-supplied markup — used by Radix UI, Headless UI. The documented path for product teams to propose, build, and merge changes into the system. Request for Comments — a public proposal for a significant change inviting discussion before implementation.

Question 7 Design Systems

Why should a design system evolve?

Products, platforms, and user needs change over time, so the system must adapt without losing coherence. A geometric or linear progression (4, 8, 12, 16, 24, 32, 48, 64) used everywhere to enforce visual rhythm. A single team owns and ships the system — fastest decisions, lowest scale. Components that exist for design exploration but not yet in code — should be labeled "experimental" to prevent premature use.

Question 8 Design Systems

Why should design systems include content guidance?

Named stacking levels (modal, dropdown, toast) so layering stays consistent without arbitrary integers scattered through code. Words shape usability too, so components often need guidance for labels, helper text, and error states. Combining multiple Storybook projects into one site — letting consumers see system + product extensions together. An enterprise design system platform that integrates design and code workflows.

Question 9 Design Systems

What is the "8-point grid"?

A spacing system where all values are multiples of 8 — easy mental math and aligns with most platforms' default densities. Components shipping only behavior (state, ARIA, keyboard) with consumer-supplied markup — used by Radix UI, Headless UI. Make the right choice the easiest choice for product teams. Products, platforms, and user needs change over time, so the system must adapt without losing coherence.

Question 10 Design Systems

What is a "density mode"?

Adoption often fails when the system is hard to use, poorly documented, or disconnected from product reality. It is the practice of defining props, states, and variants so components are flexible without becoming confusing. A configurable instance with named property values (size: sm/md/lg, variant: primary/secondary). Compact/comfortable/spacious variants of components for different data densities — set via a token swap.

Question 11 Design Systems

What is a good design system principle?

A token pointing to another token — used to share values while preserving semantic naming for swap-ability. Treating the design system like an open-source project inside the company — open issues, public RFCs, transparent decisions. Make the right choice the easiest choice for product teams. Many booleans encode component variants poorly — use a string enum (variant="primary"|"secondary") instead.

Question 12 Design Systems

What is "theming"?

Swapping token values to produce alternative looks (dark mode, brand variations) without changing component code. Request for Comments — a public proposal for a significant change inviting discussion before implementation. Component documentation explains when to use a component, how it behaves, and what variants or constraints apply. A swappable set of variable values per file, page, or frame — implements theming inside Figma.

Question 13 Design Systems

What is "aria-label"?

An attribute providing an accessible name when visible text isn't available or doesn't describe the element's purpose. The canonical token data structure consumed by Style Dictionary or similar — single source for all platforms. Designing components in Figma first and implementing in code — favored when design exploration dominates. A (must), AA (should), AAA (advanced) — most public systems target AA.

Question 14 Design Systems

What is a pattern in a design system?

Anti-patterns help people see what not to do and why certain shortcuts create UX or maintenance problems. Adoption often fails when the system is hard to use, poorly documented, or disconnected from product reality. A pattern is a higher-level solution made of multiple components working together for a common use case. Clear naming improves discoverability, reduces misuse, and helps teams talk about UI consistently.

Question 15 Design Systems

What is "the parity gap"?

A periodic deep review (often quarterly) confirming the system continues to meet accessibility standards. Reusable components reduce duplication and make it easier to maintain consistency at scale. Don't use ARIA if a native HTML element can do the job — native semantics are more reliable. The difference between what Figma and code can produce — closing it reduces design-engineering friction.

Question 16 Design Systems

What is "Collection" in Figma Variables?

A grouping of variables (e.g., colors, spacing) with shared modes. Atlassian's system supporting Jira, Confluence, and Trello with shared tokens and components. Words shape usability too, so components often need guidance for labels, helper text, and error states. Versioning tracks changes so teams can adopt updates intentionally and manage breaking changes safely.

Question 17 Design Systems

What is "Material Design"?

Google's design system — widely adopted, defines components, motion, and elevation across platforms. Components that exist for design exploration but not yet in code — should be labeled "experimental" to prevent premature use. Allowing product teams to maintain their own extensions on top of the core system — extensions can later promote upstream. Rules for how components are named (singular/plural, prefix, casing) — should be documented and enforced.

Question 18 Design Systems

What is the W3C Design Tokens spec?

A community-driven specification for a portable JSON format describing tokens — allows interchange between tools. Words shape usability too, so components often need guidance for labels, helper text, and error states. A design-system platform that hosts components, docs, tokens, and previews in one place. An attribute marking a region as dynamic so screen readers announce updates (polite, assertive).

Question 19 Design Systems

What is "visual regression test"?

Named stacking levels (modal, dropdown, toast) so layering stays consistent without arbitrary integers scattered through code. Microsoft's design system, used across Office, Windows, and web products. A test comparing rendered screenshots against a known-good baseline to catch unintended UI changes. Component documentation explains when to use a component, how it behaves, and what variants or constraints apply.

Question 20 Design Systems

What is a "design token JSON"?

The published policy for how long deprecated components remain available before removal — e.g., 1 major version with warning. Named stacking levels (modal, dropdown, toast) so layering stays consistent without arbitrary integers scattered through code. The canonical token data structure consumed by Style Dictionary or similar — single source for all platforms. The luminance ratio between text and background — WCAG AA requires 4.5:1 for normal text, 3:1 for large text.

Question 21 Design Systems

What is "Radix UI"?

System debt is the inconsistency and duplication that accumulate when teams bypass or fragment the shared patterns. WCAG AA requires 3:1 contrast for UI components (icons, focus indicators, form borders). A popular headless component library providing accessible, unstyled primitives for React. A coded component library — basic reusable components without strong docs or governance.

Question 22 Design Systems

What is a "z-index token"?

Named stacking levels (modal, dropdown, toast) so layering stays consistent without arbitrary integers scattered through code. The smallest UI building block — a button, input, icon, or single token — not useful alone but combined into molecules. A component that follows semver — breaking changes require a major release. The canonical token data structure consumed by Style Dictionary or similar — single source for all platforms.

Question 23 Design Systems

What is "platform parity" in a design system?

Clear naming improves discoverability, reduces misuse, and helps teams talk about UI consistently. Shorthand for "accessibility" — the 11 characters between "a" and "y". Same component behavior and look across web, iOS, Android — requires per-platform implementation aligned to one design source. How many people would need to leave before the system collapses — should be > 1.

Question 24 Design Systems

What is "Tailwind CSS"?

A utility-first CSS framework — composes design via class names; pairs well with headless components. A design system is a shared set of principles, components, patterns, and rules that help teams build consistent products faster. Microsoft's design system, used across Office, Windows, and web products. Components that exist for design exploration but not yet in code — should be labeled "experimental" to prevent premature use.

Question 25 Design Systems

What is "focus trap" in modals?

A modular progression of font sizes (e.g., based on 1.25 or 1.333 ratio) for visual hierarchy. Keyboard focus loops within an open modal until it closes — prevents users from tabbing into hidden background content. An attribute pointing to another element whose text serves as the accessible name — preferred over aria-label when visible text exists. A grid using percentages and flexible columns that resize smoothly — foundational to modern responsive design.

Question 26 Design Systems

What is the "centralized" governance model?

A single team owns and ships the system — fastest decisions, lowest scale. The canonical token data structure consumed by Style Dictionary or similar — single source for all platforms. A prop allowing the rendered HTML element to change (button as anchor) — supports semantic flexibility. A design system supporting multiple brands by swapping token sets at runtime or build time.

Question 27 Design Systems

What is "Chromatic"?

A popular headless component library providing accessible, unstyled primitives for React. A visual regression testing service for Storybook — captures pixel diffs to catch unintended UI changes. An Amazon-built tool that transforms a single token source into platform-specific outputs (CSS, iOS, Android, etc.). A token pointing to another token — used to share values while preserving semantic naming for swap-ability.

Question 28 Design Systems

What is "focus visible"?

Components shipping only behavior (state, ARIA, keyboard) with consumer-supplied markup — used by Radix UI, Headless UI. A raw value (e.g., #0066CC, 8px) with no semantic meaning — building block for higher-level tokens. A clear visual indication of which element has keyboard focus — required for keyboard accessibility. Components accepting named children slots so consumers can compose flexibly without exposing every prop.

Question 29 Design Systems

What is "code review" for system contributions?

Engineering review focused on API design, accessibility, performance, and consistency. Tailwind Labs' headless component library with accessible primitives. A CSS feature letting a component respond to its parent's size, not the viewport — enables real component-level responsiveness. A real-time channel for system support — usage patterns themselves reveal what to improve.

Question 30 Design Systems

What is a source of truth in a design system?

Engineering review focused on API design, accessibility, performance, and consistency. Visual consistency means products feel related because spacing, typography, color, and interaction patterns align. Locally scoped CSS classes per component — middle ground between global CSS and CSS-in-JS. The source of truth is the authoritative place where the current component definitions and guidance live.

Question 31 Design Systems

What is a "molecule" in atomic design?

A grid using percentages and flexible columns that resize smoothly — foundational to modern responsive design. IBM's open-source design system focused on enterprise productivity software. Useful metrics include adoption rate, component reuse, defect reduction, and speed of delivery. A small group of atoms working together as a single unit — e.g., a labeled input with a helper text and error.

Question 32 Design Systems

What is "scoping" Figma Variables?

A utility-first CSS framework — composes design via class names; pairs well with headless components. Restricting which properties a variable can bind to — prevents misuse. Tailwind Labs' headless component library with accessible primitives. No shared system — every team builds their own UI from scratch.

Question 33 Design Systems

Why should variants be limited intentionally?

A community-driven specification for a portable JSON format describing tokens — allows interchange between tools. Figma's native token primitive — values used across designs that can be theme-swapped. An attribute providing an accessible name when visible text isn't available or doesn't describe the element's purpose. Too many variants make the system harder to learn, maintain, and use consistently.

Question 34 Design Systems

What is "the design system office hours"?

Multi-platform / multi-brand / multi-product system with sophisticated tooling and a sustainable team. A standing time when system maintainers are available for product team questions — high-leverage support channel. Locally scoped CSS classes per component — middle ground between global CSS and CSS-in-JS. A component with too many props (often > 10) is usually trying to be many components — refactor with composition.

Question 35 Design Systems

What is "constraints" in Figma?

A token pointing to another token — used to share values while preserving semantic naming for swap-ability. A scripted interaction (clicks, typing) inside a story — enables visual testing of behavior. Automated checks against design conventions (color usage, spacing, naming) — catches drift early. Rules for how a layer behaves when its parent resizes — left/right/top/bottom/stretch.

Question 36 Design Systems

What is a "component status"?

A consistent named size scale (xs, sm, md, lg, xl) across components — reduces cognitive load. Clear naming improves discoverability, reduces misuse, and helps teams talk about UI consistently. Lifecycle stage (experimental, beta, stable, deprecated) — sets consumer expectation. Many booleans encode component variants poorly — use a string enum (variant="primary"|"secondary") instead.

Question 37 Design Systems

What is a "design system OKR"?

Outcome-based goals (adoption rate, accessibility coverage, contribution volume) — moves the team beyond shipping components. The canonical token data structure consumed by Style Dictionary or similar — single source for all platforms. Allowing product teams to maintain their own extensions on top of the core system — extensions can later promote upstream. A zero-runtime CSS-in-TypeScript library — type-safe styling compiled at build time.

Question 38 Design Systems

What is the "Spectrum" design system?

Adobe's open-source design system, multi-platform, with detailed accessibility guidance. Tailwind Labs' headless component library with accessible primitives. Clear contribution rules make it easier for teams to improve the system without creating chaos. A component is high quality when it is accessible, documented, reusable, testable, and aligned with real product needs.

Question 39 Design Systems

What is "motion reduction"?

Respecting prefers-reduced-motion to disable or simplify animations for users who need it. An attribute providing an accessible name when visible text isn't available or doesn't describe the element's purpose. Shorthand for "accessibility" — the 11 characters between "a" and "y". Rules for how a layer behaves when its parent resizes — left/right/top/bottom/stretch.

Question 40 Design Systems

What is "Lightning"?

Too many variants make the system harder to learn, maintain, and use consistently. Interaction consistency means controls behave in predictable ways across the product. Rules for how a layer behaves when its parent resizes — left/right/top/bottom/stretch. Salesforce's design system for their platform and apps.

Question 41 Design Systems

What is "Storybook play function"?

A design system documentation platform integrating Figma and code references with editorial content. A real-time channel for system support — usage patterns themselves reveal what to improve. A scripted interaction (clicks, typing) inside a story — enables visual testing of behavior. Respecting prefers-reduced-motion to disable or simplify animations for users who need it.

Question 42 Design Systems

What is "Vanilla Extract"?

Salesforce's design system for their platform and apps. A component implemented but used in limited contexts; API is unlikely but may change. Engineering review focused on API design, accessibility, performance, and consistency. A zero-runtime CSS-in-TypeScript library — type-safe styling compiled at build time.

Question 43 Design Systems

Why are examples important in design system docs?

Whether design tools or code holds the canonical tokens — increasingly answered by a JSON file Git-managed and consumed by both. Examples show teams how to apply abstract guidance correctly in real interfaces. Adoption often fails when the system is hard to use, poorly documented, or disconnected from product reality. Google's design system — widely adopted, defines components, motion, and elevation across platforms.

Question 44 Design Systems

What is a "breaking change" in a design system?

Clear contribution rules make it easier for teams to improve the system without creating chaos. Any change requiring consumer code changes — prop rename, prop removal, default change, behavioral shift. Design tokens are named values for color, spacing, typography, and other primitives that can be reused across tools and code. Useful metrics include adoption rate, component reuse, defect reduction, and speed of delivery.

Question 45 Design Systems

What is "design-to-code parity"?

A (must), AA (should), AAA (advanced) — most public systems target AA. A design system documentation platform integrating Figma and code references with editorial content. Ensuring component variants, states, and tokens match exactly between Figma library and code library. A coded component library — basic reusable components without strong docs or governance.

Question 46 Design Systems

What is "tab order"?

Using color alone to convey state (e.g., red dot for error) — must add an icon, text, or pattern for color-blind users. Deprecation is the process of marking older patterns or components as outdated and guiding teams toward replacements. The sequence keyboard focus moves through interactive elements — should match visual order and be logical. Components shipping only behavior (state, ARIA, keyboard) with consumer-supplied markup — used by Radix UI, Headless UI.

Question 47 Design Systems

What is "redirect-from-aliases"?

System debt is the inconsistency and duplication that accumulate when teams bypass or fragment the shared patterns. Too many variants make the system harder to learn, maintain, and use consistently. Mapping common alternative names (e.g., "modal" → "Dialog") to canonical doc pages — improves discoverability. A workshop tool for building UI components in isolation and documenting their variants, states, and controls.

Question 48 Design Systems

What is "the federation pattern"?

Design tokens are named values for color, spacing, typography, and other primitives that can be reused across tools and code. A component with too many props (often > 10) is usually trying to be many components — refactor with composition. Allowing product teams to maintain their own extensions on top of the core system — extensions can later promote upstream. Components that work together via shared context (e.g., Tabs.List, Tabs.Tab) — flexible, intuitive API.

Question 49 Design Systems

What is "auto layout" in Figma?

Documentation on when to use which icon, paired labels, and minimum size — prevents misuse and inconsistency. A hidden link that appears on focus, letting keyboard users skip past header navigation — required for accessibility. Interaction consistency means controls behave in predictable ways across the product. A constraint system that mimics flexbox; components built with auto layout adapt to content.

Question 50 Design Systems

What is "shadcn/ui"?

A community-driven specification for a portable JSON format describing tokens — allows interchange between tools. Locally scoped CSS classes per component — middle ground between global CSS and CSS-in-JS. A pattern of copy-paste component recipes built on Radix and Tailwind — explicitly not a library, designed for customization. An attribute pointing to another element whose text serves as the accessible name — preferred over aria-label when visible text exists.