Latar Belakang

Salah satu tantangan terbesar dalam pengembangan frontend mobile adalah menjaga konsistensi antara desain yang dibuat oleh tim desainer di Figma dengan implementasi aktual dalam kode. Perbedaan sekecil apapun antara desain dan implementasi dapat menurunkan kualitas visual aplikasi dan menciptakan ketidakkonsistenan yang mengganggu pengalaman pengguna.
Proses konversi desain Figma ke kode React Native memerlukan pemahaman mendalam tentang sistem layout Flexbox yang digunakan React Native, cara mengekstrak nilai-nilai desain dari Figma seperti ukuran, warna, dan jarak antar elemen, serta bagaimana membangun komponen yang dapat digunakan kembali dengan properti yang fleksibel.

Pengertian dan Konsep

Flexbox adalah model layout CSS yang dirancang untuk mendistribusikan ruang dan menyelaraskan item dalam container, bahkan ketika ukuran item tidak diketahui atau dinamis. React Native menggunakan implementasi Flexbox yang hampir identik dengan CSS, dengan beberapa perbedaan kecil, yaitu nilai default flexDirection di React Native adalah column bukan row.
Design token adalah nilai-nilai desain yang didefinisikan sebagai variabel yang dapat digunakan secara konsisten di seluruh kodebase. Design token mencakup warna, tipografi, spasi, border radius, shadow, dan nilai-nilai visual lainnya. Penggunaan design token memastikan konsistensi visual dan memudahkan perubahan tema global.
StyleSheet di React Native adalah API yang digunakan untuk mendefinisikan style komponen. Berbeda dengan CSS yang diproses oleh browser, StyleSheet React Native dioptimalkan untuk performa mobile dengan melakukan validasi dan pemrosesan style pada saat kompilasi.
Pixel density adalah konsep penting dalam pengembangan mobile. Perangkat modern memiliki screen density yang tinggi, sehingga satu CSS pixel dapat terdiri dari beberapa piksel fisik layar. React Native menggunakan satuan dp atau density-independent pixels yang secara otomatis menyesuaikan dengan density layar perangkat.

Pembahasan

Proses konversi dimulai dengan mengekspor design token dari Figma. Semua warna, tipografi, dan nilai spasi yang didefinisikan dalam Figma design system dikonversi ke dalam file TypeScript yang berfungsi sebagai single source of truth untuk nilai-nilai visual dalam kode.
File constants/colors.ts mendefinisikan semua warna yang digunakan dalam aplikasi mengikuti penamaan yang konsisten dengan desain. File constants/typography.ts mendefinisikan skala tipografi dengan ukuran font, bobot, dan tinggi baris yang sesuai dengan desain. File constants/spacing.ts mendefinisikan skala spasi menggunakan kelipatan delapan sebagai basis.
Komponen dasar atau atomic components dibangun pertama kali sebagai fondasi. Komponen Button dibuat dengan properti variant yang menerima nilai primary, secondary, atau tertiary, properti size yang menerima small, medium, atau large, serta properti disabled dan loading. Implementasi menggunakan TouchableOpacity dengan StyleSheet yang mendefinisikan setiap kombinasi variant dan state.
Komponen Text dibuat sebagai pembungkus teks yang secara otomatis menerapkan tipografi yang sesuai berdasarkan variant yang dipilih seperti heading, subheading, body, atau caption.
Komponen Card dibuat dengan bayangan yang dikonfigurasi untuk memberikan tampilan yang konsisten di iOS dan Android, mengingat keduanya memiliki cara berbeda dalam merender bayangan.
Komponen layar Home Screen dibangun dengan menggunakan SafeAreaView sebagai container terluar untuk menghindari konten tertutup oleh notch atau navigation bar. ScrollView digunakan agar konten dapat digulir saat tidak muat dalam satu layar.
Penggunaan Figma Dev Mode sangat membantu dalam proses konversi ini karena menyediakan nilai numerik tepat untuk setiap elemen desain, termasuk ukuran, padding, margin, dan kode warna dalam format hex.

Dokumentasi Pembelajaran

Pembelajaran pada tahap ini berfokus pada penguasaan Flexbox dalam konteks React Native, termasuk properti flexDirection, justifyContent, alignItems, flex, flexWrap, dan gap. Latihan dilakukan dengan mereplikasi berbagai layout yang ada di desain NexusPay menggunakan hanya Flexbox tanpa library tambahan.
Dipelajari pula tentang Platform API di React Native yang memungkinkan penulisan kode yang berbeda untuk iOS dan Android ketika diperlukan, khususnya untuk properti shadow yang memiliki implementasi berbeda di kedua platform.
Konsep Responsive Design dalam mobile juga dipelajari menggunakan Dimensions API dan useWindowDimensions hook untuk membuat layout yang adaptif terhadap berbagai ukuran layar.

Dokumentasi Pengerjaan Desain

Implementasi dimulai dengan membangun komponen atomic terlebih dahulu, mengikuti metodologi bottom-up development. Setiap komponen yang selesai dibuat didokumentasikan dengan Storybook, sebuah tool yang memungkinkan preview dan pengujian komponen secara terisolasi.
Screenshot perbandingan antara desain Figma dan implementasi kode dibuat untuk setiap komponen utama sebagai dokumentasi kesesuaian implementasi. Perbedaan yang ditemukan segera diperbaiki untuk menjaga akurasi implementasi terhadap desain.

Kesimpulan

Konversi desain Figma ke komponen kode React Native yang presisi membutuhkan pendekatan sistematis yang dimulai dari mendefinisikan design token, membangun komponen atomic, dan merakitnya menjadi layar yang utuh. Dengan mengikuti metodologi yang terstruktur dan memanfaatkan fitur Figma Dev Mode, implementasi NexusPay berhasil mencapai tingkat kesesuaian visual yang tinggi dengan desain aslinya.

Daftar Pustaka

React Native. (2023). Layout with Flexbox. https://reactnative.dev/docs/flexbox
React Native. (2023). StyleSheet API. https://reactnative.dev/docs/stylesheet
Figma Inc. (2023). Dev Mode Documentation. https://help.figma.com/
Storybook. (2023). Storybook for React Native. https://storybook.js.org/
Airbnb Engineering. (2023). React Native at Airbnb. https://medium.com/airbnb-engineering/
Wathan, A. (2023). Tailwind CSS Design System Principles. https://tailwindcss.com/