Career Crashouts.

Front-end to design engineer or UX engineer

For people who already ship interface code. The gap is design judgment, a shared token layer, and proof you can finish an interaction. This page does not reteach React.

8–10 hours a week for 12 weeks. If a week slips, cut the reading and keep the project. Use a personal clone of a public flow unless you have written permission to show employer UI.

12 weeks · two portfolio artifacts · hiring is not the deliverable

Senior / staff

Both roles

  • Own the system other teams ship with: what gets in, what gets deprecated, and the written bar.
  • Review other people’s UI against that bar. Accessibility and quality are the review, not a later pass.
  • Decide what lives in Figma and what only exists in code.
  • Mentor the people using the system. Their shipped work is the output.
  • Track adoption: who uses it, who forks it, and why.
Senior / staff

Design engineer

  • Tokens that hold across more than one product, with the same names in Figma and code.
  • A component API that survives a second product: variants, slots, and a reason to reject a prop.
  • A release for the library: changelog, visual checks, and a migration when a token or component changes.
  • The cost of the shared UI: bundle, layout, and motion.
  • A partner in brand and product design for the library, not one screen.
Senior / staff

UX engineer

  • Prototype the risky flow in the production stack before it is staffed as a project.
  • Research-ready prototypes: real states, and a written limit on what the session can change.
  • Interaction architecture for a product area, not a single component.
  • Tooling so designers and engineers can change the system without you in the middle.
  • An ambiguous problem taken to a shipped interface, with the decision written down.

San Francisco and New York

Only sites that state San Francisco or New York City. Bay Area and “NYC area” are not included.

  1. UX Engineer · San Francisco

    Jason Featheringham

    His site says UX engineer, San Francisco. The resume says he leads the Kickstarter Design System: a React and TypeScript library, a Figma-to-code token pipeline, and accessibility through semantic components, focus, and ARIA audits.

    Same move as weeks 4–6: tokens shared with Figma, then components other teams ship.

  2. UX Engineer · San Francisco

    Isabel Shic

    GitHub lists San Francisco, CA. The resume on her portfolio lists UX Engineer at NASA Goddard, July 2023 to June 2024. The site presents her as a design engineer and includes FLUID, a public tool for NASA satellite data.

    Same move as week 11: the portfolio shows the work, and the resume names the role.

  3. Frontend UX Engineer · New York City

    Julie Wongbandue

    Her site says she is based in New York City. The Bokeh write-up is a Vimeo design system: accessible by default, light and dark themes, Chakra UI, Storybook on each branch, and recipes for composed patterns instead of stuffing every variation into the core library.

    Same move as weeks 8–10: document when a pattern is a component, and when it is a recipe.

  1. Week 1 · Foundations

    Name what the screen is doing

    Study
    Refactoring UI Hierarchy, spacing, type, and color. The book is paid. Use the free samples if you are not buying it yet.
    Project
    Pick one screen you shipped. Write eight notes: first focal point, alignment, spacing jumps, type sizes, and contrast. Do not redesign it.
  2. Week 2 · Foundations

    Redesign that screen on purpose

    Study
    Practical Typography Free. Use it for measure, line height, and which sizes earn a place on the scale.
    Project
    Redesign the same screen in Figma. One type scale. One 4px or 8px spacing scale. One sentence per change.
  3. Week 3 · Foundations

    Turn the redesign into components

    Study
    Figma variants Variants are how a library stays in sync with code states.
    Project
    Build a button, a text field, and one composite (card or dialog). Variants: default, hover, focus, disabled, error.
  4. Week 4 · Foundations

    Name the tokens once

    Study
    Figma variables Variables are the design-side token layer.
    Project
    Color, space, type, and radius as variables. Mirror those names as CSS custom properties on a blank page. Add no extra tokens.
  5. Week 5 · System

    Rebuild the screen from the tokens

    Study
    Learn CSS Use the layout and color sections only where the rebuild drifts.
    Project
    Implement the redesign in React from the tokens. List every place the code does not match the Figma.
  6. Week 6 · System

    Make a keyboard path

    Study
    WCAG 2.2 quick reference Pair it with Inclusive Components for buttons, forms, and dialogs.
    Project
    Keyboard-only pass: focus order, visible focus, labels, errors tied to fields. Run Lighthouse accessibility or axe. Fix the failures.
  7. Week 7 · System

    Prototype the awkward flow

    Study
    Animation for attention and understanding Motion has to explain a change. Decoration does not count.
    Project
    One three-step flow in code: loading, empty, error, success. Honor prefers-reduced-motion.
  8. Week 8 · System

    Write the component API

    Study
    Storybook docs Storybook is the usual adoption surface. A documented folder is enough if you skip the tool.
    Project
    Document four components. Props are size, tone, and slots. Each one says when not to use it.
  9. Week 9 · Proof

    Split toward the role

    Study
    Inclusive Components Read the pattern you are about to ship, then build that pattern.
    Project
    Same week, two exits. Do the one that matches the job you will apply for.
    Design engineer
    Visual QA at two breakpoints. Motion only where state changes. Match type and spacing to the Figma.
    UX engineer
    Prototype a harder interaction in code, such as a combobox or a multi-step form with undo. Run the task five times. Write the failure and the change. Call it a self-test.
  10. Week 10 · Proof

    Patch a real gap

    Study
    USWDS button Also read the Radix dialog docs for focus and keyboard behavior.
    Project
    Compare one public component with yours. Patch the biggest gap: label, keyboard, or focus.
  11. Week 11 · Proof

    Write the case study

    Study
    WCAG 2.2 quick reference The case study needs the checks you ran, not a second course.
    Project
    One write-up: problem, constraints, options you rejected, the decision, the implementation, the checks, and what you would measure if it shipped. Link the repo and the Figma. Two artifacts: the system slice and the flow.
  12. Week 12 · Proof

    Timed rep, then apply

    Study
    Radix dialog Use it as the bar for the timed rep: focus, dismiss, and labels.
    Project
    90 minutes. Then send the week-11 case study with the application.
    Design engineer
    Take a rough frame to a responsive component with tokens and states.
    UX engineer
    Prototype a flow, then list the accessibility and usability gaps you left in.