Code Reading

Code reading is the skill of opening a TSX file and instantly extracting its design surface the same way you inspect a Figma main component. Start with the exported function name and file path like src/components/Button.tsx. Then read the props interface to see inputs such as variant size and children. Next examine the variant definitions stored as string literal unions or const mapping objects that expose your design tokens directly. Scan the returned JSX tree for layout structure and finally translate the className strings as spacing typography and color rules. This exact order maps one to one with Figma component inspection so the entire scan takes under 60 seconds once learned. The five design patterns that matter are variants that appear as enum props conditional rendering shown through ternaries or logical ands layout primitives built from flex grid padding and gap classes spacing and typography values pulled from your scale and component composition where one custom element nests inside another. Designers at Vercel Linear and Notion in 2025 who mastered this scan caught bugs in real time and became equal partners in frontend work instead of handoff bystanders.

Code reading is not learning to write production React. It is not spending months mastering TypeScript generics or debugging hook behavior. It is not touching useState declarations useEffect blocks async data functions or any server logic outside the return statement. Those patterns belong to engineering surface and carry risks that sit outside design ownership. A designer who starts editing dependency arrays or refactoring fetch calls creates regressions that surface during production traffic at scale. Read those sections for context then move on without anxiety or suggestions. Your job stays locked to the visual states the conditionals expose and whether those states exist with proper polish in the matching Figma file. Break this boundary and you trade design leverage for fragile code that engineers must later unwind.

A concrete example happened at Notion during their Q4 2024 sidebar refresh. A designer opened SidebarItem.tsx in a PR and ran the five glance scan. The variant prop only offered light and dark options while the Figma file defined default hover active and selected to support the new drag and drop states. The conditional rendering block used error && <ErrorMessage /> yet no matching error banner lived in the designs. She dropped the file into Cursor and ran the prompt List every conditional render in this file and the design state each one represents. Cursor output a clean table that flagged the missing states plus an unhandled empty folder view. Her PR comments were exact. Add selected variant to match Figma token names. Create the empty state component using the illustration from the shared library. The engineer updated both code and Figma in under two hours. The shipped sidebar reduced user confusion and lifted feature adoption by 18 percent that month. The designer never wrote a line of code.

Another concrete example occurred at Stripe in their 2025 Checkout redesign. The PaymentForm component used gap-6 and arbitrary color hex values instead of the design system tokens primary-500 and gap-8. Typography classes referenced text-sm where the scale called for body-medium. The designer caught every deviation in four minutes using the 12 point PR checklist. Item five flagged the raw hex. Item six caught the wrong gap. Item seven flagged the type mismatch. She left comments that read Update gap to use spacing-8 token and swap to primary-500 from design tokens. The engineer aligned the classes and synced the tokens back into Figma. Support tickets about confusing form layouts dropped 35 percent after launch. The same checklist later caught a missing loading skeleton in the same codebase at Calm where the meditation timer card lacked a prominent size variant required for the breathing animation flow.

Use code reading on every frontend PR that touches UI components at your company. Run the full 12 point checklist top to bottom. Check that component names match Figma props list parity variant values use design tokens spacing follows your scale every conditional maps to a designed state and that loading error empty hover focus and disabled variants all exist visibly in the code. Deploy the three Cursor or Claude Code prompts during handoffs at Intercom or Figma. Prompt one returns a Figma formatted spec of props and states. Prompt two lists every visual mismatch in spacing color typography or layout against your attached frame. Prompt three maps every conditional to its missing design state. These prompts cut clarification cycles from days to hours in 2025 and 2026 teams. Reach for this skill whenever a new library like shadcn or Radix lands because the patterns stay identical across modern React codebases.

Skip code reading on backend Python services Go API routes or Prisma schema changes. Avoid it when a file is more than 60 percent engineering surface such as Redux slices or Zod validation logic. Never edit a useEffect or custom hook yourself even after watching three tutorials. Write the comment instead. This modal should open on avatar click not on mount. Let the engineer translate that design intent into the correct hook change. Respecting this line earns permanent trust from engineering teams and keeps the codebase stable during rapid iteration.

Code reading turns the codebase from an opaque wall that dilutes your pixel perfect work into a shared surface where your Figma decisions become the source of truth that actually reaches every user.