Membuat Motion Design dengan Principle — Bag 1, Intro

Dwinawan
Insight
Published in
3 min readSep 8, 2018

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 :)

--

--

Dwinawan
Insight

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Have a question? find me on twitter.com/dwinawan_