Dari Figma ke Tailwind: Alur Handoff Praktis untuk Tim Kecil

TL;DR: Handoff Figma ke Tailwind paling efektif kalau token desain (warna, spacing, typography) didefinisikan sekali di Figma Variables lalu dipetakan langsung ke konfigurasi Tailwind. Tanpa token bersama, developer akhirnya menebak nilai dan komponen jadi inkonsisten.

Setiap tim kecil yang Vito Atmo dampingi punya pertanyaan yang sama setelah desain awal selesai: "Bagaimana memastikan implementasi UI di kode sama persis dengan Figma?". Jawaban populer biasanya pakai plugin pengonversi otomatis. Dari pengalaman menangani lebih dari 15 project client dalam tiga tahun terakhir, plugin seperti itu jarang menghasilkan kode yang siap pakai. Yang lebih efektif adalah membangun alur handoff yang ringan tapi disiplin.

Artikel ini membagikan alur Figma ke Tailwind CSS yang dipakai di proyek internal Atmo dan beberapa landing client.

Masalah Klasik di Handoff

Tanpa alur yang jelas, masalah yang sering muncul:

1. Developer pakai nilai warna mentah dari color picker, padahal Figma punya 6 warna brand yang sudah didefinisikan.
2. Spacing antar elemen tidak konsisten karena setiap developer menebak nilainya.
3. Typography di kode tidak match dengan typography di desain karena skala tidak terdefinisi.
4. Setiap perubahan kecil di desain membutuhkan tracking manual di chat atau ticket.

Hasilnya: revisi UI yang seharusnya 30 menit jadi 3 jam karena ada inkonsistensi yang ditemukan saat QA.

Alur 4 Langkah

Setiap langkah ada handoff artefak yang jelas, jadi tidak ada yang menebak.

Studi Kasus: Landing Client Yuanita Sekar

Saat membangun landing personal branding untuk Yuanita Sekar, alur ini dipakai dengan setup minimal:

• Figma Variables untuk 8 warna brand, 6 skala spacing (xs sampai 3xl), dan 5 skala typography.
• File tailwind.config.ts di repo Next.js memetakan token Figma satu-satu ke utility Tailwind.
• Komponen di-build sebagai atomic design: atom (Button, Badge) lalu disusun jadi molekul dan organisme.

Hasil yang teramati: revisi UI yang biasanya butuh 2-3 jam per komponen jadi 30-45 menit, karena developer tinggal mengganti utility class tanpa khawatir nilai warna atau spacing meleset. Pendekatan ini juga didukung riset Nielsen Norman yang menyebut design system mengurangi waktu desain dan development 20-30% untuk tim yang konsisten memakainya.

Konvensi Naming yang Memudahkan

Token di Figma dan Tailwind harus pakai nama yang sama persis. Hindari penamaan generik:

• Bad: blue-1, blue-2, dark-blue (tidak jelas hierarki)
• Good: brand-primary, brand-primary-hover, text-base, text-muted

Penamaan semantik lebih tahan lama. Saat klien minta ganti warna brand dari biru ke ungu, kamu hanya mengubah nilai brand-primary di satu tempat, bukan grep semua file mencari blue-500.

Konvensi ini juga selaras dengan BEM naming di sisi CSS atau design system modern: semua merujuk pada hierarki bermakna, bukan nilai visual.

Tools yang Dipakai

Tidak perlu stack rumit. Setup minimal yang cukup untuk tim 2-4 orang:

• Figma dengan Variables (gratis di tier basic).
• Tailwind CSS dengan tailwind.config.ts (konfigurasi tunggal).
• GitHub PR review dengan screenshot Figma sebagai referensi.
• Plugin Figma seperti "Variables to Code" untuk export awal, lalu disesuaikan manual.

Plugin pengonversi otomatis ke React/HTML masih boleh dipakai untuk prototyping, tapi jangan jadikan output utamanya production code.

Pertanyaan Umum

Apakah harus pakai Figma Variables?

Tidak wajib, tapi sangat membantu. Alternatifnya pakai Color Styles dan Text Styles tradisional, yang juga bisa di-export. Yang penting ada single source of truth, bukan picker bebas.

Bagaimana kalau desainer pakai tool lain selain Figma?

Konsepnya sama untuk Sketch, Penpot, atau Adobe XD. Yang penting ada definisi token (warna, spacing, typography) dan ada cara mengekspornya ke kode. Yang tidak boleh adalah desainer kirim PNG screenshot dan developer ngira-ngira.

Berapa lama setup alur ini?

Untuk project baru, sekitar 4-8 jam untuk mendefinisikan token dan setup config awal. Untuk project existing, lebih lama karena perlu refactor nilai hardcoded yang sudah tersebar di kode.

Apakah alur ini cocok untuk solo developer?

Ya. Bahkan untuk solo developer, mendefinisikan token sekali di awal lebih cepat daripada konsisten menulis ulang nilai warna dan spacing di setiap komponen.

Disiplin Mengalahkan Tool

Alur handoff yang baik bukan tentang plugin canggih. Yang membedakan tim yang konsisten dengan tim yang sering revisi UI adalah disiplin mendefinisikan token sekali di awal dan menaatinya. Mulai dari satu artefak: file tailwind.config yang nilainya semua diambil dari Figma Variables. Setelah itu, masalah handoff yang dulu menghabiskan jam berkurang drastis, dan tim bisa fokus ke hal yang lebih berdampak ke bisnis seperti optimasi konversi landing page.