Design Tokens 101

What is a Design System?

• A coding framework for developers

• A set of design styles only

• A set of guidelines and patterns to ensure consistent visual language

• A color palette for branding

What is the correct order in the Atomic Design structure?

• Pages → Templates → Organisms → Molecules → Atoms

• Atoms → Molecules → Pages → Organisms → Templates

• Atoms → Molecules → Organisms → Templates → Pages

• Templates → Atoms → Molecules → Organisms → Pages

What is the primary benefit of using Design Tokens?

• Making UI look more colorful

• Adding more icons

• Managing typography

• Creating a unified, consistent experience across platforms

Which of the following is NOT a benefit of using a Design System?

• Increases manual handoffs

• Improves consistency

• Boosts collaboration

• Speeds up development

In Figma, variables are used to:

• Animate designs

• Store reusable values and support design tokens

• Export assets

• Create new file templates

What is the key difference between a variable and a design token?

• Variables are static, tokens are dynamic

• A variable is a representation; a design token expresses design decisions

• Tokens only store text

• Tokens are only used by engineers

What’s a good practice when naming design tokens?

• Use color names like “blue” or “red”

• Abbreviate to make them shorter

• Use specific values in the name

• Make them contextual, meaningful, and scalable

What type of token is "buttonPrimaryDefaultBgColor" ?

• Option Token

• Alias Token

• Component Token

• Layout Token

Which of the following is a challenge of not using design tokens?

• Cross-platform uniformity

• Manual platform adjustments

• Automated workflows

• Single source of truth

What is an example of a scalable token naming format?

• redButtonBg

• blueColorMainForHeader

• buttonPrimaryBgColor

• smTxtSz