Figma: Mengungkap Fitur Baru Membuat Desain Semakin Gampang

Last Updated on July 5, 2023 by

Untuk para desainer pasti sudah tidak asing lagi dengan salah satu platform untuk membuat desain yaitu Figma. Semakin melajunya waktu dan tahun, fitur-fitur baru terus bermunculan dengan tujuan memudahkan dan membuat para desainer nyaman memakainya. Penasaran dengan fitur-fitur baru tersebut? Yuk kita bahas!

1. Variables

Variabel adalah nilai yang dapat digunakan kembali yang dapat digunakan di seluruh Figma, membuka token desain dan tema yang mudah dan memungkinkan pelokalan yang mudah. Variables dapat melakukan banyak hal, seperti mewakili warna atau jenis token, menyimpan ukuran bingkai atau layar, atau memungkinkan pelokalan yang mudah.

Tipe dari Variables 

Saat ini, beberapa jenis variabel dapat digunakan dalam Figma yaitu angka, string, warna, dan boolean. Sebelum membahas lebih lanjut tentang jenis-jenis tersebut, mari kita lihat bagaimana cara melihat variables di file kalian sendiri untuk digunakan oleh tim kalian. Ketika kalian berada di dalam file, tekan ESC atau klik kanvas sehingga tidak ada objek atau layer yang dipilih. Bagian baru dengan nama Local Variables telah ditambahkan ke dalam sidebar sisi kanan. Di sebelah kanan, klik ikon kontrol untuk membuka modal variabel.

• Color (Warna)

Warna merujuk kepada variable apapun yang mendukung definisi warna dan bisa diterapkan pada warna isi dan goresan. Variabel warna hanya dapat mendukung satu warna dalam satu tugas.

• Number (Nomor)

Digunakan untuk menetapkan nilai numerik ke definisi variabel. Dapat diterapkan pada lapisan teks, radius sudut, lebar atau tinggi minimum dan maksimum dan lainnya.

• Boolean

Berfungsi untuk menetapkan nilai Boolean (benar atau salah) ke variabel, dapat digunakan untuk mengontrol visibilitas lapisan atau contoh varian yang berisi nilai benar atau salah.

• String

String memungkinkan karakter tertentu dalam bahasa apapun untuk didefinisikan dan digunakan dalam desain, seperti dalam lapisan teks atau instance varian yang mengandung properti komponen string.

Menerapkan Variables

Setelah dibuat, variabel dapat diterapkan pada properti yang sesuai dan didukung dalam sidebar kanan, dan jika dipublikasikan dalam Figma, dapat digunakan dalam file apa pun dengan perpustakaan khusus yang diaktifkan. Saat kursor kalian fokus pada kolom input, tekan tanda sama dengan (=) agar kalian bisa cepat mengakses dan mencari daftar variabel yang tersedia.

2. Dev Mode

Dev Mode sangat membantu desainer dalam menerjemahkan desain grafis ke kumpulan barisan kode yang berfungsi dengan cepat. Tentu saja hal ini sangat memudahkan para desainer dalam mendesain.

Mengakses Dev Mode

Menyesuaikan tombol baru di bagian kanan atas file atau menekan Shift + D pada keyboard dapat digunakan untuk mengakses Dev Mode di dalam file Figma mana pun. Saat membagikan tautan ke Dev Mode, pemirsa akan secara otomatis dibawa ke mode baru.

Setelah diaktifkan, warna biru Figma biasa di seluruh antarmuka kanvas akan berubah menjadi hijau baru. Ini membuatnya lebih jelas baik saat dalam mode maupun saat tidak.

Menavigasi Desain

Sebelum Dev Mode, desain sangat sulit bagi mereka yang tidak terbiasa. Seringkali tidak jelas layar mana yang siap untuk dikembangkan, dan di dalam layar tersebut, tidak selalu jelas layer mana yang harus diklik untuk mengakses pengukuran yang tepat.

Dev Mode membuat hal ini lebih mudah dipahami karena nama layer muncul di kanvas saat kalian mengarahkan mouse ke objek yang ada di dalam desain, dan berbagai jarak dan nilai variabel muncul di kanvas saat Anda menggerakkan mouse.

Jika kalian menggunakan Sections di dalam kanvas untuk mengatur berbagai bingkai dan layar, Sections sekarang ditandai sebagai siap untuk dikembangkan saat kalian berada dalam Mode Dev.

