Skip to the main content


Collaborating with Funda to create a design system based on tokens and VueJS components integrated in Storybook, and components.

The Client

Funda is a real estate company with their headquarters based in Amsterdam, with three different websites aiming at different services offer: 

“Funda” a standard B2C real estate website that allows people to find a home to rent, buy or sell.

“Funda in Business”, a website, which is more focused on B2B with the goal of finding spaces for all size businesses. 

A B2B focused platform, that allows professional realtors to manage properties on “Funda” and “Funda in Business”. 

Our Services

  • Project management 

  • UX/UI management 

  • Web development 

The Context

Funda was looking to achieve several objectives within the project:  

1. Consolidate all components from different products into a single design system with a uniformized style for 3 brands 

2. Analyse different architecture solutions and implement a component library that will optimize the development process of the Funda design and development teams 

3. Create components within the library based on VueJS technology 


The Challenges

Several challenges were in front of Mirahi team:  Combine 3 products with similar but a bit different style into one big system without impacting the products in production.  Storybook contained components that weren’t in Figma and the other way around. Develop components as generic as possible  On-board Funda’s team on using the design system with both the tokens and the VueJS library of components 

yellow house piecesyellow house pieces

Our design system was a quite a mess, split between marketing and UX/UI teams. Mirahi challenged us on its structure and got their hands dirty in helping us to implement it with the usage of tokens in Figma

Picture of Mark JenkinsPicture of Mark Jenkins

Mark Jenkins, Funda

Head of Design

Mark Jenkins, Funda

Head of Design


The Solution

We started by giving a crash course into atomic design and tokens. An important aspect of this course was learning how to use atomic design to create a functional design system. Funda's UX/UI team appreciated the kick-off because it allowed them to clarify the project's objectives and align on the concepts that will be used. 

We could begin transferring files within their Figma design system that were not correctly ordered, following the atomic design rules, once we were all on the same page about how an optimized design system works. 

After ensuring that all the files were in the correct category, we could begin changing them and adding missing components. The Storybook updates began after all the components were ordered and added. We took our time relocating and adding everything in Figma because we wanted to make sure it was all perfect, because these minor components are the foundation of a well-functioning design system. 

After that it was time to look at what could be turned into tokens.  

On the development side, we:  

  • Migrated the company design system from Vue.js 2 to Vue.js 3 with Typescript 

  • Designed the architecture of the component library with support of Nuxt3 module 

  • Drastically improved development performance by using Vite to build the component library and storybook  

  • Transformed the tokens from Figma to Tailwind CSS Colors  

  • Tested and documented all the tokens, icons and components through Storybook  

Technologies used: Vue.js 3, Vite, Storybook, TypeScript, Tailwind, Headless UI, Jest, Testing Library, Amazon Style Dictionary, Nuxt3 

Mirahi kickstarted the migration of components to Storybook with Vue.js 3 and Typescript creating a solid basis for the team to keep on building upon. I really appreciated all the tech tips during the project and being challenged on our architecture while delivering the project on time

Picture of João CarmonaPicture of João Carmona

Joao Carmona, Funda

Front-end Tech Lead

Joao Carmona, Funda

Front-end Tech Lead


The Results

In a four-month period, we successfully assisted the Funda team in better understanding the use of a consolidated design system and how to handle one. We also centralized their components and created a flow for them to follow in order for them to continue successfully updating their design system on their own.

An idea to explore?

Drop us a line