REALTOR.ca Design System MVP

The problem: Repeated friction between UX and development made design decisions difficult to hand off, keep consistent, and reuse across products.

The framework: I developed a three-pillar model — People, Process, and Tools — from those frustrations and used it to shape the MVP.

The proof point: A REALTOR.ca Listing Card travelled from a shared Figma decision through design tokens, a versioned component library, and into a working React app.

The outcome: The MVP demonstrated a repeatable design-to-code path that could be expanded with clearer ownership, more components, and a dedicated UI engineering role.

REALTOR.ca is a high-traffic real estate platform serving people searching for homes across Canada.

The UX team was working through three connected problems:

Designer–developer handoff
Maintaining consistency between Figma and production code
Establishing an end-to-end system that could be extended beyond one project

I collaborated with the UX team as both a designer and engineer. Rather than trying to build a complete library, I focused the MVP around one high-value proof point: the REALTOR.ca Listing Card and the workflow required to make it reusable.

Convert a REALTOR.ca Figma component into a reusable React implementation
Define a repeatable designer–developer handoff process
Test a shared component library with versioning and dependency visibility
Create a foundation that could scale beyond the first component

Partial design system in Figma created friction at handoff
Lack of consistent enforcement of design tokens across products
No clear process for distributing or consuming components in production

Key questions we asked:

How might we improve the designer–developer handoff?
How might we enforce design consistency across products?

The three pillars were not an off-the-shelf methodology. I developed them after seeing the same frustrations repeat across UX and development: unclear ownership, design intent getting lost in translation, and tools being selected before the workflow was understood.

People, Process, and Tools: the framework I developed from recurring UX–development handoff friction and used to guide the REALTOR.ca Design System MVP.

1. People — create shared ownership

The first pillar made the handoff a shared responsibility rather than a final step owned by design alone. I worked with UX designers, developers, and stakeholders to create buy-in and identify where a dedicated UI engineer could bridge design intent and implementation.

2. Process — carry design intent forward

The process turned a visual decision into something that could be implemented, reviewed, distributed, and consumed again. It gave the team a common sequence to discuss instead of treating handoff as a one-time export.

The repeatable path from a Figma library through design tokens and versioned Bit components to a Listing Card consumed in a React demo.

3. Tools — make the process repeatable

Figma and Figgo provided the shared design source and a path for syncing colour, type, and spacing decisions.
Design tokens translated those decisions into reusable values that could travel with the component.
Storybook helped validate the first component states and compositions.
Bit.dev became the stronger fit for distributing, versioning, and inspecting component dependencies.
React provided the proof environment where the component could be consumed outside the original working file.

Figma and Figgo working side by side: authored design tokens were synced into reusable SCSS values for implementation.

4. Implementation — prove the model with one component

I chose the Listing Card because it was visible, made up of multiple subcomponents, and specific enough to test the whole path without pretending the MVP was a complete design system.

REALTOR.ca Listing Card artifact used as the MVP proof point, showing the component structure and content that needed to survive the handoff.

I first explored the component in Storybook, then moved toward Bit when distribution, version history, and dependency visibility became the more important questions.

Bit component workspace showing the Listing Card alongside reusable buttons and tokens, with documentation, compositions, history, and dependencies.

Finally, I consumed the component in a new React application. This was the practical check that the work could leave the design-system workspace and still function as a reusable building block.

React proof application consuming components from the design-system MVP, including the Listing Card and a Bit-provided button.

The MVP was less about shipping a complete component library and more about proving that the team could create a shared path from design intent to usable code. The People–Process–Tools framework gave that path structure and made the next investment easier to see.

Next steps:

Secure a dedicated UX/UI engineer for ongoing system development
Expand the library beyond the Listing Card using the same process
Continue maintaining the Figma design system and token source
Formalize contribution, review, versioning, and production-adoption practices
Prepare the MVP for integration into production systems rather than presenting the demo as a completed rollout