Mengimplementasikan Variable Figma Dalam Project Website PPID By Suhu
Variable figma yang terdiri dari color, number, string dan boolean. Pada artikel berikut telah membahas colors variable. Kini saatnya untuk mencoba mengimplementasikan untuk variable number terhadap sebuah studi kasus project.
Pada studi kasus kali ini akan menggunakan variable number yang bisa digunakan untuk corner radius, spacing, padding dan lain sebagainya yang berhubungan dengan angka.
Tanpa kalian sadari bahwa figma telah merilis sebuah fitur yang bisa membantu dalam proses design untuk kasus tersebut. Seperti halnya menggunakan corner radius sebuah card, kalian tidak perlu repot untuk menginputkan dan mengingat-ingat berapa angka yang digunakan, karena sekarang ada fitur yang namanya variable.
Kalian bisa menggunakan variable ini selayaknya component yang bisa digunakan dan dipanggil kembali ketika dibutuhkan.
Dalam proses pembuatan variable, yang pertama kalian bisa lakukan langkah berikut ini,
- Klik Icon dibawah yang berlatar belakang biru untuk membuat variable
2. Klik create variable lalu pilih number dan masukkan angka-angkat yang berikut ini pada kolom value
3. Setelah berhasil seperti gambar di langkah nomor 2 artinya variable tersebut sudah berhasil dibuat.
Ketika proses pembuatan variable telah selesai maka bisa digunakan untuk design yang kalian buat.
Contoh variable number ini yang digunakan dalam pembuatan project Suhu ini adalah ketika menentukan angka dalam membuat corner radius dan spacing,
Sebelah paling kiri adalah component yang akan menggunakan variable, yaitu corner radius, setelah frame di seleksi maka pada bagian panel sebelah kanan seperti tampak gambar di tengah ada icon seperti segi enam merupakan bagian untuk di set varible. Setelah di klik maka seperti style/component yang telah dibuat untuk menggunakannya tinggal dipilih saja. Gambar paling kanan merupakan hasil dari component tersebut telah menggunakan variable.
Kesimpulan yang bisa diambil dari implementasi variable ini adalah kalian bisa menggunakannya kembali angka-angka yang telah diatur atau dibuat untuk design kalian lebih praktis dan lebih konsisten
