Cara Membuat Ikon Library dengan Sketch

Hari ini kita akan membuat ikon library dinamis di Sketch. Poses ini bisa menjadi cukup rumit, tapi kita akan menghemat banyak waktu dan tenaga dengan menggunakan plugin yang disebut Ikon Sketch. Mari kita selami!

Ikon Sketch

Ikon Sketch adalah plugin untuk Sketch yang memungkinkan kalian mengimport sekumpulan ikon, lalu secara otomatis mengatur pewarnaan. Mari kita lanjutkan bagaimana cara kerjanya.

1. Instal Plugin

Mulailah dengan mendownload plugin dan menginstal plugin. Saya pribadi suka menggunakan Runner untuk menginstal plugin Sketch saya. Jadi Anda bisa menggunakan metode itu juga jika Anda mau.

• Sketch
  Mempercepat Pengembangan Sketch mu Dengan Runner
  Adi Purdila

2. Deklarasikan Beberapa Warna

Mulai dokumen baru dan nyatakan beberapa warna. Lakukan ini dengan membuat beberapa artboard dan memberi mereka nama warna yang sesuai. Tempatkan bentuk pada masing-masing, dengan warna apa pun yang Anda inginkan, lalu ubah setiap papan tulis menjadi simbol. Anda harus berakhir dengan sesuatu seperti ini:

3. Import Beberapa Ikon

Saya akan mengimport beberapa ikon secara massal dengan membuka Plugins > Ikon Sketch > Import icons ... Ikon Sketch akan menanyakan ukuran apa yang saya inginkan untuk setiap artboard, sehingga dalam kasus ini saya tinggal setting artboards dari 24px dengan padding 3px. Saya juga memastikan bahwa checkbox dalam keadaan checked untuk mengonversi masing-masing simbol, dan tambahkan color mask juga checked.

Saat kita menggunakan color mask, kita diberi pilihan untuk mengambil warna awal dari pengambil warna, atau dari simbol di library kita sendiri. Seperti yang dapat anda lihat pada gambar di bawah ini, saya dapat memilih 3 simbol dalam dokunen saya saat ini - sempurna!

Setelah kami puas dengan setting, kami klik Continue dan lanjutkan untuk memilih file icon yang ingin kami import. Ikon Anda akan ditambahkan ke dokumen Anda, disusun dengan rapi di papan nama yang sesuai, dan tersedia sebagai simbol.

4. Menggunakan Simbol Ikon Anda

Jika Anda melihat lapisan pada gambar di atas, masing-masing simbol ikon pada dasarnya adalah lapisan warna, dengan ikon di bawahnya berfungsi sebagai mask.

Bila Anda menambahkan salah satu simbol ikon ini ke halaman di dokumen Anda, Anda dapat mengubah warnanya dengan menggunakan warna Override di sidebar kanan. Simbol warna yang sudah disiapkan tersedia dalam menu dropdown yang praktis.

Selain itu, jika Anda perlu mengubah warna yang Anda tetapkan sebagai simbol pada awalnya, Anda dapat membuka simbol itu, mengubah warna persegi panjang di dalamnya, dan perubahan itu akan tercermin di semua ikon yang terpengaruh dalam dokumen Anda.

5. Menyiapkan Icon library

Tapi mari kita bicara sedikit tentang membangun perpustakaan yang dinamis. Baru-baru ini kami menerbitkan tutorial tentang penggunaan Sketch libraries.

• Sketsa
  Cara Menggunakan Sketch Libraries: Kolaborasi Mudah Dibuat
  Adi Purdila

Perpustakaan ini membuat file Sketch tunggal yang tersedia secara global, termasuk semua simbol dan gaya bersama di dalamnya. Agar ikon Anda dijadikan bagian dari library, buka Preferences > Libraries > Add Library. Pilih dokumen ikon yang baru Anda buat dan akan ditambahkan ke daftar library Anda.

Sekarang Anda dapat membuat dokumen baru (jangan ragu untuk juga menutup dokumen ikon Anda) dan mintalah semua ikon, dengan warna mereka, tersedia untuk digunakan.

Kesimpulan

Plugin Ikon Sketch memberi kita fleksibilitas yang besar di mana pengelolaan ikon Sketch diperhatikan. Tutorial ini menggores permukaan dan telah memulai Anda ke arah yang benar; beritahu kami bagaimana nanti Anda bekerja dengan ikon di Sketch!

Dan sebelum saya undur diri, lihat beberapa set ikon yang tersedia di Envato Elements; semua siap dan menunggu untuk ditambahkan ke library ikon Sketch dinamis Anda!