Ketika halaman dipilih, fitur ini akan menempatkan ikon di sebelah judul halaman untuk memudahkan pengembang mengetahui bahwa halaman tersebut berisi desain yang siap untuk dikerjakan. Selain itu, ketika dilihat dalam Mode Dev, fitur ini akan menambahkan bagian ke panel kiri, di mana bagian dapat dipilih dan ditampilkan dengan satu klik.

Setelah kalian mengklik di area desain, kalian akan melihat panel sidebar yang benar-benar baru. Jika kalian memilih komponen tertentu, kalian akan melihat beberapa informasi sebagai berikut:

1. Nama Component.
2. Informasi mengenai kapan component tersebut terakhir di perbarui.
3. Pratinjau component dalam keadaan defaultnya.
4. Dokumentasi component.
5. Sumber daya pengembangan, yang mungkin termasuk tautan eksternal ke Storybook, GitHub, Linear, Jira, dan alat bantu lainnya.
6. Pengukuran jarak dan tata letak, diikuti dengan cuplikan kode CSS, SwiftUI, atau Compose.
7. Token warna melalui variabel yang digunakan.
8. Aset yang siap diekspor, tersedia untuk diunduh dalam bentuk SVG, PNG, JPG, atau PDF.
9. Kemampuan untuk membuat aset yang dapat diekspor secara individual.

3. Advanced Prototyping

Sebelumnya interaksi-interaksi dalam prototipe sangat kompleks untuk menyesuaikan konten dilayar sesuai dengan tindakan yang dilakukan.

Beberapa waktu yang lalu Figma mengumumkan fitur baru untuk menyederhanakan prototipe dan membuat yang lebih kompleks menjadi lebih mudah bagi siapa saja untuk membuatnya. Prototipe sekarang dapat mengandung variabel, kondisi, dan ekspresi.

Karena penggunaan variabel dalam prototipe dapat berupa tipe warna, string, boolean, atau angka semua nilai tersebut sekarang dapat ditukar atau disesuaikan berdasarkan keputusan atau interaksi pengguna.

Sebuah layer dapat ditampilkan atau disembunyikan, teks dapat diperbarui, atau dimensi dan ukuran dapat berubah. Aksi set variabel baru membuat ini menjadi mungkin, dan kalian dapat menerapkan logika untuk membuat penyesuaian yang diinginkan.

4. Auto Layout (Updated)

Sebelumnya pada Auto Layout, hanya ada dua arah tata letak yang mungkin yaitu vertikal dan horizontal. Selama ini kedua tata letak tersebut berjalan dengan baik, namun jika ingin mengatur tata letak yang lebih dinamis, mungkin secara otomatis hal tersebut tidak dapat dilakukan.

Saat ini mengatur tata letak otomatis telah dapat dilakukan. Jarak antara item, baik secara horizontal maupun vertikal, dapat disesuaikan, dan tentu saja, kalian juga dapat menggunakan variabel untuk nilai-nilai tersebut.

Kesimpulan

Figma terus menghadirkan fitur-fitur baru yang memudahkan para desainer dalam membuat desain yang lebih baik. Dalam artikel ini, kita membahas beberapa fitur baru yang dihadirkan oleh Figma, antara lain: Variables, Dev Mode, Advanced Prototyping, dan Auto Layout (Updated).

Variables: Variabel memungkinkan desainer untuk menggunakan kembali nilai-nilai yang dapat diterapkan secara konsisten di seluruh desain. Tipe variabel meliputi warna, angka, boolean, dan string.

Dev Mode: Dev Mode membantu desainer dalam menerjemahkan desain grafis ke kode fungsional dengan cepat. Fitur ini memudahkan navigasi dalam desain dan menampilkan informasi yang relevan terkait komponen yang dipilih.

Advanced Prototyping: Prototipe sekarang dapat mengandung variabel, kondisi, dan ekspresi. Hal ini memungkinkan pengaturan dinamis konten berdasarkan keputusan atau interaksi pengguna.

Auto Layout (Updated): Auto Layout kini mendukung tata letak dinamis dengan kemampuan untuk menyusun elemen secara horizontal atau vertikal, dan dapat disesuaikan dengan jarak antar elemen.

Dengan fitur-fitur baru ini, Figma semakin menjadi alat yang kuat dan fleksibel bagi para desainer dalam menghasilkan desain yang lebih baik dan efisien.

Bagaimana dengan informasi diatas?Menarik bukan?Ikuti WEBAPP untuk terus mendapatkan update artikel menarik mengenai pengembangan aplikasi dan juga website! Klik https://appkey.id/agar tak ketinggalan artikel terbaru dan menarik terkait teknologi serta pengembangan aplikasi setiap harinya! Sampai jumpa lagi!