---
title: "Membangun sistem desain adaptif untuk Archlight"
publishedAt: "2024-04-08"
summary: "Dalam proyek ini, saya mengembangkan sistem desain yang fleksibel dan skalabel menggunakan Next.js untuk pengembangan front-end dan Figma untuk kolaborasi desain."
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"
---

## Ikhtisar

Dalam proyek ini, saya mengembangkan sistem desain yang fleksibel dan skalabel menggunakan Next.js untuk pengembangan front-end dan Figma untuk kolaborasi desain. Tujuannya adalah untuk membuat perpustakaan komponen yang dapat digunakan kembali yang tidak hanya mematuhi prinsip desain yang konsisten tetapi juga mudah diperluas untuk kebutuhan di masa depan. Sistem desain ini bertujuan untuk meningkatkan pengalaman pengembang secara keseluruhan sambil menjaga konsistensi visual di berbagai proyek.

## Fitur Utama

- **Perpustakaan Komponen**: Membangun serangkaian komponen UI modular dan dapat digunakan kembali menggunakan React dan styled-components di Next.js, dengan fokus pada aksesibilitas dan responsivitas.
- **Pengaturan Tema dan Kustomisasi**: Mengintegrasikan sistem pengaturan tema yang memungkinkan pergantian dan kustomisasi palet warna, tipografi, dan gaya tata letak dengan mudah menggunakan variabel CSS dan token Figma.
- **Integrasi Figma**: Bekerja sama dengan desainer dengan menyiapkan perpustakaan desain bersama di Figma. Perpustakaan ini disinkronkan dengan kode, memastikan proses penyerahan desain berjalan mulus dan token desain tetap konsisten di kedua platform.
- **Dokumentasi dan Panduan Penggunaan**: Mengembangkan dokumentasi lengkap dengan Storybook untuk menampilkan komponen, pola penggunaan, dan praktik terbaik, memastikan sistem desain mudah diadopsi oleh tim lain.

## Teknologi yang Digunakan

- **Next.js**: Untuk aplikasi React yang cepat dan dirender di server.
- **Figma**: Untuk membuat dan mengelola aset desain dan prototipe.
- **Styled-Components**: Untuk menata komponen React dengan pendekatan modular dan tematis.
- **Storybook**: Untuk membangun perpustakaan komponen interaktif dan terdokumentasi.

## Tantangan dan Pembelajaran

Salah satu tantangan utama adalah menyeimbangkan kebutuhan akan fleksibilitas dengan keinginan untuk menjaga konsistensi desain. Solusinya melibatkan pembuatan token desain yang terdefinisi dengan baik dan menetapkan pedoman yang jelas untuk kapan dan bagaimana komponen dapat disesuaikan. Selain itu, menyiapkan alur kerja kolaborasi yang efektif antara desainer dan pengembang menggunakan Figma dan Git adalah pengalaman belajar yang sangat meningkatkan prosesnya.

## Hasil

Sistem desain ini sekarang aktif digunakan di berbagai proyek, yang mengarah pada siklus pengembangan yang lebih cepat, lebih sedikit inkonsistensi desain, dan peningkatan kolaborasi antara tim desain dan pengembangan. Sistem ini telah menjadi fondasi untuk mengembangkan produk kami secara efisien sambil memastikan pengalaman pengguna yang kohesif.