Belajar Pembingkai Dengan Membuat Prototipe Aplikasi Seluler

Waktu antarmuka pengguna statis sudah lama berlalu. Merancang prototipe interaktif adalah pendekatan terbaik untuk mengekspresikan ide-ide Anda dan menjelaskannya kepada klien dan pemangku kepentingan. Atau, seperti yang dikatakan Jerry Cao dari UXPin: "Tidak ada yang membawa Anda lebih dekat ke fungsionalitas produk akhir selain membuat prototipe. Ini adalah prototipe yang menghidupkan pengalaman di balik pengalaman pengguna ."

Prototyping adalah bagian penting dari proses desain UX modern. Saya telah mencoba banyak alat, dan menurut saya Framer Studio (didukung oleh Framer Library) adalah salah satu yang terbaik dalam hal membuat prototipe antarmuka pengguna. Jadi, dalam tutorial berikut, saya ingin mengajari Anda beberapa dasar-dasar Framer.

Apa yang akan Anda pelajari? Jika Anda tahu apa itu Framer dan ingin mempelajari lebih lanjut tentang cara menggunakannya, atau jika Anda tidak tahu apa itu Framer tetapi ingin belajar lebih banyak tentang teknik pembuatan prototipe tingkat lanjut, saya yakin ini adalah tutorialnya untuk Anda! Di akhir tutorial, Anda seharusnya dapat membuat prototipe aplikasi seluler, dan Anda juga akan mempelajari beberapa kode CoffeeScript. Saya akan memandu Anda sepanjang jalan dan akan memberi Anda file untuk membantu Anda memulai dengan lebih mudah.

Catatan Tentang Studio Pembingkai, Perpustakaan Pembingkai, Platform, dan Pintasan

Sebelum kita melanjutkan, sebuah catatan penting : Tutorial ini adalah tentang Framer Studio, yang merupakan aplikasi khusus Mac. Framer Studio didukung oleh Framer Library, yang open-source dan gratis. Library Framer sendiri dapat digunakan di semua sistem operasi (Mac, Windows dan Linux). Sejauh ini, tidak ada versi Windows dari Framer Studio yang tersedia; namun, ada cara untuk membuat Perpustakaan Framer bekerja pada OS Windows dengan Atom. (Jika Anda ingin tahu tentang Windows, baca "Cara Menjalankan Framer JS di Windows" atau "Menggunakan Framer di Windows Dengan Atom.") Juga, perhatikan bahwa, karena saya menggunakan Framer Studio di Mac, dalam tutorial saya Saya akan menggunakan notasi Mac untuk pintasan.

Apa itu Framer?

Ada dua kategori utama alat prototyping (lebih lanjut tentang ini nanti), tetapi Framer adalah alat yang termasuk dalam kategorinya sendiri. Anda dapat menggunakannya untuk transisi sederhana dan pembuatan prototipe cepat, serta untuk membuat interaksi mikro dan animasi tingkat lanjut. Ini memberi Anda — perancang — kekuatan tertinggi untuk menciptakan interaksi tanpa batasan apa pun yang dikenakan oleh antarmuka pengguna grafis dan alat yang telah ditentukan sebelumnya.

Mempelajari Beberapa Kode

Di Framer, kode adalah kekuatan super desain utama Anda. Apakah itu berarti Anda harus belajar coding? Ya. Haruskah desainer membuat kode? Topik ini sudah lama sekali, dan ada beberapa poin bagus untuk "ya" dan "tidak"; di sini, saya ingin memberi Anda pandangan yang sedikit berbeda tentang pertanyaan itu.

Dalam sebuah artikel baru-baru ini, Shawn Hickman berkata:

"Ada perdebatan terus-menerus tentang apakah desainer harus belajar kode atau tidak. Meskipun saya senang membicarakannya secara panjang lebar, saya pikir akan sangat membantu untuk melihatnya dari perspektif yang berbeda. Apa yang ingin Anda capai? Dalam kasus saya , saya ingin mengirimkan produk."

Dan juga:

"Framer adalah alat yang luar biasa bagi desainer untuk mempelajari cara membuat kode. Mampu melihat hasil kode Anda secara langsung membantu mengajari saya apa yang sebenarnya terjadi. Framer mengajari saya hal-hal dasar seperti variabel, for-loop, dan fungsi. Tidak ada yang mewah , tapi sangat diperlukan."

Ini membawa saya ke poin penting berikutnya. Menurut pendapat saya, Framer adalah salah satu pendekatan pengkodean yang paling ramah desainer di luar sana. Dan sementara prototipe tidak pernah dibuat dengan kode siap produksi, pemrogram akan tetap mendapat manfaat dan dapat menggunakan beberapa informasi dari kode Anda. Akhirnya, Anda juga akan mendapatkan pemahaman yang lebih baik tentang bagaimana segala sesuatu bekerja di bawah tenda dan akan membangun beberapa landasan untuk pengembangan lebih lanjut dari keterampilan Anda.

Apa Itu CoffeeScript?

Bahasa yang digunakan dalam Framer adalah CoffeeScript. Berita bagus untuk pemula: Ini adalah versi JavaScript yang disederhanakan, sehingga kurva pembelajarannya tidak terlalu curam.

Menurut situs resmi:

CoffeeScript adalah bahasa yang dikompilasi ke dalam JavaScript. Ini adalah upaya untuk mengekspos bagian yang baik dari JavaScript dengan cara yang sederhana.

Ada satu lagi keuntungan besar menggunakan CoffeeScript: Ini pada dasarnya adalah teknologi web, jadi semua yang Anda buat di Framer akan berjalan sebagai JavaScript nanti! Untuk mengikuti tutorial ini, Anda harus tahu sedikit pemrograman.

Sumber Daya yang Berguna

Karena kami akan menulis beberapa CoffeeScript, jika Anda memerlukan bantuan untuk memulai, saya sarankan Anda memeriksa sumber daya berikut terlebih dahulu:

• "Kode," Pembingkai
  Panduan pemrograman Framer.
• "Kursus Pembingkaian," Greg Rogo
  Video tutorial saya tentang CoffeeScript.
• "Pengantar CoffeeScript," Jeffrey Biles, SitePoint
• "Pengantar Singkat CoffeeScript," JumpstartLab
• "Pengantar Pembingkai," Meng To
  Sumber daya yang sangat direkomendasikan untuk mempelajari beberapa hal dasar penting tentang Framer.

Catatan Pada Versi Pembingkai

Tutorial berjalan (dan telah diuji) pada Framer versi 111 . Jika Anda belum memperbarui ke 111, saya sangat menyarankan Anda mengunduhnya dan memperbaruinya. Untuk pembaruan Framer di masa mendatang, kemungkinan versi Framer yang akan datang akan memperkenalkan lebih banyak fitur baru dan dapat berdampak pada kode tutorial ini.

Mengapa Prototyping Penting?

Bandingkan pendekatan ini untuk menyajikan ide yang sama. Anda dapat menggunakan gambar rangka, seperti ini:

Atau ide yang sama dapat disajikan dengan prototipe sederhana namun kuat:

Bayangkan Anda sedang mempresentasikan ide ini kepada sekelompok orang. Bagaimana menurut Anda: Mana yang akan berkinerja lebih baik? Bahkan jika gambar rangka berisi informasi yang lebih relevan, itu akan memiliki dampak visual yang lebih rendah. Dan orang cenderung tidak membaca dokumentasi wireframe dengan hati-hati.

Menjelaskan ide dengan prototipe interaktif akan memberi mereka pemahaman yang lebih baik tentang visi Anda. Terkadang, bahkan prototipe dengan ketelitian rendah berbicara seribu kata. (Ide yang sama dibagikan oleh Paul Boag: "Orang sering mengalami kesulitan membayangkan seperti apa tampilan yang lebih baik . Sebuah prototipe memungkinkan mereka untuk melihatnya. Ini dapat menjual potensi jauh lebih baik daripada sejumlah dokumen atau presentasi.")

Jika sebuah gambar bernilai 1000 kata, sebuah prototipe bernilai 1000 pertemuan.

— Daniel Burka, #aeadenver 2017

Seringkali Anda harus meyakinkan orang yang pengetahuannya tentang konsep yang disajikan terbatas. Di sisi lain, memiliki prototipe yang berfungsi sebelum aplikasi sebenarnya dikembangkan dapat memberi Anda wawasan yang sangat berarti dari tahap pengujian pengguna. Itu sebabnya saya percaya prototyping sangat penting dan menarik.

Secara umum, Anda dapat membagi prototipe menjadi dua kategori utama. Pertama adalah pembuatan prototipe cepat , di mana Anda menghubungkan layar statis dengan hotspot untuk membuat transisi sederhana. Ini dapat dicapai dengan alat seperti Marvel, Adobe XD dan Figma.

Kategori kedua adalah prototipe terperinci dengan interaksi mikro , seperti animasi yang berfokus pada satu tugas (misalnya, menyetel alarm, memilih tindakan, dll.). Anda dapat membuat prototipe jenis ini dengan alat seperti Prinsip, Flinto, dan Origami. Menyempurnakan prototipe dengan animasi memberi Anda kesempatan untuk menciptakan pengalaman pembuatan prototipe yang lebih menarik.

Ingat saya mengatakan bahwa Framer adalah alat yang termasuk dalam kategori tersendiri? Ini karena Anda dapat menggunakannya untuk pembuatan prototipe cepat, serta untuk membuat interaksi mikro dan animasi yang cukup canggih. Mari kita lihat bagaimana!

Desain Pertama Anda Dibuat Dengan Pembingkai

Mari kita mulai dengan antarmuka pengguna Framer.

Framer memiliki dua tampilan yang terintegrasi dengan baik: kode dan desain. Anda membuat tata letak dan citra dalam tampilan desain, lalu menambahkan semua interaktivitas yang diperlukan dalam tampilan kode. Dalam tampilan kode, Anda kemudian dapat menambahkan animasi dan interaksi mikro. Framer tidak seharusnya menggantikan alat desain pilihan Anda (walaupun, dengan pembaruan Desember baru-baru ini, tampaknya Framer juga mulai membidik pasar alat desain layar; itu memposting gambaran umum fitur desain baru), tetapi untuk prototipe cepat, tampilan desain terasa baik-baik saja.

