Pengenalan Dasar desain UI menggunakan Figma

Pengenalan Dasar desain UI menggunakan Figma

1. FIGMA Alat desain antarmuka dan prototyping CSS

2. Figma merupakan alat desain antarmuka dan prototyping pertama yang berbasis dalam browser. Figma menggunakan satu live URL yang bekerja di berbagai platform. Hal ini memungkinkan figma untuk kolaborasi secara langsung ( real-time ). Apa itu Figma?

3. Mengapa figma dipilih sebagai aplikasi untuk desain UI/UX? Kolaborasi: Figma memudahkan para desainer untuk berkolaborasi pada desain secara real-time. Beberapa desainer bisa bekerja pada satu desain secara bersamaan, yang dapat menghemat waktu dan mengurangi kesalahan Prototyping: Figma memungkinkan para desainer untuk membuat prototype interaktif pada desain mereka. Sistem Desain: Figma memungkinkan para desainer untuk membuat dan mempertahankan sistem desain. Plugin: Figma memiliki beragam plugin yang dapat memperluas fungsionalitasnya

4. Apa saja tools pada figma Toolbar Right sidebar inspector left sidebar

5. TOOLBAR berisi berbagai alat dan opsi yang digunakan untuk membuat, mengedit, dan mengelola elemen-elemen desain

6. RIGHT SIDEBAR tempat untuk berkolaborasi dan mengelola proyek

7. RIGHT SIDEBAR Comment : Panel ini digunakan untuk berkomunikasi dengan anggota tim dengan menambahkan komentar langsung ke elemen desain. Ini sangat berguna untuk memberikan feedback dan berkolaborasi. Prototype : Ini adalah tempat untuk mengatur pengalaman pengguna interaktif dalam desain. Kita dapat menambahkan tautan antar frame dan membuat animasi di sini. Design : Panel ini berisi pengaturan desain khusus yang berlaku untuk seluruh proyek atau frame yang sedang dipilih. Kita dapat mengatur gaya tipografi, warna, dan efek bayangan di sini.

8. INSPECTOR untuk mengubah serta mengatur properti dan atribut dari objek yang dipilih di canvas

9. LEFT SIDEBAR untuk mengakses dan mengelola berbagai elemen dalam proyek

10. LEFT SIDEBAR File Browser: Ini memungkinkan kita untuk melihat proyek-proyek yang kita buat atau diundang untuk bergabung. Layers: Ini adalah panel yang berisi daftar semua elemen dalam proyek kita dalam bentuk lapisan. Kita dapat mengelola lapisan ini, mengatur hierarki, dan mengubah nama mereka. Assets: Panel ini berisi berbagai elemen desain yang dapat digunakan kembali, seperti simbol, gaya teks, dan warna. Kita dapat dengan mudah menambahkan elemen-elemen ini ke desain.

11. Plugin yang bermanfaat Mempermudah dan mempercepat bikin user flow atau membuat garis yang menghubungkan 1 objek ke objek lain Mengubah banyak warna dan font sekaligus Membuat chart, mendukung copas dari exel, sheet, remote JSON (REST API), csv, dan file JSON. Sekumpulan gambar, teks, ikon, bahkan avatar. Library berbagai ilustrasi sesuai kebutuhan. Mengubah desain yang memiliki skema warna terang menjadi gelap hanya dengan satu klik, tetapi masih belum optimal. Autoflow Batch Styler Blush Chart Content Reel Dark Mode Magic

12. Plugin yang bermanfaat Kumpulan ikon Mengkonversi website menjadi desain Figma Resize semua icon yang dipilih Perpustakaan ikon terbesar di plugin figma, 100.000 lebih ikon yang ada. Library pack yang berisi banyak emoji Meninjau tampilan responsive hanya melalui frame Figma. Feather Icons Figma to HTML, CSS, React & more! Figmoji Icon Resizer Iconify Breakpoints

13. Plugin yang bermanfaat Membuat isometric layer tanpa harus diatur manual Membantu membuat user flow Membuat peta Menghapus backgorund Memasukkan animasi dalam desain yang kita miliki. Dapat impor animasi SVG atau GIF Membuat gradien Isometric Draw Connector LottieFiles Mapsicle Remove BG UIGradients

14. Plugin yang bermanfaat Mengatur skala teks dengan cepat Mengimpor banyak gambar dalam dengan satu klik Unsplash Typescale

15. Matur Nuhun