Media Pengembangan Web & App | by APPKEY

DesainDesign Web13 Trik Figma Design Web yang Bisa Anda Terapkan...

13 Trik Figma Design Web yang Bisa Anda Terapkan untuk Desain Lebih Baik

-

Last Updated on June 17, 2022 by

Membuat design web bisa dilakukan dengan mudah menggunakan Figma. Meskipun merupakan aplikasi yang cukup baru di dunia desain dan prototipe, Figma telah berkembang jauh sejak diluncurkan pada tahun 2016.

Figma berbasis cloud yang mudah digunakan ini memungkinkan Anda mendesain aplikasi, situs web, dan komponen UI lainnya yang mungkin perlu diintegrasikan ke dalam proyek lain. Figma sangat membantu Anda dalam membangun design web dengan mudah.

Pada artikel ini, kami akan memberikan 13 trik Figma Design Web yang bisa Anda terapkan untuk desain web yang lebih baik.

13 Trik Figma Design Web

figma-design-web2

Design web menggunakan Figma menjadi lebih mudah dengan berbagai trik Figma. Tertarik untuk mengetahui rahasia bekerja di Figma secara efektif? Inilah 13 trik Figma design web yang mudah digunakan.

Baca juga : 10 Graphic Design App untuk Membuat UI/UX Design Dengan Mudah

1. Perbarui layout otomatis

Perbarui atau tambahkan fitur layout otomatis baru untuk mengubah ukuran desain Anda secara dinamis. Dengan tata letak otomatis, Anda dapat dengan cepat membuat tombol, daftar, model, dan lain sebagainya.

Dengan beberapa margin dan aturan pengubahan ukuran yang dapat dengan mudah mengakomodasi komponen yang lebih rumit dan menghilangkan kebutuhan akan pengeditan spasi yang membosankan.

2. Perbarui nudge amount menjadi 8px

Menggunakan unit dasar 8px sering disarankan karena berbagai alasan dan harus digunakan secara konsisten untuk desain web yang berhubungan dengan ukuran dan jarak. Anda dapat membuatnya lebih mudah untuk diri sendiri dan seluruh tim Anda hanya dengan mengatur “nudge amount” di Figma dari 10px ke 8px.

Dengan cara ini, setiap kali Anda akan memindahkan atau mengubah ukuran objek, itu akan menjadi kelipatan 8. Untuk menggunakan dorongan, tahan tombol Shift + panah, dan untuk menyesuaikan jumlah dorongan, navigasikan ke Menu > Preferensi > Nudge Amount > 8.

3. Gunakan bar graph arc tool

Bar Graph arc tool adalah sebuah alat atau fitur minimalis dalam Figma Design Web. Ini dapat menghemat waktu untuk membuat busur pada desain dengan mudah. Fitur ini pun sangat membantu ketika Anda sedang bekerja dengan deadline yang ketat.

4. Kelola komponen dasar

Anda dapat menggunakan komponen dasar secara lebih efisien dengan membuat dan mengelola komponen dengan beberapa varian. Setiap varian akan menahan komponen dasar bersarang individualnya yang ditimpa untuk membuat status baru. Ini membuat pembaruan massal cukup mudah dan juga memastikan konsistensi 100%.

5. Gunakan logika benar/salah

Gunakan label “true/false” atau “on/off” untuk beralih di antara dua properti yang berbeda. Trik kecil ini akan membuat pergantian varian lebih cepat dan sangat cocok dengan cara kerja komponen yang berbeda dalam kode.

Sebagai contoh : Type=Single-line, State=Default, Optional=Yes

6. Mengatur posisi grid atau swap

Setelah memilih beberapa objek dalam tabel, klik ikon kisi di sudut untuk mengatur desain Anda. Ini menyamakan semua jarak antar objek, memungkinkan Anda untuk menyeret dan mengatur ulang objek dan menyesuaikan jaraknya.

Artikel Terkait  Perbedaan JPEG dan JPG, Apakah Keduanya Berbeda?

7. Edit spasi secara massal

Menyejajarkan berbagai objek dan menyesuaikan jarak dengan tepat bisa tampak sangat membosankan dan memakan waktu. Namun, untungnya, fitur “smart selections” & “tidy” Figma memungkinkan Anda melakukan hal itu secara massal.

