Figma adalah alat desain antarmuka dan prototyping berbasis browser yang memungkinkan kolaborasi real-time antara desainer. Figma menawarkan berbagai fitur seperti prototyping interaktif, sistem desain, dan dukungan untuk plugin yang memperluas fungsionalitasnya. Alat ini juga dilengkapi dengan berbagai panel dan sidebar untuk mengelola elemen desain, berkolaborasi, dan mengatur proyek.

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?
1. 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
2. Prototyping: Figma memungkinkan para desainer untuk membuat
prototype interaktif pada desain mereka.
3. Sistem Desain: Figma memungkinkan para desainer untuk membuat
dan mempertahankan sistem desain.
4. 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. Selebihnya...

16. CREDITS: This presentation template was created by Slidesgo, and includes icons
by Flaticon, and infographics & images by Freepik
Thanks!
Please keep this slide for attribution