Tutorial Pembingkai: Cara Membuat Prototipe Interaktif yang Menakjubkan

Lihatlah contoh prototipe di bawah ini. Ini dilakukan di Framer. Setelah tutorial ini, Anda akan dapat mulai membuat prototipe animasi menakjubkan Anda sendiri dalam waktu singkat.

Framer keluar dengan versi terbarunya seminggu yang lalu, dan pasar prototyping tidak akan pernah sama. Alat prototyping Framer dulunya sulit untuk dikuasai tetapi berguna sebagai perangkat lunak prototyping yang paling akurat dan tidak terbatas. Sekarang, hal-hal telah berubah. Framer kini hadir dengan fitur Desain + Kode + Kolaborasi, artinya Anda dapat membuat prototipe Anda langsung di dalam Framer, mengembangkan prototipe yang berfungsi penuh tanpa perangkat lunak pihak ketiga dan tanpa keterampilan pengkodean apa pun.

Di sini, saya akan mengajari Anda cara menggunakan kode Framer sederhana tanpa pengetahuan pengkodean sebelumnya. Anda akan belajar bagaimana menggabungkan fitur terbaik dari mode desain dan kode di Framer untuk membuat prototipe animasi dan interaktif. Jadi mari masuk ke tutorial ini dan ambil beberapa cuplikan kode kecil untuk meningkatkan prototipe Anda.

Dasar-dasar Pembingkai

Mari kita mulai! Buka saja framer.com dan unduh versi percobaan. Mereka memberi Anda dua minggu demo yang berfungsi penuh, dan percayalah, ini adalah waktu yang cukup untuk belajar banyak tentang perangkat lunak prototyping ini.

Setelah instalasi, Anda mungkin ingin melihat beberapa contoh yang mereka berikan dan bermain dengannya sedikit. Setelah selesai, saatnya untuk mulai membuat prototipe.

(Dalam tutorial Framer ini, saya akan berfokus pada pembuatan prototipe langsung di Framer.js. Anda juga harus tahu ada cara lain untuk memulai pembuatan prototipe di Framer. Misalnya, Anda dapat bekerja langsung dengan file Sketch. Saya akan membahas alur kerja itu di artikel lain.)

Pembingkai Baru – Mode Desain

Dalam artikel ini, kami akan membuat tiga prototipe keren dalam hitungan menit dengan penggunaan kode minimal: interaksi dasar, komponen gulir, dan komponen halaman

Versi terbaru dari Framer memiliki fitur baru yang hebat: mode desain. Ini memungkinkan Anda untuk bekerja dengan cara yang hampir sama seperti yang Anda lakukan di Sketch atau Figma. Anda dapat membuat lapisan vektor, mengimpor gambar, atau membuat dan memberi gaya pada lapisan teks. Semua ini menjadi sangat berguna ketika Anda ingin membuat prototipe dengan cepat tanpa aplikasi pihak ketiga.

Mari Membuat Desain Tipe Aplikasi

Di bagian pertama tutorial ini, kita akan menyiapkan taman bermain untuk prototipe Framer kita. Kami akan membuat desain tipe aplikasi, dengan tiga jenis lapisan yang berbeda: vektor, gambar, dan teks.

Langkah 1: Buat tombol dan latar belakang sederhana.

Untuk memulai desain Anda, pilih tab pertama—yaitu mode desain —dan tambahkan artboard, seperti di Sketch. Dalam tutorial ini, kita akan mengerjakan prototipe iPhone 7, jadi saya memilih preset ini sebagai ukuran artboard saya. Saya juga telah menambahkan isian latar belakang biru.

Selanjutnya, pilih rectangle tool dan buat bentuk berupa tombol bulat sederhana.

Langkah 2: Tambahkan kartu dengan gambar.

Metode kedua untuk menambahkan lapisan adalah fitur drag and drop . Anda dapat memilih file gambar apa pun dari komputer Anda, memasukkannya ke dalam Framer, dan menatanya menggunakan bilah sisi kanan. Saya menggunakan ilustrasi sederhana dan menatanya sebagai kartu.

Langkah 3: Tambahkan judul aplikasi.

Framer juga memungkinkan Anda untuk menambahkan lapisan teks. Sekali lagi, menatanya pada dasarnya sama dengan perangkat lunak grafis apa pun. Anda dapat memilih font, ukuran, perataan, spasi huruf, dan lainnya.

Langkah 4: Beri tahu Framer lapisan mana yang interaktif.

Kami memiliki satu langkah lagi sebelum memulai prototipe Framer kami. Kita hanya perlu memberi tahu Framer lapisan mana yang akan interaktif. Cukup klik titik di sebelah nama layer di dalam panel layer. Ada baiknya untuk memberi nama setiap lapisan dengan benar untuk digunakan lebih lanjut. Saya menamai kartu dan tombol lapisan saya.

