Interactive Card Slider dengan Principle App — Episode 2

Published in

UNIKOM Codelabs

5 min readJul 31, 2019

Hallo, pada kesempatan kali ini saya akan memperlihatkan proses membuat motion interaksi card slider dengan Principle. Sebelumnya saya sudah pernah membuat tutorial tentang motion animasi menggunakan aplikasi Principle. Bagi yang belum membacanya silahkan klik artikel dibawah ini 👇👇👇

Tutorial Motion Animasi dengan Principle App — Episode 1

Pengenalan tool Principle App dalam membuat motion animasi rapid prototyping agar desain interaksi kalian semakin kece…

medium.com

Apa itu card slider? Card slider biasanya digunakan untuk menampilkan informasi penting pada suatu halaman dengan bentuk seperti kartu (biasanya terdapat gambar, title, subtitle, detail). Oke, langsung saja kita akan membuat card slider seperti ini:

Persiapan…

Untuk assets UI, saya membuatnya menggunakan Sketch. Kalian bisa download assets UI-nya disini 👇👇👇

Medium - Google Drive

Edit description

drive.google.com

1. Assets UI dari Sketch file
Buka file GameCardSlider.sketch yang sudah kalian download dan tampilannya seperti ini.

Biarkan aplikasi Sketch tetap terbuka, karena kita akan meng-export file Sketch ke Principle.

2. Export Sketch ke Principle
Selanjutnya buka aplikasi Principle kalian, jika sudah terbuka, pilih tombol Import > pilih Document GameCardSlider > Klik Import Page.

Okay, file Sketch sudah berhasil di export ke Principle.

Ayo Mulai!

Setelah semua sudah disiapkan, kita mulai buat motion interaksinya. Dasar animasinya seperti ini.

Ketika card-nya mulai digeser, warna background-nya berubah, setiap card yang digeser memiliki warna background yang berbeda-beda.

1. Struktur layer pada Principle

Kita lihat, ada tiga artboard pada tab layer yaitu Page 1, Page 2 dan Page 3. Setiap page memiliki struktur penamaan yang sama. Jika dilihat strukturnya seperti ini:

Page (artboard)

navbar
card-item (1, 2 dan 3)
bg-slider (1, 2 dan 3)

2. Pindahkan bg-slider1 dan bg-slider2 ke dalam artboard page1

3. Drag dan pindahlan card-item2 dan card-item3 ke dalam artboard page 1

4. Atur jarak setiap card item menjadi seperti ini

Pastikan setiap card-item berada pada layer artboard page1

5. Hapus artboard page2 dan page3, kamudian struktur layer-nya menjadi seperti ini

6. Pilih card-item1, card-item2 dan card-item3, kemudian jadikan satu group dengan cara “Command+G”

Setelah dibuat satu group, rename group tersebut menjadi “card-slider” kemudian struktur layer-nya bisa kalian lihat seperti pada gambar. Jika kita lihat, pada group card-slider ada frame yang membungkus semua card. Itu menandakan bahwa semua card sudah menjadi group.

7. Pilih group “card-slider” kemudian ubah behavior interaksinya menjadi “Page”

Behavior page berfungsi untuk menambahkan efek interaksi pada card-slider sehingga dapat di swipe dengan arah horizontal (ke kiri dan ke kanan). Terdapat beberapa behavior yaitu:

Static — tidak ada interaksi yang dibuat
Drag — memberikan efek interaksi sehingga dapat digeser
Scroll — memberikan efek interaksi dapat discroll seperti pada sebuah halaman
Page — memberikan efek interaksi berupa perpindahan halaman.

8. Kita coba interaksi animasinya

Untuk mencoba animasinya kalian bisa memilih tombol “Show Preview” atau menuju area Window Preview.

Animasi card slider-nya belum selesai, terlihat card-nya seperti “stuck” atau tidak bisa digeser secara leluasa. Itu disebabkan karena frame group card-slider terlalu besar dan melebihi ukuran layar device-nya.

9. Ubah ukuran lebar frame card-slider seperti ini

Jika dicoba kembali, animasinya akan seperti ini:

Sekarang tinggal menambahkan efek interaksi background ketika card di swipe.

10. Interactive state dengan “Drivers”

Drivers ini merupakan salah satu fitur yang ada pada Prnciple. Drivers berfungsi untuk membuat interaksi state pada kondisi tertentu. Kita akan mengubah background ketika card di swipe seperti ini.