Skip to main content
Anda telah memahami apa itu Design System dan segudang manfaatnya. Anda juga telah mengetahui salah satu contoh Design System yang terkenal dari Google, yakni Material Design. Nah, sekarang kita akan membuat sebuah Sticker Sheet atau yang biasa juga disebut dengan Design Kit. Sticker Sheet adalah sebuah halaman yang berisi kumpulan elemen yang bisa digunakan kembali dan merupakan salah satu bagian dari Design System. Lalu, mengapa ia disebut dengan Sticker Sheet? Hal ini karena ia seperti stiker yang bisa Anda tempelkan di mana saja dengan cara copy paste. Dengan adanya Sticker Sheet ini, akan memudahkan Anda menciptakan konsistensi ketika menciptakan halaman-halaman lain. Ia juga dapat membantu desainer yang baru bergabung untuk menyesuaikan diri. Sehingga, desainer bisa lebih cepat dalam mendesain aplikasi yang sesuai dengan brand perusahaan. Berikut adalah langkah-langkah dalam membuat Sticker Sheet:
  1. Buka kembali project mockup aplikasi yang sudah Anda buat sesuai dengan studi kasus Anda sebelumnya. Anda juga bisa menggunakan project kedai kopi berikut sebagai latihan:
    Mockup Aplikasi Pemesanan Kopi
  2. Identifikasi elemen-elemen yang biasa digunakan kembali, seperti tipografi, warna, dan Components yang sering dipakai.
  3. Buat sebuah Frame (F) baru dengan nama Sticker Sheet.

​
Membuat Sticker Sheets untuk Tipografi dan Warna

  1. Tuliskan judul bagian dengan memberi Underline (Ctrl+U) dan beberapa isinya seperti ini:
    dos:f8ddcf29be25fdd91930fb457f95dd8420211007141445.jpeg
    Anda cukup membuat teks keterangan yang sesuai dengan nama style yang sudah dibuat sebelumnya dalam satu tempat. Untuk melihat style yang sudah dibuat, klik di luar kanvas dan lihat daftar style yang muncul pada panel sebelah kanan.
    dos:8cd7c2259c06c467b12a1b5e6c77125c20211007142402.jpeg

​
Membuat Sticker Sheets untuk Components

  1. Selanjutnya untuk Components, kita akan memisahkan setiap bagiannya, seperti Cards, Button, Chip, dan Navigation. Kemudian untuk memisahkan dan memindahkannya, Duplicate (Ctrl+D) terlebih dahulu Component tersebut dan pindahkan Main Component (bukan instance) ke bagian Sticker Sheet. Untuk mengetahui mana yang Main Component dan mana yang Instance, lihat kembali ikon pada Layer yang ada di panel sebelah kiri.
    dos:518d914faf5da3935f98ff62c7bc979320211007142635.gif
  2. Lakukan hal yang sama pada Component lainnya seperti ini:
    dos:6d26caa7445915c2043d3e0b326c9b1520211007141447.jpeg
    Dengan memindahkan seluruh Main Component ke dalam Sticker Sheet, ketika terdapat perubahan pada Components, Anda cukup menggantinya pada Frame ini saja.

​
Tips Mengelompokkan Component

  1. Tahukah Anda? Kita dapat mengganti instance ke Component lain dengan cepat memanfaatkan fitur Swap Instance. Berikut contohnya:
    dos:7e9f203df373913f4ca6d08d2f99512f20211007142955.gif
    Untuk itu, memberi nama pada sebuah Component adalah hal yang penting karena dapat memudahkan Anda ketika ingin menukar instance.
  2. Selain pemberian nama, ada satu hal lagi yang dapat membuat proses ini menjadi lebih efektif, yaitu mengelompokkan Component. Caranya yaitu dengan mengubah namanya dengan menggunakan awalan kata yang sama. Contohnya adalah Button/Button1, Button/Button2, dst. di mana setiap Component di awali dengan Button/. Sebagai contoh, berikut ini adalah cara mengelompokkan tiga komponen tombol yang saling berkaitan:
    • Pilih ketiga elemen
    • Klik kanan → Rename (Ctrl+R)
    • Isi Button/ pada kolom Rename to dan klik Current name untuk menambahkan nama yang sebelumnya di belakang tulisan Button/.
    • Klik tombol Rename dan ketiga elemen akan terganti menjadi Button/Toggle Button, Button/Outlined Button, dan Button/Contained Button.
      dos:bb2e1141c1921605509229269f08653a20211007143255.gif
      Efeknya yaitu ketika Anda ingin Swap instance, akan otomatis muncul component yang satu kelompok saja. Jadi lebih fokus, bukan?

​
Tips Membuat Variants

  1. Apabila suatu komponen memiliki state (status) yang berbeda, alih-alih membuat Component baru, Anda dapat membuat Variant saja. Caranya yaitu pilih Component → klik tombol tambah (+) pada property Variant → beri nama variant → ubah Component sesuai kebutuhan.
    dos:5abae35f017dc7dfabaa544e6453adf620211007143411.gif
    Berikut ini adalah hasil jadi dari Variant pada panel Layer:
    dos:51729efea1b40a830e7c04ac2338c66120211007143440.png
  2. Untuk menggunakannya, Anda cukup memilih variant pada panel sebelah kanan seperti ini.
    dos:758cf9589fd92b0a5467153546e1c23120211007143531.gif
    Cara ini lebih simpel daripada Swap instance, bukan?

​
Tips Memindahkan Frame ke Page Baru

  1. Terakhir, Anda akan memindahkan satu Frame Sticker Sheet ke suatu page (halaman) baru. Fungsinya yaitu supaya lebih terfokus dan bisa dipakai di halaman lain juga. Caranya yaitu buat terlebih dahulu page baru dengan nama Sticker Sheet menggunakan ikon tambah (+) yang ada di sebelah kanan properti Pages.
    dos:2d18901e119bd195048edaaf146bcbd420211007141445.jpeg
  2. Kemudian pilih layer, dan klik kanan → Move to page → Sticker Sheet.dos:3b4203058b720c05997013a19a42964c20211007141445.jpeg
Hore! Sebuah halaman Sticker Sheet sudah selesai. Anda dapat memanfaatkan halaman tersebut untuk proses desain ke depannya. Mantap!