Togetherall, Reverse Design Workflow
Design Engineer & Product Designer (Consultant) · 2025 to now
“Prototype in React first. The code is the source of truth. Figma syncs back from production.”
Togetherall is a digital mental health peer support community used by healthcare systems, universities, and employers. I came in as a consultant Design Engineer and Product Designer in 2025. I run the design system and lead a reverse design workflow. AI scaffolds React prototypes from a brief. Those prototypes become the source of truth for interaction. Figma is updated back from the real production components. Designers stay in Figma. Engineering gets production ready code on day one.
Context
Healthcare platforms move slowly. Regulation, clinical governance, the cost of breaking trust with vulnerable users at the wrong moment. Togetherall is a clinically moderated mental health peer support community used across healthcare systems, universities, and employers. I came in as a consultant in 2025. The brief was not 'redesign the product.' It was 'tighten the design and engineering loop without breaking what already works.' The old loop went Figma, handoff, engineering rebuilds, drift over time. The new approach flips it.
Approach
Reverse design works like this. Prototype in React first. The code is the source of truth. Figma syncs back from production components. With AI tooling I can scaffold a working prototype from a brief in hours, with real interaction, edge cases, real components, and real tokens. Designers and clinicians review the actual screen in a browser, not a static frame. Once approved, the same components ship to engineering. There is no rebuild. Tokens flow from code back to Figma via Tokens Studio. Component snapshots populate the documentation layer. Figma stays useful for variants, exploration, and broader systems work, but it is no longer the bottleneck for what counts as the canonical interaction. As design system manager I treat tokens, components, and Storybook as the contract between design and engineering.
Key decisions
React first instead of Figma first
The standard flow goes design in Figma, hand off, engineering rebuilds. The lossy step is the rebuild. Interaction details, edge cases, and accessibility behaviors all get reinterpreted. AI tooling now scaffolds a working prototype fast enough that React is the first stop. Designers and clinicians review the real thing, not a representation. Engineering ships the same components, not a copy.Figma synced from production, not the other way
Once production has the authoritative components, Figma's job changes. It stops being the source of truth and becomes the exploration surface for variants, spec docs, and broader systems work. Tokens flow from code to Figma via Tokens Studio. Designers keep a fluent design tool. They just no longer carry the burden of being the canonical reference for engineering.Design system as the contract
Most platforms drift between code and design over time. The fix is not more rigorous handoffs. The fix is removing the gap. If a designer wants something new, it ships to the system first. If engineering needs a variant, the system gets it. Tokens, components, and Storybook are shared infrastructure both teams use, not a deliverable one team produces.Inside the product
Three surfaces, one design system
Togetherall serves three distinct audiences from the same component library. The member community, the Wall Guide moderator workflow, and the Pro admin tooling for healthcare partners. Pills, list patterns, navigation, and forms are shared across every role. The design system is the contract that holds them in sync. Screenshots are from staging with anonymous test data. Member content is placeholder Lorem Ipsum.
Result
Working with the team since 2025. Reverse design is the default workflow for new features. Storybook and Figma stay in sync via tokens. Components ship as the contract between design and engineering. The methodology is portable. The same loop runs on Ralfy and Ralfy UI.
Reflection
Reverse design only works if the design system is real infrastructure, not a Figma file. Without a packaged component library, 'the React prototype is the source of truth' becomes 'engineering rebuilds anyway.' The design system investment is the precondition, not a side project.