Dengan Figma, objek serupa dapat diatur secara otomatis menjadi daftar atau kisi yang rapi, bulk space, dan reordered.

  • Untuk mengedit spasi secara massal, pilih objek serupa > pilih daftar/ikon kisi > seret spasi ke kanan, kiri, atas, atau bawah.
  • Dan untuk menukar penempatan objek, pilih objek serupa > pilih titik di dalam satu objek > seret dan lepas ke lokasi baru.
  • Dapatkan informasi mendalam tentang perpindahan dari desain ke proses pengembangan

8. Mengganti nama secara multiple layers

Sangat penting untuk menjaga file Anda terorganisir dengan struktur penamaan dan hierarki yang ditentukan untuk semua layers design web Anda. Tugas ini dibuat lebih cepat dengan model “Rename Layers” Figma, memungkinkan Anda untuk mengganti nama layer secara massal.

Anda dapat mengubah nama setiap layers menjadi sama, memiliki akhiran angka, menambahkan awalan ke nama yang berbeda, atau mengganti nama hanya sebagian dari nama layers.

Untuk mengakses model Rename Layers, arahkan ke Klik kanan layer > pilih “Rename.”

9. Atur halaman file Anda

Mencari design web atau komponen master tertentu terkadang bisa sangat memakan waktu dan juga dapat menyebabkan miskomunikasi dan duplikasi. Oleh karena itu, atur halaman file Anda agar navigasi dan pemeliharaannya cepat dan mudah dengan menggunakan Figma design web. Pastikan setiap halaman memiliki nama yang jelas untuk berbagai tujuan desain dan dokumentasi.

10. Gunakan pintasan keyboard

Bukan misteri bahwa menggunakan pintasan keyboard jauh lebih cepat daripada menggunakan mouse. Praktis setiap tindakan dapat dimulai dengan pintasan keyboard untuk membuat bekerja di Figma tampak lebih cepat dan efisien. Ini cara menggunakan pintasan Figma design web.

  • Untuk melihat pintasan keyboard: Tekan”?” di pojok kanan bawah browser Anda.
  • Panduan Lengkap untuk Mock up Desain Situs Web

11. Gunakan alat skala

Untuk menjaga piksel desain Anda sempurna dengan bantuan alat skala, cukup pilih semua objek yang ingin Anda skalakan, lalu tahan K pada keyboard dan seret. Banyak designer web yang enggan untuk menskalakan seluruh artwork karena selalu ada yang rusak, terutama bidang teks, dan Anda harus menyesuaikan ulang artwork. Namun jika sudah terbiasa menggunakannya maka alat ini akan berguna.

12. CMD (CTRL) + untuk membuka kunci objek

CMD (CTRL) + / memiliki banyak aplikasi cepat praktis yang dapat menghemat banyak waktu dalam alur kerja Anda dalam Figma design web. Jika Anda tidak menggunakannya, sangat disarankan agar Anda memeriksa apa yang tersedia di menu. Buka kunci semua item dan ubah font sesuai keinginan Anda.

13. Lebih banyak trik menghemat waktu dengan spacebar

Seret selection lalu tahan spacebar untuk menambah ukuran dari pemilihan kursor. Jika Anda menggambar sebuah bentuk, Anda juga dapat memesan ruang untuk memindahkan objek saat Anda menggambar.

Jika itu tidak cukup, tekan spasi, dan Figma akan secara otomatis memindahkan objek ke dalam bingkai atau layout otomatis. Anda juga bisa menggantinya dengan bersarang. Spacebar sangat berguna!

Tahan spacebar dan pindahkan objek keluar dari bingkai untuk membuatnya tetap berada di dalam container. Anda juga dapat menonaktifkan konten klip video di container objek sehingga dapat dilihat meskipun berada di luar container. Anda juga dapat menekan CMD (CTRL) + Y untuk menampilkan outline.

Itulah trik figma design web yang bisa Anda terapkan. Figma adalah salah satu pilihan terbaik bagi Anda yang ingin membuat design web. Baik Anda mencari template desain, ikon, alat berperforma tinggi, cara yang lebih baik untuk mengelola operasi desain, desain yang responsif dan apik, akses mudah ke alat pengembang, dan komunitas pengembang dan aplikasi yang kuat.

Jika ingin tahu lebih banyak informasi tentang design web, kunjungi Appkey di https://appkey.id/ dan dapatkan berbagai informasi terbaru.


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

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...

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...

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...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

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...

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