Petunjuk Penggunaan Variable Pada Figma
Figma adalah platform desain yang kolaboratif dan memungkinkan tim desain untuk bekerja bersama dalam merancang user interface. Pada tanggal 21 dan 22 Juni 2023, Figma meluncurkan fitur baru untuk semakin mempermudah desainer dan developer bekerja sama, salah satunya adalah Variable. Fitur ini memiliki kemampuan untuk memungkinkan desainer membuat suatu preset desain berisikan nilai seperti radius, spacing, text string, dan warna. Contoh dalam penggunaan Variable adalah sebagai berikut:
- Membuat desain token untuk memudahkan pengolahan Design System
- Mengubah spacing dan ukuran device dalam satu kali klik
- Mengubah bahasa dalam teks yang ada pada frame
- Membuat prototype yang interaktif dan berfungsi penuh sesuai dengan nilai kalkulasi dan logika matematis yang ditentukan
- Membuat prototype dalam <2 frame
Membuat Variable
Pertama-tama Anda perlu mengetahui letak pembuatan Variable di Figma terlebih dahulu. Buka draft dan klik canvas sehingga tidak ada layers yang terpilih atau tekan ESC di dalam file tersebut. Anda dapat melihat sidebar di sebelah kanan dan terdapat menu “Local Variable” di dalamnya. Klik menu tersebut dan tampilan letak pembuatan Variable di Figma akan muncul.
Type Variable
Pada saat ini Figma masih meluncurkan versi beta pada fitur ini sehingga terdapat beberapa variable yang hanya tersedia yaitu color, number, boolean, dan string
Color
Mengacu pada variable yang mendukung warna. Disini Anda dapat membuat desain token untuk keperluan Design System Anda. Anda juga dapat menyambungkan satu warna ke warna yang lain seperti Parent dan Child.
Number
Mengacu pada variable yang berisikan nilai numeric. Number dapat diaplikasikan di sebuah teks untuk menampilkan angka pada teks itu sendiri, nilai pada corner radius, width, height, padding, dan spacing.
Boolean
Boolean mengacu pada nilai boolean seperti true atau false. Boolean dapat diaplikasikan pada pemilihan gambar yang akan ditampilkan pada sebuah frame.
String
String mengacu pada variable yang berisikan karakter string yang diterapkan pada sebuah teks. Contohnya seperti penggunaan bahasa pada desain.
Menerapkan Variable
Variable Color
Proses penerapan variable di dalam objek tidak jauh dari penerapan style. Klik objek apa saja yang akan diterapkan variable, kemudian klik icon empat titik di panel Fill. Setelah itu Variable maupun style yang telah dibuat akan muncul.
Variable Number
Pada kasus ini adalah mengubah radius dari sebuah objek. Klik objek apa saja yang akan diubah corner radiusnya. Klik icon Variable di sebelah panel corner radius kemudian variable number yang telah dibuat akan muncul dan pilih salah satu nilai yang dikehendaki. Ketika variable telah diterapkan di objek tersebut, angka di panel corner radius akan berubah menjadi berwarna abu-abu. Hal ini menandakan bahwa variable telah diterapkan di dalam objek tersebut.
Variable Boolean
Pada kasus ini adalah mengubah objek yang sebelumnya tidak terdapat gambar di dalamnya kemudian berubah menjadi terdapat gambar di dalamnya. Klik objek yang akan diubah. Klik icon Mata di panel Layer, tepatnya di sebelah opsi Pass through. Kemudian klik variable boolean yang diinginkan.
Variable String
Pada kasus ini adalah mengubah text di placeholder sebuah komponen input. Klik placeholder tersebut kemudian klik icon variable di panel text, tepatnya di sebelah pojok kanan bawah. Kemudian pilihan variable string akan muncul dan pilih salah satu yang dikehendaki. Text placeholder tersebut akan berubah sesuai string yang ada di variable.
Menerapkan Variable di dalam Design Token
Alias
Pada fitur variable yang telah ada di Figma, Anda dapat menyambungkan satu variable dengan variable lainnya. Hal ini tentu berguna untuk pengelolaan design token di dalam design system Anda. Pada kasus ini adalah variable warna. Anda dapat membuat global variable dengan nama “purple900". Kemudian anda membuat variant dari sebuah komponen button yaitu variant primary sehingga Anda membutuhkan warna dengan nama “primary-button”. Namun warna yang Anda inginkan pada “primary-button” sama dengan warna yang ada pada “purple900”. Oleh karena itu Anda bisa menyambungkan warna “purple900” dengan “primary-button”. Sehingga ketika ada perubahan pada “purple900”, Anda tidak perlu mengubah lagi warna yang ada pada di “primary-button”. Keadaan ini juga bisa disebut dengan hubungan parent-child. Agar dapat menggunakan fitur tersebut, klik kanan pada nilai variable yang telah dibuat, kemudian pilih “Create Alias” kemudian ubah nama warna dari child tersebut.
Group
Anda bisa membuat berbagai macam nilai variable. Namun biasanya untuk mempermudah dokumentasi, Anda perlu untuk mengkategorikan tiap-tiap variable tersebut sesuai dengan fungsinya. Pada fitur variable di Figma, juga terdapat pilihan untuk melakukan grouping pada nilai variable. Pilih beberapa warna yang akan Anda kategorikan dengan menekan shift + klik, kemudian klik kanan, pilih “New group with selection”. Kemudian ubah warna group tersebut.
Mode
Anda juga dapat mengubah dark mode dan white mode dalam sekali klik menggunakan fitur variable. Di dalam fitur variable tersebut terdapat beberapa mode yang dapat dibuat. Klik icon + pada heading table dari variable kemudian mode baru akan muncul. Definisikan tiap-tiap warna yang akan berubah sesuai dengan mode yang Anda buat. Setelah itu, untuk mengubah mode sebuah objek klik icon variable di panel Layer tepatnya di sebelah kanan teks Layer kemudian pilih variablenya, dan pilih nilai dari variable tersebut.
Fitur variable ini masih dalam tahap beta. Anda masih dapat menggunakan fitur Style pada project Anda ataupun menggunakan fitur variable ini. Keduanya masih saling berkaitan dan masih layak digunakan sehingga proses pengelolaan dan kekonsistenan desain Anda semakin terjaga. Selamat mencoba! Semoga bermanfaat.
References:
