Visual preview
Beberapa tampilan utama untuk memberi konteks cara project ini bekerja.
iTailwind
Plugin Figma untuk membantu desainer menerapkan utility Tailwind CSS dengan lebih konsisten.
Overview
Aku membuat iTailwind untuk membantu desainer menjaga konsistensi saat bekerja dengan utility Tailwind CSS di Figma. Melalui plugin ini, pengaturan pada layer Figma bisa diterjemahkan menjadi utility class yang lebih mudah dipakai saat desain mulai masuk ke tahap development.
Aku juga berusaha menjaga antarmukanya tetap sederhana supaya proses tersebut terasa praktis dan tidak mengganggu alur kerja desain.
Case Study
Memecahkan Masalah Penggunaan Tailwind di Figma
Project ini berawal dari kesulitan saat menerjemahkan desain Figma ke kode Tailwind CSS. Aku melihat ada jarak antara nilai yang dipakai di layer Figma dan utility class yang akhirnya ditulis oleh developer.
Dari situ, aku merancang iTailwind agar utility class bisa dibuat langsung dari layer Figma. Prosesnya mencakup perancangan plugin dari awal, eksplorasi UI/UX untuk panel Figma, dan implementasi engine yang menghasilkan kode Tailwind dengan akurat.
Stack
Figma- Plugin
Tailwind- Design System
