Funda
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
Strategy
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
)
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
)
Mark Jenkins, Funda
Head of Design
Mark Jenkins, Funda
Head of Design
Scope
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
)
Joao Carmona, Funda
Front-end Tech Lead
Joao Carmona, Funda
Front-end Tech Lead
Structure
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