Nantinya, dengan desain yang lebih canggih, Anda juga bisa mengimpor file dari Sketch atau Figma. Tapi pertama-tama, mari kita langsung masuk ke tampilan desain dan membuat tata letak sederhana menggunakan beberapa alat desain dasar.

Bekerja Dalam Tampilan Desain

Saat Anda pertama kali membuka Framer Studio, itu akan terbuka dalam tampilan desain. Anda akan menemukan bahwa sebagian besar pintasan yang Anda ketahui dari alat desain lain (seperti Sketsa) juga berfungsi di sini. Tekan A (atau F ) untuk beralih ke alat Bingkai, dan pilih preset iPhone 8 yang telah ditentukan sebelumnya dari panel properti di sebelah kanan.

Catatan: Dalam pembaruan Framer terbaru, artboard diubah namanya menjadi "bingkai", dan seluruh konsep telah berubah. Apa sebenarnya bingkai itu? Bingkai adalah wadah tata letak cerdas yang dapat digunakan sebagai layar dan elemen antarmuka. Bingkai juga dapat digunakan seperti irisan untuk mengekspor ikon dengan cepat pada ukuran tertentu. Jika Anda mengetahui sedikit tentang HTML, Anda dapat menganggap bingkai sebagai elemen div , dan Anda juga dapat membuat bingkai di dalam satu sama lain, untuk menentukan elemen tata letak seperti bilah navigasi, bilah tab, kartu, tombol, dll. Nanti di tutorial , terkadang saya akan menyebut bingkai sebagai "layar" (untuk memberi Anda gambaran umum bahwa ini adalah layar terpisah dari aplikasi kami) — tetapi, secara teknis, layar hanyalah bingkai.

Anda dapat membaca lebih lanjut tentang bingkai di halaman bantuan "Bingkai vs Bentuk".

Catatan Tentang Unit

Di Framer, kami mengukur sesuatu dalam satuan yang disebut titik . Setiap titik dapat mewakili jumlah piksel yang berbeda, tergantung pada kerapatan piksel perangkat fisik yang akan Anda uji. Karena apa pun yang Anda desain di Framer dibuat sebagai vektor, tidak ada yang perlu dikhawatirkan. Juga, yang terbaik adalah menggunakan file SVG vektor, yang didukung oleh Framer; jika Anda harus mengimpor file PNG atau JPG, pastikan dalam resolusi yang cukup tinggi.

Saya sudah menyiapkan logo Majalah Smashing dengan cara ini. Untuk mengimportnya ke Framer, saya tinggal drag and drop di kanvas.

Elemen terakhir dalam bingkai ini adalah tombol sederhana, dibuat dengan bantuan bingkai bersarang lainnya (tekan F atau A ), dengan bingkai teks di dalamnya. Tekan T untuk alat Teks, dan gambar bidang teks dari kiri ke kanan, ratakan teks ke tengah bidang di panel properti, dan tambahkan beberapa teks.

Tip berguna : Teks secara otomatis diterapkan sebagai sublapisan ke objek bingkai yang telah Anda buat. Untuk mengaksesnya langsung di kanvas, tahan Command sambil mengkliknya.

Mari kita desain layar kedua (bingkai). Kami akan menggunakan header dan footer generik, yang akan secara otomatis diterapkan ke prototipe kami (ini berarti Anda akan melewatkan ketinggian header dan footer saat mengerjakan desain).

Elemen utama pada layar ini adalah daftar enam tombol, masing-masing setinggi 115 poin. Secara total, tinggi bingkai kita harus 6 × 115 = 690 points . Karena sedikit lebih tinggi dari perangkat itu sendiri, nanti akan bergulir secara otomatis di pratinjau. Saya menggunakan ikon hamburger dari panel ikon:

Saya juga telah menambahkan beberapa bidang teks, serta gradien sebagai isian. Berikut tampilannya:

Mari pilih semua tombol dan tekan Command + Return untuk menggabungkannya ke dalam bingkai baru — wadah baru untuk item ini (yang saya beri nama "item"). Sekarang, tambahkan bingkai atas dan bawah (yang akan digunakan untuk header dan footer), lalu letakkan di atas item daftar.

Untuk bingkai lainnya, gunakan bentuk dan alat sederhana yang serupa untuk membuat struktur yang Anda lihat di bawah.

Saya tidak akan membahas detail setiap elemen desain karena sifat dasar alat yang akan Anda gunakan. Namun, jika Anda ingin memulai dengan file Framer yang siap digunakan, Anda dapat mengunduhnya.

Sebelum kita melanjutkan, ada beberapa hal yang saya ingin Anda periksa:

• Layar ketiga dengan menu harus sama tingginya dengan yang tertinggi (Anda dapat dengan mudah menduplikasi bingkai sebelumnya dengan menekan Command + D ).
• Konvensi penamaan untuk elemen di panel lapisan sangat penting. Tolong, simpan seperti di file desain saya, atau perhatikan bagaimana saya membawa nama mereka.

Transisi Dari Desain ke Kode

