Antara ahli Sketch atau baru di Sketch , desainer akan menemukan bahwa membuat panduan gaya di Sketch dapat menjadi sumber daya berharga untuk kotak peralatan desain mereka yang dapat menghemat banyak waktu.

Panduan gaya tidak hanya membantu menjaga hal-hal tetap konsisten, tetapi juga memungkinkan pembaruan untuk elemen-elemen seperti warna dan ikon di banyak dokumen dengan lebih sedikit kerumitan. Tutorial ini berjalan melalui proses langkah-demi-langkah untuk menciptakan panduan gaya dan perangkat UI dan akan memberikan desainer pemahaman yang lebih baik tentang simbol Sketsa, referensi perpustakaan Sketsa untuk desain mereka, dan kepercayaan pada organisasi aset desain mereka.

Membuat Panduan Gaya Sketsa Anda

“Panduan gaya adalah ‘dokumen hidup’ yang komprehensif yang melacak semua elemen berulang untuk proyek, mulai dari aturan branding hingga jumlah beveling untuk tombol ajakan bertindak,” menurut UXPin . Panduan gaya dapat mencakup apa saja dari elemen visual sederhana hingga kosa kata dan citra yang disetujui. Tutorial ini mencakup organisasi, warna, ikon, font, gaya teks, dan aset.

Langkah Satu: Organisasi

1. Buat folder master untuk menyimpan file sketsa, plugin, dan aset lain yang diperlukan seperti font dan ikonografi. (Plugin akan didiskusikan di akhir tutorial.)
2. Mulai file Sketsa baru dan beri nama ” Perpustakaan Clientname .” Misalnya, jika klien Anda adalah Toptal maka file Anda harus dinamai “Perpustakaan Toptal.”

Langkah Dua: Warna

Jika warna telah dipilih, langkah selanjutnya adalah mengubah warna Anda menjadi simbol.

1. Untuk melakukan ini, buat kotak dengan ukuran yang sama dan ubah warnanya. Klik “Buat Simbol” dan simpan elemen-elemen ini menggunakan sistem pelabelan nama warna / @ warna . Warna / @ merah muda , warna / @ latar belakang abu-abu , atau warna / @ FFFFF adalah contoh label yang tepat. Konvensi penamaan penting dalam menjaga panduan gaya terorganisir, jadi format untuk semuanya harus ditetapkan dan dipatuhi sejak awal.
2. Setelah selesai, tambahkan ke halaman panduan gaya.
3. Simpan carikan warna di bagian dokumen palet warna Anda.

Cara pintas yang bermanfaat: Alat R – persegi panjang, alat T – teks, jarak alt – ukur.

Langkah Tiga: Ikon

Mengubah ikon menjadi simbol dinamis memungkinkan warnanya mudah diubah ke salah satu warna yang disimpan di Langkah Dua di atas. Ini berarti bahwa setelah ikon ditempatkan ke dalam desain, warna dapat diubah melalui menu dropdown sederhana, yang disebut ‘override,’ menggunakan ‘Inspektur’ di sebelah kanan kanvas.

1. Simpan ikon sebagai simbol (tetap ke .svg untuk jenis aset jika memungkinkan).
2. Pergilah ke halaman simbol, temukan ikonnya, dan tutupi dengan warna default dari warna yang sebelumnya disimpan. Untuk melakukan ini, overlay simbol warna di atas ikon dan klik “Mask” di toolbar (atau klik kanan dan pilih “Mask” dari menu pop-up).
3. Setelah ikon ditutup, hapus isian dengan menghapus centang pada kotak di bawah bagian “Mengisi” di Inspektur.
4. Atur ikon di halaman panduan gaya. Di bagian yang sama, sangat membantu untuk menentukan warna untuk ikon yang aktif dan tidak aktif, ditambah spesifikasi warna penting lainnya.

Langkah Empat: Gaya Teks

Setelah font dipilih, saatnya menentukan gaya teks: H1, H2, H3, H4, H5, body, tautan, keterangan, label, dll. Referensi yang baik untuk tipografi web adalah posting blog ini berdasarkan Typecast.

1. Pilih ukuran, berat, karakter, dan penspasian garis untuk sebanyak mungkin gaya yang diperlukan.
2. Menulis kata (“Ketik Sesuatu” secara otomatis muncul ketika Anda menekan T, alat teks) dan memformatnya untuk mencerminkan detail gaya yang dipilih.
3. Klik “Buat Gaya Teks baru.”
4. Atur gaya teks di halaman panduan gaya.

Langkah Kelima: Aset

Sekarang untuk bagian yang menyenangkan. Saatnya menggabungkan semua langkah sebelumnya untuk membuat beberapa aset. Jika aset telah dibuat, untuk konsistensi, yang terbaik adalah membuatnya kembali menggunakan gaya teks, ikon, dan warna yang telah Anda pilih. Misalnya, mungkin ada banyak warna abu-abu yang berbeda dalam dokumen desain kerja yang belum diperhitungkan oleh desain, sehingga menciptakan kembali aset akan menjamin konsistensi warna yang dipilih. Jangan lupa untuk tetap konsisten dengan penamaan, dan pastikan untuk menambahkan aset ke halaman panduan gaya saat dibuat.

