Media Pengembangan Web & App | by APPKEY

DesainDesign UIFigma: Mengungkap Fitur Baru Membuat Desain Semakin Gampang

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!

figma

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.

Artikel Terkait  Inilah Peran Penting Mockup dalam Desain Produk Brand Anda

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.

figma

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.

Artikel Terkait  Cara Menggunakan Tipografi Desain UI Bagi Pemula

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.

Artikel Terkait  4 Pendekatan Website Mockup yang Layak untuk Dicoba

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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya