Masalahnya
Ketika desain dan pengembangan tidak sejalan, itu bisa menjadi bencana. Terutama ketika desain berubah, tetapi pengembangan tidak mendapat informasi yang tepat waktu.
Solusi
Membangun pipa token Figma ke GitHub yang sebenarnya bekerja! Dengan menggunakan W3C Design Tokens dan GitHub API, kita dapat membuat sistem yang memungkinkan desainer untuk mengirim perubahan desain langsung ke kodebase.
Arsitektur
Pertama, desainer memperbarui variabel di Figma. Kemudian, mereka menjalankan proses untuk mengekspor variabel sebagai W3C Design Tokens. Proses ini berbicara langsung dengan GitHub API, membuat branch baru, mengcommit file JSON, dan membuka Pull Request.
Implementasi
Untuk membangun inti pipa ini, kita perlu menggunakan Node script untuk berinteraksi dengan GitHub API. Kita juga perlu menggunakan Style Dictionary untuk mengubah JSON menjadi CSS variabel.
- List langkah-langkah:
- Membuat token dalam format W3C Design Tokens
- Mengirim token ke GitHub menggunakan Node script
- Menggunakan Style Dictionary untuk mengubah JSON menjadi CSS variabel
- Membuat GitHub Actions workflow untuk mengautomasi proses
Fitur Utama
- Desainer dapat mengirim perubahan desain langsung ke kodebase
- Pengembang dapat meninjau perubahan desain sebelum mengirim ke produksi
- Menggunakan W3C Design Tokens dan GitHub API untuk memastikan integritas data
Pendapat Geek
Membangun pipa token Figma ke GitHub yang sebenarnya bekerja adalah sebuah proses yang menantang, tetapi hasilnya sangat sepadan. Dengan menggunakan teknologi yang tepat dan memahami kebutuhan desain dan pengembangan, kita dapat membuat sistem yang efektif dan efisien.
https://ds-sync.netlify.app/?utm_source=devto&utm_medium=post&utm_campaign=bot