Berikut adalah beberapa aset yang disarankan untuk dikerjakan:

Tombol

1. Buat simbol-simbol dinamis ini, seperti halnya ikon, dengan menutupi tombol dalam warna default dan menghapus isian.
2. Agar teks tetap terpusat setiap saat, span lebar kotak teks agar sama dengan tombol dan pusatkan teks.
3. Untuk memastikan konsistensi, pastikan untuk menggunakan gaya teks yang disimpan.
4. Simpan elemen-elemen ini sebagai simbol menggunakan sistem penamaan tombol / nama-tombol .
5. Gunakan fitur ganti untuk mengubah label dan warna.

Cari Bilah

1. Menerapkan batasan pengubahan ukuran untuk bidang pencarian, dan ikon dan teks yang digunakan dalam bidang itu sendiri.
2. Jangan lupa tentang menerapkan gaya dan warna teks yang sebelumnya disimpan dalam palet warna dokumen Anda.
3. Simpan elemen ini sebagai simbol menggunakan pencarian sebagai judul, atau jika Anda memiliki berbagai jenis pencarian, patuhi sistem pelabelan seperti pencarian / standar dan pencarian / tidak-ikon .

Tombol dan Kotak centang Radio

1. Dimungkinkan untuk memiliki simbol di dalam simbol, dan cara yang baik untuk mengujinya adalah dengan membuat tombol radio dan aset kotak centang yang cerdas.
2. Pertama, buat aset tombol itu sendiri. Simpan elemen ini sebagai simbol menggunakan kotak centang / dipilih dan centang / hapus pilihan sebagai contoh label.
3. Sekarang buat input. Tambahkan teks placeholder di sebelah simbol kotak centang dan kemudian konversi seluruh aset menjadi simbol. Karena ini sekarang merupakan input, disarankan untuk menyimpan aset seperti itu, sehingga label yang baik akan menjadi input / kotak centang / dipilih dan input / kotak centang / tidak dipilih .

Langkah Enam: Gunakan Panduan Gaya!

Melakukan semua pekerjaan ini untuk membuat panduan gaya hanya berguna jika itu benar-benar membuat proyek berjalan lebih lancar. Setelah semua aset telah dibuat, saatnya untuk menerapkan perpustakaan ke dokumen yang sedang dirancang. Di Sketsa, buka “Preferensi -> Tambah Perpustakaan …” dan tambahkan dokumen perpustakaan.

Setelah Anda menambahkan perpustakaan ke file desain proyek Anda, Anda dapat mengakses perpustakaan dan simbol-simbolnya di bagian simbol. Anda akan melihat pustaka Desain iOS UI yang datang dengan Sketch sebagai opsi pustaka, serta pustaka yang baru saja diimpor.

Jika Anda ingin memperbarui simbol, klik dua kali pada simbol itu sendiri dan dokumen perpustakaan Anda akan muncul. Setelah Anda membuat perubahan, kembali ke dokumen desain dan klik tombol pembaruan di sudut kanan atas.

Bonus: Mengimpor / Mengekspor Gaya Teks

Gaya teks tidak disimpan dengan pustaka, tetapi plugin Gaya Teks Bersama untuk Sketsa memecahkan itu. Setelah mengunduh plugin, buka dokumen perpustakaan dan kemudian ke menu: “Plugins -> Shared Text Styles -> Export …” Simpan file ini di folder yang sama dengan dokumen perpustakaan Anda. Kemudian, dalam dokumen desain Anda buka lagi menu: “Plugin -> Gaya Teks Bersama -> Impor Gaya Teks …” dan impor file yang baru saja Anda simpan. Gaya teks Anda akan muncul.

Bonus: Mengimpor / Mengekspor Palet Warna

Mirip dengan gaya teks, warna dokumen tidak menabung dengan perpustakaan Sketch, tetapi plugin Sketch Palettes memecahkannya. Sama seperti di atas, ekspor palet menggunakan “Plugin -> Sketsa Palet -> Warna Dokumen -> Simpan Palet” dan impor dengan “Plugin -> Palet Sketsa -> Warna Dokumen -> Muat Palet.” Ingatlah untuk menyimpannya di folder yang sama dengan dokumen perpustakaan Anda yang lain.

Bonus: Font

Craft by InVision adalah seperangkat plugin yang membawa perangkat lunak Sketch ke tingkat berikutnya. Craft memungkinkan Anda untuk mengganti gambar dengan stok foto, prototipe dan sinkronisasi ke InVision, membuat perpustakaan, dan banyak lagi. Jika Craft diunduh, tekan “cmd-shift-c” dalam dokumen dan stylesheet akan dihasilkan. Font akan terdaftar di sini.

Mengikuti enam langkah yang diuraikan di atas akan membuat proyek desain besar dan kecil berjalan lebih lancar dan hasil akhirnya akan lebih halus. Jika mereka unik atau sangat spesifik, panduan gaya, Perpustakaan, dan kit UI dapat digunakan untuk satu klien, atau untuk banyak proyek jika elemen UI standar terus-menerus dibuat, seperti gambar rangka dan prototipe. Mencurahkan waktu, pada awalnya, untuk membuat komponen UI Sketsa ini dengan benar akan menghemat banyak waktu, dan berpotensi di banyak proyek.

sumber: toptal.com