1. Autoflow

2. Batch Styler

3. Blush

4. Chart

5. Figma to HTML, CSS, React & more!

 

Capaian Pembelajaran:

1. Mahasiswa mampu menggunakan widget dan plugin di Figma untuk mempercepat proses desain.
2. Mahasiswa mampu mengelola Figma Community untuk belajar dan berinteraksi dengan desainer lain serta mengembangkan keterampilan desain.
3. Mahasiswa mampu mengimplementasikan pengetahuan dan keterampilan yang telah dipelajari ke dalam proyek desain yang dibuat.

-------------------------------------------------------------------------------------------

Halo Explorers, gimana kabarnya? Setelah belajar teknik dasar figma, maka disini kita belajar mengenai widget dan plugin dalam figma dan figma community untuk berinteraksi dengan desainer lainnya.

 

WIDGET

Widget merupakan objek khusus yang dapat ditambahkan pengguna ke halaman editor atau Fig Jam. Tidak seperti plugin yang hanya dapat dilihat oleh individu, widget adalah objek yang dapat dilihat oleh semua orang dalam sebuah file.
Jika Anda membuat widget dari file FigJam, Anda dapat memilih template widget untuk membuat widget untuk pengembangan. Berikut langkah-langkahnya:

1. Open a file on the Figma desktop app.
2. Open the Create widget modal.

●     Right-click the board or canvas> Widgets > Development > New widget.

●     Or open the file menu > Widgets > Development > New widget.

3. Di modal Buat widget, beri nama widget Anda dan pilih produk yang akan dikembangkan untuk:

●     Desain Figma + FigJam: Buat widget universal yang berfungsi untuk kedua produk.

●     Desain Figma: Pilih ini untuk membuat widget hanya untuk desain Figma.

●     FigJam: Pilih ini untuk membuat widget hanya untuk FigJam.

4. Di Modal widget Buat, beri nama widget Anda dan pilih template:

●     Kosong: Batu tulis kosong tempat Anda dapat membuat widget dari nol.

●     Widget sederhana: Gunakan template ini untuk membuat widget yang dapat langsung diklik pengguna untuk melakukan tindakan. Cara termudah untuk memulai.

●     Dengan API iFrame & browser: Gunakan template ini jika Anda ingin pengguna berinteraksi dengan widget Anda di jendela iFrame, yang juga menyediakan akses ke browser dan API pihak ketiga.

5. Klik simpan dan figma akan meminta Anda untuk memasukkan nama dan memilih lokasi di komputer Anda untuk menyimpan kode sumber widget Anda. Klik Simpan untuk mengonfirmasi unduhan.

Sekarang kalian dapat mengakses widget Anda dari Widget > Pengembangan di file Anda. Anda akan melihat nama widget Anda muncul di menu ini.

 

Plugin

Plugin: Figma menyediakan fitur plugin yang dapat digunakan untuk menunjang kebutuhan desain kamu yang berupa icons, chart, diagrams, dan masih banyak lagi

Berikut beberapa contoh plugin dalam figma:

1. Autoflow

Autoflow adalah plugin terbaik untuk membuat user flow yang mudah dan cepat. Kita bisa membuat user flow dalam waktu singkat hanya dengan membuat bentuk dan menghubungkannya.

2. Batch Styler

Batch Styler adalah plugin yang bisa kita gunakan untuk mengubah banyak warna dan font sekaligus. Plugin ini akan menghemat banyak waktu dengan mengubah seluruh design system yang kita punya dengan hanya satu klik.

3. Blush

Blush adalah library tempat kita dapat mengunduh dan menyesuaikan ilustrasi sesuai dengan kebutuhan kita. Bagian terbaiknya adalah plugin ini gratis dan tidak perlu berlangganan premium apa pun untuk mengunduh atau menggunakan ilustrasi dalam desain kita.

4. Chart

Chart ialah plugin Figma yang menggunakan data random beneran untuk membuat grafik dan bagan. Chart mendukung copy-paste (salin tempel) dari editor seperti Microsoft Excel, Google Sheets, remote JSON (REST API), file CSV dan file JSON.

 

 

 

 

5. Figma to HTML, CSS, React & more!

Salah satu plugin yang banyak digemari orang-orang karena kita bisa mengkonversi website apapun menjadi desain Figma hanya beberapa klik saja. Bayangkan kita bisa bisa menjiplak beberapa bagian dari website dan menggunakannya sebagai komponen desain kita.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figma Community

Figma Community adalah platform online yang disediakan oleh Figma untuk berbagi, menemukan, dan berkolaborasi dengan desain yang dibuat oleh pengguna lain di seluruh dunia. Figma Community memungkinkan para desainer untuk mengunggah dan membagikan file desain, komponen, template, plugin, dan sumber daya desain lainnya kepada komunitas Figma yang lebih luas. Dalam Figma Community, Anda dapat menelusuri berbagai koleksi desain yang dibuat oleh desainer lain, mencari template yang dapat Anda gunakan sebagai titik awal untuk proyek Anda, atau bahkan mengimpor komponen yang telah dibuat oleh desainer lain ke dalam dokumen Figma Anda sendiri.

 

Figma Community juga memungkinkan Anda untuk berinteraksi dengan desainer lain melalui komentar, memberikan saran, atau memberikan umpan balik terhadap karya mereka. Hal ini memungkinkan kolaborasi dan pertukaran pengetahuan antara desainer dalam komunitas. Selain itu, Figma Community juga merupakan tempat di mana pengembang dapat membagikan dan mengunduh plugin untuk Figma. Plugin memungkinkan pengguna untuk menambahkan fungsionalitas khusus ke dalam Figma, seperti alat validasi desain, pembuatan prototipe otomatis, atau integrasi dengan alat dan layanan lainnya.

 

 

 

 

 

 

 

Berikut cara menggunakan figma community:

1. Pada tab pojok kiri pilih community untuk berpindah dari pribadi.

 

2. Kalian akan dibawa ke halaman figma community sebagai berikut. Kalian juga dapat memilih desain apa yang akan kalian buat.

 

 

 

 

 

 

3. Disini saya memilih desai systems untuk bergabung.

 

4. Setelah memilih salah satu maka desain yang ada dapat dibuka pada halaman figma kalian.

 

 

Tugas:

Carilah 5 plugin yang tersedia dalam figma dan sertakan contohnya!