GFX-301h · Module 2

Component Decomposition

3 min read

A mockup is a single image. A prototype is a tree of components. Component decomposition breaks the mockup into its constituent parts — each of which becomes a React component (or equivalent) in the prototype.

The decomposition rules: identify every distinct visual element (cards, buttons, charts, navigation items, text blocks, icons). Group elements that always appear together into component boundaries. Identify which elements are static (render once) and which are dynamic (change based on state or data). Map each component to either an existing design system component or a new component that needs to be built.

For a CRM dashboard mockup: the top navigation bar is one component (static structure, dynamic active tab state). Each metric card is one component (reusable, data-driven). The timeline chart is one component (dynamic data, fixed layout). The agent status sidebar is one component (list of sub-components, dynamic status updates). The decomposition produces a component tree that the developer can implement top-down, starting with the layout shell and filling in each component.

Do This

  • Decompose into the smallest reusable unit — a card with a title, value, and trend indicator is three sub-components
  • Map each component to the design system — reuse existing components before building new ones
  • Identify dynamic vs. static components early — dynamic components need state management design

Avoid This

  • Build the entire mockup as a single component — it cannot be reused, tested, or maintained
  • Create new components for elements that already exist in the design system — duplication creates drift
  • Defer state management — a prototype without interactive state is a screenshot with extra steps