Untuk menjalankan sesuatu, Anda harus mengakses tampilan kode. Anda dapat beralih di antara tampilan dengan menekan Command + 1 dan Command + 2 . Sebelum Anda mulai mengkodekan interaksi, Anda harus mengaktifkan bingkai dari tampilan desain agar tersedia dalam tampilan kode (tidak diaktifkan secara default). Untuk mengaktifkan bingkai untuk bekerja dalam tampilan kode, klik ikon target di sebelah namanya di panel lapisan.

Sekarang Anda dapat menargetkan bingkai ini dalam kode hanya dengan menggunakan namanya.

Tip berguna: Pertahankan konvensi penamaan untuk elemen di panel lapisan sederhana; cobalah untuk menghindari spasi dan tanda-tanda khusus; jangan mulai nama dengan angka. Menggunakan camelCase atau garis bawah ( _ ) adalah ide yang bagus. Tetapi jika Anda menggunakan tanda hubung ( - ), Anda harus menggantinya dengan garis bawah ( _ ) dalam kode.

Pertama, pastikan bahwa semua bingkai telah diaktifkan untuk menargetkannya dalam tampilan kode dengan ikon target (untuk melihat daftar bingkai penuh, klik di mana saja pada kanvas kosong di luar bingkai mana pun). Juga, aktifkan semua frame di dalam frame pertama untuk tampilan kode. Sekarang, tekan Command + 2 , dan mari jalankan beberapa kode!

Pembaruan penting: Pada pembaruan Framer 20 Desember 2017 ( versi 108 ), Anda dapat menargetkan hanya bingkai dan objek teks dalam kode; tetapi dalam pembaruan yang lebih baru ( versi 109 , dirilis pada 23 Januari 2018), tim Framer menambahkan opsi untuk juga menargetkan bentuk dan jalur. Sementara tutorial saya hanya menggunakan bingkai dan objek teks, ada baiknya juga mengetahui bahwa bentuk dan jalur sekarang dapat ditargetkan dalam kode juga. Anda juga akan mencatat bahwa (seperti yang telah disebutkan) alat Artboard diganti dengan alat Bingkai, sehingga bilah sisi alat mungkin terlihat sedikit berbeda dari pada tangkapan layar; ini karena sebagian besar artikel disiapkan sebelum pembaruan Framer 20 Desember 2017.

Menambahkan Interaktivitas Dalam Framer

Bukan maksud saya untuk mengajari Anda CoffeeScript dalam artikel ini, tetapi saya akan mencoba yang terbaik untuk menjelaskan kode yang saya gunakan dalam contoh ini. Semoga, Anda dapat memahaminya bahkan tanpa pengalaman CoffeeScript sebelumnya. Karena itu, jika Anda baru mengenal CoffeeScript atau JavaScript, saya sangat menyarankan Anda membaca panduan bantuan terlebih dahulu.

Sekarang, mari kita buat animasi pertama kita. Kita akan menjelajahi transisi sederhana dengan membuat animasi intro untuk layar pertama. Apa yang kami atur dalam tampilan desain adalah bagaimana aplikasi kami seharusnya menjaga elemen yang dianimasikan. Untuk layar pertama kami, kami ingin menganimasikan scale logo dan properti rotation . Pertama, kita atur properti scale ke 0 (yang akan membuat logo tidak terlihat), dan kemudian kita atur rotasinya ke -360 :

 logo.scale = 0 logo.rotation = -360
logo.scale = 0 logo.rotation = -360

Setelah itu, kami akan menganimasikannya ke nilai aslinya. Inilah blok kode yang dapat Anda gunakan:

 logo.animate properties: scale: 1 rotation: 0
logo.animate properties: scale: 1 rotation: 0

Ingatlah lekukan . Properti yang bernyawa harus diindentasi pada baris baru, dan kami menggunakan metode animate untuk menggerakkannya. Sekarang, Anda seharusnya dapat melihat animasi pertama Anda berfungsi! Anda dapat mengubahnya sedikit dengan membuat gerakan yang lebih alami. Kami akan melakukan ini berkat easing — sebuah konsep yang memungkinkan kami mengubah gerakan sehingga terasa lebih hidup. Mari tambahkan satu baris lagi di bagian bawah:

 logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"
logo.animate properties: scale: 1 rotation: 0 curve: "spring(100,15)"

Sekali lagi, harap perhatikan lekukannya. Percobaan dengan nilai-nilai dalam tanda kurung untuk mendapatkan hasil yang berbeda. Anda dapat membaca lebih lanjut tentang easing di dokumentasi Framer.

Animasi sekarang akan terlihat seperti ini:

Mari kita atur beberapa properti awal lagi:

 bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200
bg.backgroundColor = "black" button.scale = 2 button.y = button.y + 200

Pada baris terakhir, kami mengatur posisi tombol sehingga berada di bawah kanvas — pertama-tama kami memeriksa posisi saat ini dengan button.y , lalu menambahkan 200 titik lagi pada sumbu vertikal untuk memindahkannya ke bawah. Langkah selanjutnya adalah membuat beberapa animasi; mari kita lakukan untuk latar belakang terlebih dahulu:

 bg.animate backgroundColor: "#FF7744"

Dan sekarang, kita ingin menunggu sampai animasi logo selesai dan kemudian jalankan animasi tombol. Salah satu pendekatannya adalah dengan menunda animasi, seperti ini:

 button.animate properties: scale: 1 y: button.y - 200 delay: .5

