DSN 325 · UI Design & Design Systems · Week 3 of 7

Make It Reusable

Components, states, and tokens — your style tile becomes working parts.

Last week you made rules. This week you make parts that obey them. Build a button once, use it everywhere, and when it changes, it changes everywhere. This is the idea design systems are built on, and it's the spec that will make your AI builds good in Week 5.

This week at a glance

Wed 11:59 pmDiscussion: State the States — initial post
Fri 11:59 pmStudio: Component Kit — core components, full states, named tokens
Fri 11:59 pmField Work: Flow Field Study — post your findings
Sun 11:59 pmReplies: discussion (2 classmates) and Field Work (1 classmate)

1The vocabulary

Component

A reusable piece of interface built once and placed many times. Change the original, and every copy updates. The opposite is drawing the same button forty times and fixing it forty times.

Do — one source, every copy matches
Don't — four hand copies, four drifts
States

Every interactive part has more than one look: resting, hovered, focused (keyboard), pressed, disabled, and sometimes error. A button with one state is a picture of a button. One more thing: on touch screens hover doesn't exist — pressed and focus do the work. If your sector is mobile-first, those two are your load-bearing states.

Do — rest, hover, pressed, focus, disabled
Don't — happy state only, the rest undefined
Variant

Planned versions of the same component: primary and secondary button, small and large input. Variants are deliberate choices you offer. Drift is accidental versions you didn't.

Do — primary / secondary / small: same family
Don't — three strangers, no family
Token

A named decision. Instead of typing the color code #0F5C5A in forty places, you name it once — "color/action" — and forty places point at the name. Change the name's value, everything follows.

Do — "color/action" feeds everything
Don't — three pasted codes, already drifting

2What your kit needs

The Week 3 component kit

Built in Figma from your Week 2 tile. Your product decides the exact list, but every kit includes at least:

Everything uses auto layout, so components stretch and shrink without breaking. And every color or size in every component points at a token — zero pasted-in values.

The trap this week: designing only the happy state. The error state of your input and the disabled state of your button are where beginners get exposed — in class and in interviews. If you design one state well and skip four, you built a picture, not a component.

3How to do this week's work

  1. Set up tokens first. Turn your tile's colors, sizes, and spacing into named Figma variables before building anything. Ten minutes now saves an hour later.
  2. Build the button. Master component, auto layout, variants for primary/secondary, then all five states. Check every color against your tokens.
  3. Build the input. Same discipline. The error state includes the message text, not just a red border.
  4. Build your content component. Pick the one your product needs most.
  5. Stress-test. Swap in your product's longest real text. If the component breaks, fix the auto layout, not the text.
  6. Submit, then do Field Work. The flow study (walk the same task in two real apps, screenshot every step) preps Week 4, when you map your own product's flows.
AI this week: allowed for naming help and documentation only — ask it to suggest token names or describe a component's rules, and disclose it. Not allowed for generating the components. You're building the spec that makes AI useful later; it can't build its own leash.

4Resources

Everything here is free. Start with the starred items.

5Before you submit