Langkah 5 (Bonus): Tentukan warna global Anda.

Praktik yang baik adalah mendefinisikan beberapa variabel untuk keseluruhan prototipe. Anda dapat mengatur palet warna, tipografi, dan dimensi dasar yang akan Anda gunakan dari awal. Ini membantu menghemat waktu.

Saat Anda menyiapkan warna, beri nama saja di editor kode, dan berikan nilai HEX, RGB, atau RGBa setelah tanda “=” yang sesuai. Ingatlah untuk menyimpan semua variabel di bagian paling atas kode Anda.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Langkah 6 (Bonus): Menambahkan posisi relatif.

Dengan Framer baru, sangat mudah untuk menjaga prototipe Anda tetap responsif. Anda dapat mengatur posisi relatif dari mode desain , seperti yang ditunjukkan di bawah ini:

Berikut adalah daftar singkat properti yang berguna untuk menyelaraskan dan menghitung posisi lapisan secara langsung dalam kode. Anda dapat melakukan matematika yang diperlukan untuk menghitung posisi lapisan. Ini menjadi penting ketika Anda menambahkan interaksi nanti dan Anda ingin membuat prototipe Anda tetap responsif.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Sekarang Anda Sudah Siap—Ayo Mulai Proyek Kami

Kami telah membuat berbagai jenis lapisan Framer. Sekarang taman bermain interaksi kami siap digunakan.

Akhirnya! Bagian yang membosankan telah berakhir. Sekarang saatnya untuk beberapa desain interaksi.

Unduh seluruh prototipe di sini.

1. Membuat Interaksi Umpan Balik Tombol

Untuk merancang interaksi apa pun, kita membutuhkan pemicu untuk mewujudkannya. Ini bisa berupa apa saja: ketukan layar, akhir animasi, akhir pemuatan gambar, atau akselerometer ponsel Anda.

Langkah 1: Membuat acara untuk interaksi.

Kami akan tetap sederhana. Mari buat umpan balik tombol saat Anda mengetuknya, menggunakan perintah berikut:

 layerA.onTap (event, layer) ->

Framer baru saja menulis baris kode ini untuk Anda. Artinya, ketika Anda mengetuk lapisan tombol, sesuatu akan terjadi.

Langkah 2: Menambahkan animasi ke acara.

Mari kita mulai animasi setelah pemicu ini. Untuk melakukan ini, klik titik di sebelah layer tombol di panel layer, lalu pilih Add Animation . Saat Anda menambahkan animasi, Framer beralih ke mode pengeditan animasi. Anda dapat menskalakan, memindahkan, memutar, atau mengubah parameter lapisan apa pun:

Framer menambahkan beberapa baris kode lagi. (Jangan khawatir—Anda masih dapat mengedit animasi dengan panel animasi.)

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

Selamat! Anda baru saja membuat interaksi pertama Anda. Ini hanya berfungsi sekali sekarang, tetapi kami akan memperbaikinya. Alasan Anda dapat memicu animasi ini hanya sekali adalah karena tidak ada yang terjadi setelah animasi selesai. Kita harus mengatur ulang semua parameter setelah animasi pertama berakhir seperti sebelumnya.

Langkah 3: Mengatur ulang animasi.

Tambahkan acara lain, hampir seperti yang kita lakukan sebelumnya. Bedanya kita mencari event saat animasi berakhir:

Kali ini, kode yang ditambahkan oleh Framer akan terlihat seperti ini:

 button.onAnimationEnd (event, layer) ->

Jadi, ketika animasi pada layer tombol selesai, kita dapat menambahkan animasi berikutnya yang akan mengatur ulang parameter layer tombol :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

Itu dia! Kami sekarang memiliki umpan balik yang berfungsi setelah ketukan pada tombol kami.

2. Membuat Status Berbeda untuk Interaksi Lapisan Kartu

Ok, sekarang Anda tahu cara mendesain animasi dan memicunya. Lebih sering, Anda harus mendesain status lapisan yang berbeda. Anda dapat mendesain beberapa status dari lapisan yang sama dengan hanya mengubah beberapa parameter, seperti posisi, ukuran, atau opasitas.

Langkah 1: Menambahkan dan membuat status untuk lapisan kartu.

Cara menambahkan status pada kartu hampir sama dengan menambahkan animasi. Anda harus mengklik titik di sebelah lapisan kartu dan kemudian klik Add State . Sekarang Anda telah beralih ke mode edit status. Desain sesuka Anda:

Harap perhatikan indentasi kode. Itu harus dimulai dari baris pertama.

Saya telah merancang dua status berbeda untuk lapisan kartu saya:

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Langkah 2: Menambahkan acara.