Ini menundanya setengah detik. Solusi yang jauh lebih baik adalah menunggu animasi logo selesai dan kemudian menjalankan kodenya. Sepotong kode itu memperkenalkan acara Framer (yang akan kita jelajahi lebih lanjut nanti di artikel ini). Ini terlihat seperti ini:

 logo.onAnimationEnd -> button.animate scale: 1 y: button.y - 200

Seperti yang Anda lihat, Anda bahkan dapat melewati properties: baris saat tidak menggunakan easing; tetapi jika Anda ingin menambahkan easing yang keren, itu harus ada. Mari kita selesaikan dengan sesuatu seperti ini:

 logo.onAnimationEnd -> button.animate properties: scale: 1 y: button.y - 200 curve: "spring"

Nah, inilah salah satu cara membuat animasi di Framer; yang lain akan menggunakan objek atau status animasi. Satu tip tambahan adalah menjelajahi properti dengan mengklik ikon kecil di sebelah nomor baris, di mana Anda dapat mengubah nilai yang berbeda.

Oke, animasinya sekarang terlihat seperti ini:

Menuliskan Interaksi

Di Framer, ada banyak komponen dan cuplikan yang sudah jadi — potongan kode yang dapat Anda gunakan dalam prototipe Anda. Salah satunya adalah komponen aliran, yang memungkinkan transisi otomatis layar, serta mengaktifkan beberapa fitur tambahan, seperti menentukan header dan footer yang akan muncul di setiap layar. Mari kita mulai dengan membuat komponen aliran:

 flow = new FlowComponent flow.showNext(home)

Baris pertama seperti deklarasi variabel. Tetapi nilai di sini sebenarnya membuat objek FlowComponent baru. Sekarang, kita dapat menggunakan nama kustom ini, flow , untuk mengakses komponen flow kapan saja. Baris kedua menggunakan salah satu metode yang dibangun ke dalam komponen aliran — showNext , yang, seperti namanya, menampilkan layar yang ingin kita lihat selanjutnya. Dalam hal ini, ini akan menunjukkan kepada kita layar pertama dari prototipe kita. Kami meneruskan nama frame pertama sebagai parameter. Itu saja yang diperlukan untuk membungkusnya ke dalam komponen aliran dan menampilkan layar pertama.

Selanjutnya, kita mendefinisikan header dan footer. Jika Anda belum mengaktifkannya di tampilan desain, Anda harus kembali dengan Command + 1 dan, dalam tampilan desain, klik ikon target untuk bingkai "bilah atas" dan "bilah bawah". Seperti yang Anda lihat, Anda juga dapat mengelompokkan konten bersama dalam tampilan desain Command + Return ) dan, setelah itu, mengaktifkan bingkai baru agar dapat diakses dalam kode. Kembali ke tampilan kode, Anda sekarang dapat menggunakan baris berikut:

 flow.header = top_bar flow.footer = bottom_bar

Anda mungkin telah memperhatikan bahwa ketika Anda memanggil flow dan meletakkan titik sesudahnya, Framer menampilkan daftar metode dan properti umum yang dapat Anda gunakan. Ada baiknya menelusuri daftar dan memeriksa saran untuk metode dan properti. Dan, jika Anda ingin mempelajari lebih lanjut, ikon kecil mengarah ke dokumentasi.

Dalam pemrograman berorientasi objek, konsep ini sangat penting. Ambil objek mobil sebagai contoh; propertinya adalah hal-hal seperti warna, merek, tenaga kuda, dan sebagainya. Metodenya adalah fungsi siap pakai yang dapat Anda jalankan bila perlu (misalnya, startTheEngine() ). Anda dapat mengenali metode dengan tanda kurung, dan terkadang Anda mungkin ingin meneruskan beberapa parameter ke fungsi khusus ini (misalnya, startTheEngine(gear1) ). Kami telah menggunakan metode showNext() dalam konteks ini; sekarang kita menggunakan properti header dan footer dan mengaturnya pada layer yang sesuai.

Teknik lain yang akan sering Anda gunakan di Framer adalah menyembunyikan dan mengungkapkan lapisan. Misalnya, sebagai keputusan desain, kami ingin menyembunyikan header dan footer di layar pertama. Anda dapat melakukannya dengan baris kode berikut:

 flow.header.visible = false flow.footer.visible = false

Di sini, kami menggunakan properti yang visible di header dan footer komponen aliran. CoffeeScript dimaksudkan untuk seintuitif dan sedekat mungkin dengan bahasa Inggris biasa; jadi, alih-alih false , Anda bahkan bisa mengatakan no untuk menyembunyikannya dan yes untuk mengungkapkannya (bukan true ).

Tip: Coba pilih baris kode apa pun dan tekan Command + / untuk mengomentarinya sehingga tidak dieksekusi.

Saatnya menggunakan kekuatan komponen aliran untuk melakukan perjalanan ke layar berikutnya dari aplikasi kita. Pertama, pastikan bahwa frame berikutnya tersedia dalam tampilan kode serta frame button_get_started yang akan kita gunakan untuk menuju ke layar berikutnya. Kode berikut melakukan hal ini:

 button_get_started.onTap -> flow.showNext(list) flow.header.visible = true flow.footer.visible = true

Apa yang kami lakukan di sini adalah konvensi lain: Kami dapat menanggapi masukan pengguna dan berinteraksi dengan apa yang disebut event . Ada berbagai acara untuk dipilih, seperti mengetuk, mengklik, mengetuk paksa, melayang, dan banyak lagi. Anda dapat menangkap peristiwa tersebut dan menjalankan beberapa kode saat pengguna melakukan tindakan tersebut. Kami menggunakan acara onTap , dan sebagai tanggapan terhadap itu ( -> ), kami mengeksekusi kode yang diindentasi di bawah ini. Dalam komponen aliran, kami menunjukkan bingkai daftar, serta mengungkapkan header dan footer.

Sekarang setelah Anda mengetahui tentang acara dan animasi, Anda dapat lebih mengubah layar beranda dan bereksperimen dengan acara tersebut. Misalnya, Anda dapat menambahkan animasi ketuk ke tombol:

 button.onTouchStart -> this.animate properties: scale: 1.1 backgroundColor: "#f1f1f1" curve: "spring"

Di sini, saya menggunakan acara onTouchStart untuk melihat animasi sebelum pergi ke layar berikutnya, yang dipicu ketika pengguna melepaskan jari mereka (acara onTap atau onClick ).

Anda telah menemukan beberapa potensi komponen aliran, seperti transisi otomatis ke layar berikutnya. Tapi keajaiban baru saja dimulai! Seperti yang Anda lihat, daftar akan bergulir secara otomatis. Masalahnya adalah kita bisa melihat hitam (latar belakang komponen aliran) ketika kita mencapai bagian atas atau bawah dan lebih banyak lagi menggulir. Anda dapat mengubah warna hanya dengan mengatur ini (warna abu-abu yang kami miliki di header dan footer):

 flow.backgroundColor = "#555555"

Sekarang saatnya untuk menampilkan menu. Pastikan Anda telah mengaktifkan menu_button untuk kode tersebut, dan jalankan baris kode berikut ini:

 menu_button.onTap -> flow.showOverlayLeft(menu)

Kami menggunakan metode showOverlayLeft() dan meneruskan nama frame sebagai parameter. Akibatnya, layar bernyawa dari sisi kiri, dan menu disembunyikan dengan ketukan lain dan bahkan disembunyikan dengan ketukan di luar menu itu sendiri. Semua ini dengan satu baris kode!

Apple tampaknya tidak mendorong penggunaan menu hamburger di aplikasi iOS, jadi saya menggunakan menu hanya sebagai contoh tentang apa yang dapat dilakukan Framer dengan cepat dan efisien. Jika Anda membuat prototipe untuk aplikasi iOS asli, pertimbangkan untuk mengikuti panduan antarmuka Apple dengan cermat.

Anda dapat mengakses mode presentasi keren ini dengan mengklik ikon layar penuh di jendela pratinjau. Dimungkinkan juga untuk menguji prototipe Anda secara langsung di perangkat seluler! Anda dapat menggunakan pratinjau langsung dengan aplikasi gratis, tersedia untuk iOS dan Android. Menguji prototipe Anda pada perangkat nyata sangat penting karena memberi Anda pratinjau paling akurat tentang bagaimana desain akan terlihat dan terasa.

Jika Anda seorang pemula, Anda mungkin memahami sebagian besar tutorial sejauh ini tetapi mungkin tidak berpikir Anda dapat melakukannya sendiri. Jadi, inilah tugas kecil.

Seperti yang Anda lihat, saya menutup menu hanya dengan mengklik area kosong di sisi kanan (menunjukkan keajaiban komponen aliran). Sekarang, lihat dokumentasi komponen aliran, dan coba cari cara untuk menyelesaikan tugas berikut: Kami ingin membuat tombol "x" menutup menu dan menampilkan layar sebelumnya. Sebelum melangkah lebih jauh, coba temukan cara yang tepat untuk melakukan ini, dan tulis baris kode Anda sendiri.

Jika masih belum jelas saat ini, jangan khawatir! Pada akhir tutorial, itu akan menjadi lebih mudah untuk dipahami. CoffeeScript yang akan kita gunakan di sini (setelah mengaktifkan elemen close_button untuk tampilan kode) adalah ini:

 close_button.onTap -> flow.showPrevious()

Di sini, showPrevious() hanyalah metode komponen aliran yang akan membiarkan Anda pergi ke layar terakhir. Sekarang, coba tulis kode Anda sendiri lagi. Anda harus menautkan article_list dan arrow_button dengan kode dan membuat article_list menampilkan layar yang sesuai, serta membuat arrow_button pergi ke yang sebelumnya. Juga, kita harus menyembunyikan dan menampilkan header dan footer jika perlu.

Selamat jika Anda berhasil melakukannya! Berikut kode yang saya gunakan:

 article_list.onTap -> flow.showNext(detail) flow.header.visible = false flow.footer.visible = false arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Mengambil Data Untuk Prototipe Kami

Sekarang kita memiliki tulang punggung dari prototipe kita, saatnya untuk menjelajahi beberapa fitur yang lebih canggih dari Framer. Ini akan menjadi menyenangkan! Kami benar-benar akan menggunakan data nyata dari aplikasi kami. Ini akan terlihat jauh lebih bermakna daripada menghasilkan beberapa konten pengisi dummy. Dan itu mungkin terdengar agak menakutkan juga, tapi jangan takut — ini adalah hal berikutnya dalam keahlian Anda. Jika Anda merasa bagian artikel ini sulit, tetap gunakan data statis. Ini dimaksudkan untuk menunjukkan kepada beberapa pengguna yang lebih mahir bahwa mereka dapat menangani data nyata di Framer.

Pendekatan ini mirip dengan yang digunakan saat bekerja dengan variabel dan kumpulan data di Adobe Photoshop. Jika Anda penasaran, baca selengkapnya: "Buat Grafik Berbasis Data di Photoshop."

Sebenarnya, pertama-tama saya ingin memperkenalkan Anda pada solusi yang lebih mudah, tetapi tetap satu yang akan memberi Anda kendali atas teks Anda dari kode! Kembali ke tampilan desain dan letakkan teks di bidang dalam kurung, seperti ini: {item_1} {item_2} ...

Pastikan bidang teks diaktifkan untuk tampilan kode, dan dalam tampilan kode Anda dapat meletakkan semua string yang telah ditentukan sebelumnya dalam sebuah larik . (Saya sarankan membaca "Lembar Cheat Framer: Loop & Array" jika Anda ingin mempelajari lebih lanjut tentang array.)

Singkatnya, array bertindak sebagai variabel yang dapat berisi lebih dari satu item:

 categories = ["Graphic Design", "Mobile Apps", "Web Design", "User Experience", "Front-End Dev", "User Research"]

Sekarang setelah kita memiliki array, mari kita coba menampilkan datanya. Untuk melakukan ini, pertama-tama kita akan menggunakan perintah print , yang menampilkan hasilnya ke konsol. Anda dapat mengujinya segera:

 print "Hello World"

Konsol dapat di-refresh dengan menekan Command + R . Mengakses data sesederhana ini:

 print categories

Baris kode ini akan menampilkan semua data dalam array categories . Dengan array, Anda dapat dengan mudah mengakses item individual yang diindeks dalam array dengan memasukkan nomor dalam tanda kurung, seperti ini:

 print categories[2]

Ini akan mengembalikan item ketiga dalam koleksi, karena kita mulai menghitung dari nol. Sekarang mari kita gunakan fungsionalitas template TextLayer Framer untuk memperbarui dua string pertama:

 item1_txt.template = categories[0] item2_txt.template = categories[1]

Anda dapat mengisi sisa bidang! Contoh mudah ini memungkinkan kita mengelola bidang teks langsung dari kode sehingga kita dapat mengubah teks secara dinamis!

Ke mana harus pergi dari sini?

Sudah selesai dilakukan dengan baik! Pada titik ini, Anda harus dapat menemukan jalan di sekitar Framer dan membuat beberapa prototipe sederhana.

Catatan: Saya mendorong Anda untuk mencoba kursus video saya sendiri di Framer — Anda dapat menonton beberapa pelajaran secara gratis. Juga, buku Framer oleh Tes Mat adalah sumber yang bagus untuk belajar dan memahami Framer dan CoffeeScript. Buku ini tidak gratis, tetapi Anda dapat membaca contoh bab darinya (sebelum memutuskan apakah Anda ingin membelinya).

Saya harap Anda menemukan bagian artikel ini bermanfaat. Sampai saat ini, kami telah mengikuti cara sederhana untuk membuat prototipe kami berfungsi. Tapi Framer lebih dari itu! Inilah mengapa saya menulis bagian bonus tambahan dengan teknik yang lebih canggih. Jika Anda siap menghadapi tantangan, lanjutkan ke bagian berikutnya: JSON!

Mengakses Data Dari JSON (Bagian Tutorial Bonus)

Sebagai alternatif yang kuat untuk solusi sebelumnya, Anda dapat menggunakan API eksternal dan menghubungkannya secara langsung. Meskipun sedikit berlebihan untuk contoh khusus ini, pengguna yang lebih mahir akan mendapat manfaat dari ide tersebut. Pertama, beri komentar kode yang bertanggung jawab untuk mengisi kolom teks (pilih kode dan tekan Command + / ). Cara mudah adalah memiliki file secara lokal dan memuatnya ke dalam Framer. Lebih disukai, ini adalah file JSON, dan Anda bisa mendapatkannya dengan berbagai cara, seperti:

• gunakan contoh file JSON saya,
• buat dari awal menggunakan alat seperti Dummi atau JSON Editor Online,
• gunakan beberapa data dummy dari Daftar,
• dapatkan file yang relevan dari pengembang yang bekerja sama dengan Anda.

Tapi tunggu, apa itu JSON?

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan. Mudah bagi manusia untuk membaca dan menulis. Sangat mudah bagi mesin untuk menguraikan dan menghasilkan. JSON adalah format teks yang sepenuhnya tidak bergantung pada bahasa tetapi menggunakan konvensi yang akrab bagi pemrogram keluarga bahasa C, termasuk C, C++, C#, Java, JavaScript, Perl, Python, dan banyak lainnya. Properti ini menjadikan JSON sebagai bahasa pertukaran data yang ideal.

