---
title: "Building an adaptive design system for Archlight"
publishedAt: "2024-04-08"
summary: "In this project, I developed a flexible and scalable design system using Next.js for front-end development and Figma for design collaboration."
images:
  - "/images/projects/project-01/cover-01.jpg"
  - "/images/projects/project-01/cover-02.jpg"
  - "/images/projects/project-01/cover-03.jpg"
  - "/images/projects/project-01/cover-04.jpg"
team:
  - name: "Selene Yu"
    role: "Software Engineer"
    avatar: "/images/avatar.jpg"
    linkedIn: "https://www.linkedin.com/company/once-ui/"
  - name: "Jane Smith"
    role: "Product Manager"
    avatar: "/images/projects/project-01/avatar-01.png"
    linkedIn: "https://www.linkedin.com/in/janesmith"
---

## Overview

In this project, I developed a flexible and scalable design system using Next.js for front-end development and Figma for design collaboration. The goal was to create a reusable component library that not only adheres to consistent design principles but is also easily extendable for future needs. The design system was aimed at improving the overall developer experience while maintaining visual consistency across multiple projects.

## Key Features

- **Component Library**: Built a set of modular, reusable UI components using React and styled-components in Next.js, focusing on accessibility and responsiveness.
- **Theming and Customization**: Integrated a theming system that allows easy switching and customization of color palettes, typography, and layout styles using CSS variables and Figma tokens.
- **Figma Integration**: Collaborated closely with designers by setting up a shared design library in Figma. This library was synchronized with the codebase, ensuring design handoffs were seamless and that design tokens remained consistent across both platforms.
- **Documentation and Usage Guidelines**: Developed comprehensive documentation with Storybook to showcase components, usage patterns, and best practices, ensuring the design system is easy to adopt by other teams.

## Technologies Used

- **Next.js**: For fast, server-rendered React applications.
- **Figma**: For creating and managing design assets and prototypes.
- **Styled-Components**: For styling React components with a modular, themable approach.
- **Storybook**: For building an interactive, documented component library.

## Challenges and Learnings

One key challenge was balancing the need for flexibility with the desire to maintain design consistency. The solution involved creating well-defined design tokens and establishing clear guidelines for when and how components could be customized. Additionally, setting up effective collaboration workflows between designers and developers using Figma and Git was a learning experience that greatly improved the process.

## Outcome

The design system is now actively used across multiple projects, leading to faster development cycles, fewer design inconsistencies, and improved collaboration between design and development teams. It has become a foundation for scaling our products efficiently while ensuring a cohesive user experience.