Hanya ada satu langkah lagi untuk membuatnya bekerja. Kita harus membuat acara untuk mengubah status ini.

 button.onTap -> card.stateCycle()

Apa yang dilakukan adalah mengubah semua status lapisan satu per satu, setiap kali Anda melakukan tindakan. Jadi, dalam kasus kami, setiap kali kami mengetuk lapisan tombol , kami mengubah status kartu . Jika Anda ingin membuat lebih banyak status dan memicunya dengan benar, cuplikan di bawah ini akan bekerja lebih baik untuk Anda:

 button.onTap -> card.stateSwitch("b")

Cuplikan ini berguna saat Anda ingin memicu status lapisan tertentu.

Penyesuaian terakhir yang saya lakukan pada prototipe saya adalah perubahan kecepatan dan kurva animasi antar status:

 card.animationOptions = curve: Spring time: 0.8 

Ada lebih banyak lagi yang dapat Anda lakukan dengan acara , tetapi pada titik ini, Anda akan dapat membuat hampir semua interaksi dasar. Ini adalah salah satu dokumentasi tertulis terbaik yang pernah saya lihat.

Mempercepat Pekerjaan Anda di Framer: Components

Waktunya telah tiba untuk menambahkan komponen untuk mempercepat pekerjaan Anda. Untuk mendapatkan hasil maksimal dari tutorial ini mulai saat ini, unduh prototipe ini.

1. Komponen Pertama: Menggulir

Saya telah memodifikasi prototipe kami sedikit. Sekarang kami memiliki daftar di dalamnya, tetapi tingginya di atas resolusi layar. Kita harus membuat scrolling untuk dapat melihat seluruh daftar di prototipe.

Langkah 1: Membuat layer dan menyiapkan komponen.

Mari kita mulai dengan membuat layer dengan ketinggian lebih besar dari layar kita. Tandai lapisan ini sebagai interaktif dan beri nama daftar . Kemudian lompat ke mode kode. Kami tidak akan menggunakan bilah sisi kiri yang berguna kali ini. Mari kita atur seluruh layar kita agar dapat digulir:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Kode ini membuat area tak terlihat dengan lebar dan tinggi perangkat saat ini.

Langkah 2: Beri tahu Framer lapisan apa yang ingin Anda gulir.

Belum ada yang terjadi. Kita harus memberi tahu Framer lapisan mana yang harus dapat digulir. Untuk melakukan ini, kami menambahkan lapisan daftar kami ke komponen gulir:

 list.parent = scroll.content

Langkah 3: Mengunci gulir vertikal.

Kami diizinkan untuk menggulir sekarang, tetapi itu terjadi di semua arah. Kita harus mengunci scroll pada sumbu vertikal:

 scroll.scrollHorizontal = false 

Wow! Anda membuat gulir di dalam aplikasi Anda hanya dengan lima baris kode sederhana.

2. Komponen Halaman: Menggesek Layar ke Layar

Interaksi yang sangat populer untuk beralih antar layar adalah menggesek. Idenya di sini sangat mirip dengan komponen scrolling. Anda dapat mengunduh prototipe yang berfungsi di sini.

Langkah 1: Menyiapkan komponen.

Pertama, kita harus membuat "kotak" di editor kode tempat keajaiban akan terjadi:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

Pada titik ini, Anda harus terbiasa dengan semua kode di sini. Ini hanya pengaturan sederhana dari komponen dan areanya. Sekarang kita harus membuat beberapa lapisan untuk digesek.

Langkah 2: Membuat lapisan

Kami akan menggunakan desain prototipe pertama kami dan memodifikasinya sedikit. Alih-alih satu gambar kartu, kali ini saya mengimpor dua gambar.

Pada awalnya, kita harus membuat artboard dua kali lebih lebar. Di panel properti artboard, temukan lebar dan kalikan dengan dua (atau cukup tambahkan *2 ). Tempatkan kartu di samping satu sama lain, aktifkan dengan titik biru, dan beri nama dengan benar: card1 dan card2 .

Langkah 3: Menambahkan lapisan ke komponen halaman.

Di akhir kode kita di editor kode, kita harus menambahkan:

 card1.parent = page.content card2.parent = page.content

Itu berarti kita menambahkan lapisan ini ke komponen.

Komponen halaman sekarang siap digunakan!

kata akhir

Itu saja, Teman-teman! Saya harap Anda menemukan tutorial Framer ini berguna untuk memulai perjalanan Anda dengan alat prototyping paling kuat di pasar. Juga, Anda harus mempertimbangkan untuk bergabung dengan grup Framer di Facebook. Ada komunitas besar di sekitar, dan mereka sangat membantu saat Anda memulai.

Jika Anda ingin masuk lebih dalam ke dalam Framer, coba baca dokumentasi Framer.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib