Dwinawan
Dwinawan
Sep 8, 2018 · 3 min read

Pada artikel kali ini kita akan membahas tentang tools bernama principle untuk membuat animasi seperti gambar diatas.

Kalian bisa mendownload principle melalui link berikut http://principleformac.com/

Kalian bisa mencoba principle secara gratis selama 14 hari. Tapi hari yang dihitung adalah hari saat kalian menggunakannya. Jadi, jika kalian mendownload lalu menginstal nya dan selama 14 hari tidak kalian gunakan, maka kuota 14 hari kalian masih berlaku.


Mari kita mulai!

Untuk latihan awal, kita akan membuat animasi seperti dibawah ini.


1. Buka aplikasi principle Anda


2. Klik tombol “Rectangle” untuk membuat kotak


3. Taruh kotak di tengah, lalu resize agar lebih besar


4. Duplicate Artboard

Klik kanan pada artboard, lalu pilih Duplicate Artboard. Anda akan memiliki dua artboard yang sama persis.

Shortcut untuk fungsi duplicate adalah [Command] + [D]

Kalian bisa mengecilkan tampilan artboard dengan menekan [Command] + [-]


5. Mengubah warna pada kotak di Artboard 2


6. Memberikan Trigger

Select kotak berwarna hijau di artboard 1, lalu klik tanda petir di sebelahnya


Dengan menekan tanda petir akan memunculkan beberapa trigger. Kita akan memilih trigger “Tap”


Klik tahan pada opsi “Tap” lalu drag ke artboard 2


Jika kalian berhasil menghubungkan artboard 1 ke artboard 2 maka akan terdapat anak panah di atas artboard dengan informasi jenis trigger nya


7. Berikan trigger untuk kotak merah di Artboard 2

Lakukan hal yang sama untuk kotak merah di artboard 2, pilih opsi “Tap” lalu arahkan ke Artboard 1. Sehingga kalian akan mendapatkan hasil seperti dibawah ini


8. Cobalah animasi nya

Beralihlah ke layar kecil di sebelah kanan, dan coba klik pada bagian kotak nya. Dan selamat!, kalian telah berhasil membuat animasi menggunakan principle


What’s Next?

Pada artikel berikutnya kita akan mencoba membuat animasi seperti dibawah ini.


Mohon ditunggu artikel berikutnya :)

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co Founder @ Paperpillar and @ Insight Design — Designer and Story Teller

Insight

Insight

UI, UX, Bisnis Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade