NEST

Keys Design System

Task

Building a new Design System from scratch in Figma, to create a scalable, consistent and accessible digital experience.

  • Design

    Design library, Component guideline, Design token

  • Client

    Nest

  • Tools

    Figma

01 // Project Overview

Overview

Since joining Nest as a Product Designer, I have led the development of Keys, our property rental design system built in Figma. This comprehensive system is currently used across multiple digital products within our property management ecosystem, including tenant-facing rental portals, landlord dashboards, and internal property management tools.

The process of building Keys followed a structured double-diamond approach. I began by identifying the core challenges through extensive research into existing design patterns and conducting interviews with product teams across the organization. After gaining a thorough understanding of our needs, I developed an execution plan that outlined the system’s structure and component delivery timeline. As foundational elements, base components, and composite patterns were released incrementally, the team actively gathered feedback and questions to enable continuous iteration and refinement of the system.

Discover & DefineDiscover & Define

Beginning with the discovery stage, my objective was to uncover the precise problems that users of Keys would face, as well as their needs and pain points when working without a cohesive design system.

To accomplish this, I conducted interviews with design and development teams responsible for various property management products, gathering valuable insights from both designers and front-end developers.

Our challenges

Through thorough research of existing practices and workflows, I gained a better understanding of the challenges the team was experiencing:

1. Property management was being conducted through social media apps (Messenger, Instagram, and Zalo), with no unified interface or design patterns.

2. All rental records, tenant information, and booking logs were maintained in a massive spreadsheet with no structured data management.

3. There was no existing design system or component library—everything needed to be built from scratch for the new CMS.

4. Without any digital product precedent, there were no established patterns for property-specific workflows like rental listings, booking flows, or tenant dashboards.

5. Teams had no reference point for common property rental scenarios—availability calendars, lease workflows, property search filters, or document management interfaces.

How listings, data and Customer Relationships were managed.

No established brand guidelines. 

Problems to solve

Configurable

Designers can now effortlessly and intuitively configure components within Figma.

For instance, when working with a property card component, designers can readily access desired variations through the variant panel. With Figma’s component properties, designers can conveniently configure all variations—from available to booked states, different property types, and pricing displays—from a centralized location.

Scalable

Thanks to a meticulously established auto-layout system, all components within the design system are now seamlessly scalable across various viewports. From mobile (375px) to tablet (768px), desktop (1024px), and even ultra-wide screens (1440+px), designers can effortlessly utilize the components to create UIs of any desired screen size.

Design Token

In order to establish a scalable and consistent visual system for the CMS development, as well as manage visual design attributes in a systematic manner, I developed a design token structure for Nest Keys.