Localized lesson title

Learning goal

To define component API: required/optional props, events, states.

Who

Designers, Developers, and Project Managers.

What

Understanding the concept of component APIs and their importance in modern design and development.

Where

In the context of designing and developing digital products.

When

When working on a new project or feature.

Why it matters

Component APIs bring reusability, consistency, and maintainability to digital products.

How

1. Define component API: required/optional props, events, states.
2. Set responsibility boundaries: what it does and does not do.
3. Document good/bad examples.

Guided Exercise

1. Pick a UI element (card, input group); write its API.
2. List states (hover, focus, error, loading).
3. Write prohibitions (where not allowed).

Independent Exercise

Document the component API in the Playbook with Figma/Storybook links.

Self-check

1. API written.
2. States mapped.
3. Ban list exists.

Bibliography (sources used)

• Atomic Design
• Component API Documentation

Read more (optional)

For a deeper dive into component APIs, read the following resources:

• Atomic Design
• Component API Documentation