Isi
- Cara membuat aplikasi dengan Framer X
- 01. Buat bilah pencarian
- 02. Buat tumpukan konten
- 03. Buat tumpukan vertikal
- 04. Buat halaman baru
- 05. Perkenalkan interaksi
- 06. Tambahkan tombol simpan
Sebagai desainer, selalu ada pertanyaan tentang alat prototyping apa yang harus Anda gunakan untuk proyek Anda. Ada banyak perangkat lunak di luar sana untuk tugas-tugas seperti wireframing (lihat alat wireframing terbaik kami dan pembuat situs web yang sangat baik), membuat prototipe, dan membangun interaksi yang kompleks; namun sangat sedikit alat yang mampu menangani semua ini. Framer adalah salah satu alat yang memiliki semua fungsi ini dan sangat mempercepat proses pembuatan animasi dan interaksi kecil.
Iterasi terbaru, Framer X, sekarang menggunakan React dan JavaScript daripada menggunakan CoffeeScript untuk mengembangkan interaksi mikro dan animasi. Ini membantu memberikan waktu muat yang lebih cepat dan kinerja yang lebih baik. Selain itu, penggunaan komponen React berarti bahwa pengguna memiliki lebih banyak ruang untuk ditambahkan dan diperluas termasuk menyematkan pemutar media, data dan grafik waktu nyata di dalam prototipe.
Pengujian adalah bagian inti dari proses pembuatan prototipe dan sementara Framer X hebat dalam membuat prototipe interaktif, perlu bantuan untuk melihat seberapa bagus kreasinya. Lihat pos pengujian pengguna kami untuk mengetahui beberapa alat terbaik untuk melengkapi Pembentuk dan membantu membangun prototipe dunia nyata, dan pastikan Anda menggunakan layanan hosting web terbaik untuk Anda.
Cara membuat aplikasi dengan Framer X
Untuk sepenuhnya menghargai kekuatan Framer X, kami akan membuat proyek kehidupan nyata: aplikasi resep memasak sederhana dengan beberapa konten dan media (aset yang dicadangkan di penyimpanan cloud yang andal). Hal pertama yang harus dibangun adalah beranda. Kami akan menjaga hal-hal sederhana dengan elemen-elemen berikut:
- Bilah pencarian standar untuk menemukan resep
- Aktivitas terbaru untuk menampilkan resep terbaru yang dilihat
- Kartu resep yang menampilkan hal-hal seperti resep paling populer
- Membuat tampilan resep secara mendetail dengan video dan opsi berbagi
Untuk memulai, Anda perlu membuat Frame baru (artboard) dengan mengklik ikon + di bilah navigasi kiri. Pilih gaya artboard apa pun dari daftar templat iPhone / Android standar di bilah kanan. Sekarang Anda siap untuk pergi.
01. Buat bilah pencarian
Mari kita mulai dengan membuat bilah penelusuran. Alih-alih membuat persegi panjang dan menambahkan ikon pencarian seperti biasa, kita sebenarnya dapat menggunakan komponen yang dapat digunakan kembali dengan cepat di Framer X, ini disebut paket. Ada ribuan paket yang dapat ditemukan di bilah navigasi kiri di bawah Toko. Klik Store, cari Android Kit dan Example Kit lalu instal.
Paket ini berisi elemen seperti kartu, tombol, keyboard, slider, input, dan item menu navigasi. Setelah Anda menginstal paket-paket ini, Anda dapat menggunakan elemen-elemen dari menu Komponen di sebelah kiri.
Temukan elemen yang Anda inginkan dengan mencari di filter - dalam hal ini bilah pencarian, yang ada di Contoh Kit. Cukup seret dan lepas ke bingkai. Sekarang Anda dapat memodifikasi properti seperti teks placeholder, ukuran font, dan warna menggunakan bilah kanan.
02. Buat tumpukan konten
Untuk blok aktivitas baru-baru ini, pertama-tama tambahkan teks 'Aktivitas Terkini', yang cukup jelas. Sekarang kita dapat menggunakan fitur baru Framer X yang disebut Stacks. Ini dapat dilakukan dengan mengklik ikon + dan memilih Stack S dari menu. Setelah memilih tumpukan, seret dan jatuhkan area seluas 600 x 300 pada bingkai kerja untuk membuat tumpukan. Tumpukan ini akan ditampilkan dengan warna biru.
Sekarang mari kembali ke bagian Komponen dan di bawah kit Android, telusuri elemen Card-5 dan seret ke tumpukan yang baru saja kita buat. Gandakan kartu ini dua kali dan pastikan ketiga kartu ada di tumpukan.
Selama berada di dalam tumpukan, ketiga kartu ini dapat dengan mudah diatur ulang tanpa perlu khawatir dengan jaraknya. Jika Anda ingin menambah jarak antar kartu, Anda dapat menambah lebar seluruh tumpukan. Sesederhana itu. Anda juga dapat mempersonalisasi kartu-kartu ini dengan mengubah nama judul dan latar belakang sesuai dengan keinginan Anda.
Sekarang kita telah membuat tumpukan, mari kita membuatnya dapat di-scroll. Pindahkan keluar dari bingkai / artboard. Klik pada ikon + dari navigasi kiri dan klik opsi Scroll. Sama seperti kita membuat area dengan tumpukan, buat area yang dapat digulir pada bingkai / artboard yang ukurannya sama dengan tumpukan.
Sekarang ubah properti gulir di bilah kanan dengan mengubah panah arah untuk menjadikannya gulir horizontal. Setelah wadah gulir kami dibuat, kami membutuhkan konten untuknya, yang disajikan oleh tumpukan yang kami buat sebelumnya. Jadi cukup hubungkan wadah gulir ke tumpukan menggunakan perintah panah pada wadah gulir. Ia bekerja dengan menyeret penunjuk mouse ke tumpukan.
03. Buat tumpukan vertikal
Untuk kartu resep, Anda perlu mengikuti metode yang mirip dengan langkah 2 tetapi alih-alih membuat gulungan kartu horizontal, Anda akan membuat kartu vertikal serupa yang pada dasarnya adalah daftar resep paling populer dengan gambar mini. Untuk latihan ini, setiap kartu untuk resep memiliki empat elemen - thumbnail gambar, peringkat, nama resep, dan waktu yang diperlukan untuk menyiapkannya.
Jangan khawatir tentang detail masing-masing kartu. Mereka dapat dipersonalisasi berdasarkan selera desain Anda.Ikuti metode yang sama dengan menggunakan kartu dari komponen, menduplikasi mereka dan menambahkan semuanya ke tumpukan dengan gulir vertikal.
04. Buat halaman baru
Sekarang mari kita buat halaman baru untuk membahas detail resep tertentu. Misalnya, kasus kartu kedua di sini: Pasta Prancis. Untuk membuat halaman baru ini, buat bingkai / artboard baru dan perkenalkan elemen yang kita butuhkan untuk menampilkan lebih banyak detail tentang resep French Pasta. Halaman baru ini dapat dipecah menjadi video, judul, peringkat, waktu yang dibutuhkan untuk membuatnya dan beberapa tombol tindakan, seperti simpan ke daftar dan bagikan ke media sosial.
Untuk menambahkan video, pergi ke toko dan instal paket YouTube, yang memungkinkan Anda dengan mudah menambahkan video ke prototipe Anda. Sekarang masuk ke panel Komponen Anda dan seret-dan-lepas elemen YouTube dari bawah komponen YouTube ke dalam bingkai.
Sesuaikan lebar thumbnail agar pas dengan lebar bingkai. Di panel Properties kanan, Anda dapat memasukkan URL video yang ingin Anda putar di prototipe. Jika Anda mau, ada juga cara untuk memutar video secara otomatis melalui kotak centang di panel Properti.
Di bawah video ini, Anda dapat menambahkan judul, peringkat, dan berbagai ikon. Untuk menambahkan ikon untuk contoh kita, saya memanfaatkan komponen dari toko Icon Generator. Ini proses yang mudah: cukup seret dan lepas ikon dasar ke bingkai lalu ubah properti yang disebut Ikon di panel sisi kanan menjadi 'hati' dan 'bagikan'. Ini akan mengubah ikon dasar menjadi ikon simpan dan bagikan masing-masing. Warnanya juga dapat dengan mudah diubah menggunakan panel kanan.
Untuk mempermudah pengunjung, Anda dapat menambahkan bagian yang disebut Bahan, yang akan mencantumkan semua bahan yang diperlukan untuk resep kami - dalam hal ini, Pasta Prancis.
05. Perkenalkan interaksi
Sekarang, mari buat desain kita lebih menarik dengan menambahkan interaksi untuk sebuah tombol. Idealnya, saat Anda mengklik ikon bagikan, Anda akan diarahkan dengan layar untuk membagikan resep di berbagai saluran media sosial. Mari kita bangun itu menggunakan bingkai baru.
Pastikan lebar dan tinggi bingkai ini sama dengan lebar dan tinggi dua bingkai lainnya yang kita buat. Idenya adalah agar layar berbagi baru ini bergeser ke atas dan menggantikan layar saat ini ketika ikon bagikan diklik.
Untuk membantu membuat layar berbeda, mari tambahkan beberapa warna dan isi dengan ikon media sosial seperti Facebook, Instagram, WhatsApp dan email. Layar berbagi ini juga harus memiliki ikon X yang ditambahkan ke dalamnya, yang ketika diklik akan mengembalikannya ke keadaan semula.
Pastikan semua ikon diatur di dalam tumpukan. Segera setelah ikon X disertakan, langkah selanjutnya adalah menautkan bingkai ini sehingga muncul saat Anda mengeklik ikon bagikan.
Untuk melakukan ini, pilih bingkai yang berisi ikon bagikan. Di panel sisi kanan, ada properti bernama Link. Setelah Anda mengkliknya, antarmuka aplikasi akan memberi Anda panah yang dapat Anda seret ke bingkai berbagi baru yang kami buat. Ini akan membuat tautan di latar belakang.
Sekarang, ketika Anda memilih ikon bagikan, Anda akan melihat properti baru di panel sisi kanan di bawah Tautan, yaitu Target, Transisi, dan Arah. Masing-masing properti ini memungkinkan Anda untuk mengubah elemen, seperti jenis transisi dan arah kemunculan layar, dll.
Anda dapat menguji apakah prototipe berfungsi atau tidak dengan mengklik ikon putar yang ditemukan di sudut kanan atas antarmuka. Demikian pula, Anda perlu menautkan layar berbagi ke layar video sehingga ketika pengguna mengklik ikon X, ia kembali ke layar sebelumnya.
Ini dapat dicapai dengan menggunakan properti tautan serupa dan menambahkan target sebagai layar video. Jika Anda ingin mencoba menambahkan sedikit variasi, Anda dapat membuat arah kiri alih-alih atas dan kemudian menggunakan perintah putar untuk menguji apakah interaksi tersebut berfungsi atau tidak.
06. Tambahkan tombol simpan
Sekarang mari tambahkan interaksi overlay ke ikon simpan. Di sini, tujuan kami adalah setiap kali pengunjung mengklik ikon berbentuk hati, akan ada jendela pop-up yang menanyakan apakah Anda ingin menyimpan resep ke daftar yang dibuat khusus.
Mari kita mulai dengan membuat bingkai baru yang disebut daftar tersimpan. Sama seperti yang Anda lakukan dengan yang sebelumnya, pastikan bingkai ini memiliki lebar yang sama tetapi kali ini Anda perlu mengurangi tingginya karena akan muncul sebagai hamparan saat diklik. Untuk gaya bingkai daftar yang disimpan, tambahkan tajuk, masukan teks untuk memasukkan nama daftar dan tombol yang merupakan CTA untuk menyimpannya.
Untuk menautkan, pilih ikon berbentuk hati pada bingkai video dan tambahkan tautan ke bingkai daftar yang disimpan. Sekarang, alih-alih properti transisi menjadi push, jadikan itu overlay. Sesuaikan menjadi 80% lalu uji menggunakan tombol putar. Ubah sampai Anda puas dengan overlay. Tautkan kembali ikon X pada ikon daftar yang disimpan ke halaman video.
Ini adalah cara menggunakan Framer X untuk membuat prototipe interaktif yang dapat ditindaklanjuti dengan mudah. Ada juga alat canggih yang dapat Anda gunakan, serta menambahkan cuplikan pengkodean React ke elemen bingkai. Juga, bagian terbaik dari Framer X adalah siapa pun dapat menguasainya dengan mencobanya pada beberapa prototipe.
Artikel ini awalnya diterbitkan dalam net terbitan 325, majalah terlaris di dunia untuk perancang dan pengembang web. Beli edisi 325 atau langganan untuk menjaring.
Bergabunglah dengan kami pada April 2020 dengan jajaran superstar JavaScript kami di GenerateJS - konferensi yang membantu Anda membangun JavaScript yang lebih baik. Pesan sekarang di generateconf.com