Anda dapat menggunakan data nyata untuk seluruh proses desain! Jika Anda menggunakan Sketch, ini dapat dilakukan dengan ekstensi Craft InVision. Itu dapat memuat file JSON lokal atau jarak jauh dan mengambil data untuk digunakan dalam tata letak. Untuk mempelajari lebih lanjut, lihat artikel rinci Christian Krammer "Craft for Sketch Plugin: Merancang Dengan Data Nyata." Baca juga tutorial Framer Wojciech Dobry, "Membuat Prototipe dengan Data Nyata."

Sekarang, mari kita letakkan file ini di folder proyek. Setiap kali Anda menyimpan proyek Framer baru, itu membuat folder dengan nama proyek Anda. Akses di Finder, dan letakkan file JSON di sebelah file .coffee dalam struktur ini.

File JSON yang saya kerjakan terlihat seperti ini:

Kami akan menggunakan data kategori di Framer dan mengganti konten dummy yang kami miliki di tombol di layar daftar. Pastikan Anda telah memberikan nama yang tepat untuk bidang (dalam kasus saya, item1-txt , item2-txt , dll.) dan bahwa Anda telah mengaktifkannya untuk tampilan kode dengan ikon target.

Mari memuat feed ke Framer:

 data = JSON.parse Utils.domLoadDataSync "feed.json"

Kami menggunakan JSON.parse serta kelas Utils — pasangan yang akan melakukan semua kerja keras untuk menerjemahkan JSON ke dalam bahasa manusia dan memasukkan semuanya ke dalam data (nama yang telah kami gunakan). Untuk menampilkan data dari bagian atas file .json kami sekarang, kami dapat mencetaknya:

 print data.categories

Dari objek data, kita dapat mengekstrak item tertentu, seperti pada contoh sebelumnya.

 print data.categories[2]

Mari buat array dengan semua bidang teks:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt]

Ini adalah contoh yang disederhanakan, sehingga meskipun Anda kurang berpengalaman, Anda harus dapat mengikutinya. Anda dapat mencoba melakukan yang lebih baik dengan menjalankan loop jika Anda merasa lebih percaya diri. Berbicara tentang loop, kita akan menggunakan salah satunya, untuk memasukkan item ke dalam bidang teks. Ini berjalan seperti ini:

 for i in [0...6] textfields[i].text = data.categories[i]

Loop memungkinkan Anda menjalankan kode yang sama berkali-kali. It starts with for , and then we define a variable, which I've called i . This variable will hold whatever information we pass and then will increment with each loop. In this case, we pass numbers from 0 to 5 — [0...6] is just a way of saying this. You can check out the values of i in the loop by doing the following:

 print i

We need it to loop exactly six times (0,1,2,3,4,5), so that we can address each fild on one iteration. Putting i at the end of textfields will return textfields[0] , textfields[1] , and so on; this way, we can address all of the text fields in the array. Again, if you want to double-check, print it! Put more simply, what we've done here is just an easier way of saying this:

 item1_txt.text = data.categories[0] item1_txt.text = data.categories[1] item1_txt.text = data.categories[2] ...

It's easier to grasp, but code-wise, this solution is not elegant at all. That is why we were using a loop here.

The result of our work is that all of the data is populated in the text fields:

Let's add some links to these items so that we can go to the detail screen. Doing it in the loop is a smart move because we can again add it all at once. Here is the next part of the for in loop (remember to keep the indentation).

 textfields[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to be more elegant, you can make the items tappable, not only the text. Remember, however, that you have to add them to an array first; so, just before the loop, you can put this:

 items = [item1, item2, item3, item4, item5, item6]

Then, in the loop, change textfields[i] to items[i] . This whole code block will now look like this:

 textfields = [item1_txt, item2_txt, item3_txt, item4_txt, item5_txt, item6_txt] items = [item1, item2, item3, item4, item5, item6] for i in [0...data.categories.length] textfields[i].text = data.categories[i] items[i].onTap -> flow.showNext(detail) flow.header.visible = false

If you want to take this to the next level and display different data depending on the button clicked, my hint is to use this in the event, or get the information from the event by putting (e) next to onTap . I do not recommend doing that now, though: Going crazy with the data is not necessary here. Our main goal is to create a prototype, not a real complex application. Keep that in mind. This JSON example was merely to demonstrate that it is possible to use real data in a Framer prototype.

You probably noticed that we're hiding the header here. That is because we've created a separate header for the detail view. There is a simple arrow icon that we want to link back to the previous screen. This is the block of code we'll use:

 arrow_button.onTap -> flow.showPrevious() flow.header.visible = true flow.footer.visible = true

Again, showPrevious() is a ready-made method of the flow component, and I just looked it up in the docs!

Our simple prototype is ready, and it looks like this:

You can download the complete Framer file. Surely, you can tweak it with extra animations, screens and even more data (loaded from a JSON file). I did not want to make it more complex because I wanted to keep the tutorial concise. But trust me, you have enough information to finish this prototype yourself. Just start experimenting with it and you'll see: It's so much fun. Selamat mengkode!