Tutorial Figma — Membuat Animasi Button Upload
Hai, apa kabar? Selamat datang di tutorial membuat animasi dengan figma. Kali ini saya akan mencoba membuat tutorial animasi button upload yang terinspirasi dari Mauricio Bucardo di Instagram (video diatas) , semoga tutorial yang saya buat ini mudah dimengerti, langsung saja simak yaaa.
Pertama, Siapkan Asset.
Dari video diatas setelah Saya analisa secara kasar, inputan & button-button yang Saya buat seperti gambar dibawah ini:
Info Tambahan Jika Ingin Persis Seperti Asset Saya:
Font
· Font size: 32
· Font color: #000, #fff
Button & Input
· Width: 658px (long), 183px (short)
· Height: 132px
· Radius: 16
· Color: #F29456 (upload & uploading), #202F3F (complete), #FAFDF9(document.pdf)
Struktur Komponen
Kedua, Menyusun Asset.
Menata & mengelompokkan Input Document dengan Button Upload menjadi satu grup sehingga menjadi seperti ini:
Kemudian sembunyikan Button Complete & Uploading dengan cara masking yaitu membuat sebuah rectangle atau persegi berukuran (658 x 132)px [ukuran sama dengan button dan inputan], setelah itu posisikan sejajar dengan Button Complete & Uploading dan kemudian ubah posisi komponen rectangle menjadi dibawah masing-masing button (lihat gambar dibawah):
Kemudian select masing-masing komponen dan lakukan masking, bisa dengan Ctrl + Alt + M atau dengan klik kanan kemudian pilih Use as Mask.
Maka hasilnya akan seperti ini:
Secara tampilan tidak ada yang membedakan masih belum menghilang, karena disini kita posisikan terlebih dahulu setiap komponen yang sudah di masking.
Setelah itu akan kita ubah ukuran rectangle dari Button Uploading, ubahlah menjadi sama atau lebih kecil dari ‘Button Upload’.
Letakkan Button Uploading yang sudah dimasking sejajar dengan Input Document, maka hasilnya seperti ini:
Kemudian text uploading posisikan kebawah, hingga tidak terlihat:
Pada bagian ini sudah selesai, Kita lanjutkan dengan Button Complete, caranya sama dengan mensejajarkan pada Input Document, dan Kita letakkan paling atas, disini bedanya kita buat komponen maskingnya menjadi kecil sehingga Button nya tidak terlihat tapi sebenarnya ada, lihat gambar berikut:
Ketiga, Pembuatan Animasi.
Untuk membuat animasi Kita menggunakan Smart Animate bawaan dari Figma itu sendiri, langsung saja:
Duplikat Frame/Artboard kemudian artboard pertama Kita select group upload document yang telah Kita buat, atau bisa juga artboard nya sehingga ketika frame/arboard nya kita klik akan memulai animasinya. Tetapi di tutorial ini menggunakan group upload document nya yaaa.
Pada Arboard “Langkah 1” Kita setting “Prototype” nya seperti ini:
Lanjut untuk animasi berikutnya “Langkah 2” ke “Langkah 3" Kita ubah ukuran“orange bg”, perlu diketahui “orange bg” merupakan komponen penyusun dari Button Uploading.
Kalian bisa coba jalankan animasinya, ini baru langkah pertama dalam pengaturan animasinya. Selanjutnya Kita akan duplikat Artboard “Langkah 2” maka akan menghasilkan Artboard “Langkah 3".
Pada Arboard “Langkah 3” Kita buat “orange bg” memenuhi inputan bersamaan dengan menghilang keatas text “Document.pdf” & “Upload” dan munculnya text “Uploading…” dari bawah.
Langsung saja simak gambar dibawah ini:
Maka hasilnya seperti ini:
Dan untuk animasinya atau prototype nya, pada “Langkah 2” ke “Langkah 3" yang di select atau pilih harus frame/artboard nya bukan button, karena Kita akan menggunakan “After Delay”, cek gambar berikut:
Lanjut, Kita akan menampilkan animasi “Button Complete”.
Duplikat artboard “Langkah 3” maka akan menghasilkan artboard “Langkah 4”, kemudian atur “Langkah 4” dengan menyimak gambar dibawah ini:
Setelah itu seperti biasa Kita buat animasinya dengan select “Langkah 3” ke “Langkah 4”.
Setelah itu pengaturan prototype nya seperti ini:
Kita lanjutkan lagi seperti biasa duplikat artboard “Langkah 4” sehingga menghasilkan “Langkah 5”, dan Kita atur seperti ini:
Setelah itu Kita membuat satu kotak / rectangle dengan ukuran sama atau lebih besar dari icon “done”, posisikan dibawah komponen icon dan lakukan masking, lihat gambar dibawah:
Jika sudah maka akan ada perubahan juga pada artboard “Langkah 4”, perubahannya yaitu sama seperti yang kita lakukan pada “Langkah 5”, bedanya pada artboard “Langkah 4” kotak / rectangle nya tingginya diturunin, lihat gambar:
Hasil dan pengaturan animasinya seperti ini:
Selanjutnya duplikat artboard “Langkah 5” sehingga menghasilkan “Langkah 6” dan setting “Button Complete” pada “Langkah 6” dengan menurunkan masking nya.
Kemudian pada grup “Button Uploading…” Kita hidden seperti ini:
Setelah itu kembalikan seperti semula text “Document & Upload”.
Untuk animasinya:
Dan terakhir memberi animasi dari artboard “Langkah 6” ke “Langkah 1”. Caranya seperti biasa pada prototype tarik arboard “Langkah 6” ke “Langkah 1” dan setting nya seperti ini:
Hasilnya, klik disini Animasi Final.
Sekian dari Saya mohon maaf jika ada salah perkataan, jika ingin bertanya bisa langsung cek di Instagram Saya (ig/rvldiprtma).
