Prototaip Figma: Panduan cepat, langkah demi langkah untuk mockup berguna

prototaip Figma: mengubah model statik ke dalam pengalaman interaktif dinamik

mata teras:

Prototaip FIGMA Menukar model statik ke dalam prototaip dinamik, interaktif untuk membantu pemaju memahami proses pengguna, fungsi dan perasaan reka bentuk.
Langkah -langkah untuk membuat prototaip Figma termasuk: mewujudkan rangka kerja menatal mendatar, mewujudkan peralihan artboard, mewujudkan fungsi kembali ke papan arten sebelumnya, dan mewujudkan animasi masa yang kompleks. Setiap langkah melibatkan tetapan dan interaksi tertentu untuk memastikan peralihan dan kesan animasi yang lancar.
Prototaip FIGMA adalah interaktif dan boleh dikongsi dengan orang lain untuk melihat dan mengumpul maklum balas. Ciri ini meningkatkan kerjasama dan membolehkan penambahbaikan berdasarkan maklum balas yang diterima. Figma juga menyokong animasi yang lebih kompleks melalui plugin seperti Lottiefiles.

Prototyping adalah proses mengubah model statik ke dalam model interaktif dan dinamik (lebih dikenali sebagai

prototaip ). Menghidupkan model statik menjadi realiti tidak diragukan lagi salah satu langkah yang paling menarik (jika bukan yang paling menarik) dalam aliran kerja reka bentuk. Bagi pemaju, adalah penting untuk memahami proses pengguna, perasaan dan fungsi reka bentuk. Apa cara yang lebih baik daripada menggunakan Figma, yang merupakan alat reka bentuk terbaik di dunia, menurut kajian Reka Bentuk 2020?

Sebaik sahaja anda menguasai kaedah prototaip Figma, anda akan mendapati ia mudah dan mudah digunakan dan menyeronokkan. Salin pertama model statik ini (klik pada "Siri Interaksi" dan kemudian klik pada "Salin ke Draf Saya"), dan kemudian sepanjang tutorial kami akan menambah kesetiaan yang lebih berfungsi. Salinan tempatan anda sepatutnya kelihatan seperti ini:

NOTA: Saya menganggap anda mempunyai sekurang -kurangnya beberapa pengetahuan tentang alat reka bentuk UI moden seperti Figma atau Sketch.

Langkah 1: Buat bingkai menatal mendatar

Mari kita mulakan dengan Artboard 1 untuk membolehkan pilihan kad di luar viewport untuk menatal secara mendatar. Ini adalah cara untuk membuat model secara dinamik tanpa membuat apa yang dipanggil Figma sebagai "sambungan". Sambungan mengarahkan kami ke papan seni baru, tetapi itu bukan apa yang akan kita lakukan dalam langkah 1.

Kad pilih pertama dari panel Lapisan (bar sisi kiri), dan kemudian gunakan menu drop-down untuk menukar pilihan kumpulan untuk bingkai dari panel reka bentuk (kali ini sidebar kanan).

Saya tidak akan masuk ke dalam ini secara mendalam, tetapi perbezaan utama antara kumpulan dan bingkai adalah bahawa kumpulan rapat membungkus unsur -unsur anaknya sementara bingkai boleh menjadi saiz apa pun. Ini bermakna:

• Unsur -unsur kanak -kanak kumpulan akan berskala dengan kumpulan, sementara unsur -unsur kanak -kanak bingkai lebih keras kepala (ini adalah ciri, bukan bug)
• unsur -unsur kanak -kanak bingkai diselaraskan relatif kepada bingkai, sementara unsur -unsur anak kumpulan masih sejajar dengan artboardnya
• bingkai boleh mengandungi kandungan limpahan yang boleh menatal secara mendatar atau menegak (inilah yang kita cuba)

Tunggu, adakah ini bermakna bahawa artboard sebenarnya bingkai? Sesungguhnya: Alat reka bentuk UI lain dipanggil papan art, dan Figma memanggil mereka bingkai . Ini mungkin kerana di Figma, bingkai boleh bersarang di bingkai lain, yang sedikit berbeza dari papan arten dalam alat lain seperti Sketch, Adobe XD.

Tukar ke mod prototaip ( 9 ), kini anda boleh menggunakan tetapan tingkah laku limpahan dan kemudian tukar pilihan drop-down dari tiada skrol ke skrol mendatar.

Sekarang anda akan melihat bahawa bayang -bayang itu dipotong dengan pelik oleh bingkai yang baru ditukar, tetapi ini sebenarnya adalah tingkah laku standard kandungan yang melimpah, yang boleh diperbaiki dengan mudah.

Oleh kerana bayang -bayang mempunyai pemboleh ubah kabur 30 dan bingkai boleh menjadi saiz apa pun, kita perlu mengubah saiz bingkai supaya jarak 30 tambahan ditinggalkan di sekitar pinggirnya. Saiz semula ( shift

⌘ ↑ ↓ ← → ) dan Fine-Tune ( shift ↑ ↓ → ) Objek Ia harus mudah.

Dengan cara ini, anda mungkin perasan (jika anda mengklik bingkai), kad dan jarak mereka dapat dengan mudah disusun semula. Ini tidak ada kaitan dengan tutorial itu sendiri, tetapi ia masih hebat.

Langkah 2: Buat Peralihan Artboard

Untuk langkah seterusnya, mari kita cuba interaksi yang menghubungkan satu artboard ke yang lain, juga dikenali sebagai "sambungan".

Pilih bingkai "kad" (ya, bingkai keseluruhan, kerana tidak kira kad mana yang diklik sekarang). Kemudian, dengan mengandaikan anda masih dalam mod prototaip, seret penyambung (iaitu, bulatan dengan sempadan yang dipaparkan ketika melayang) ke Artboard 2. Papan seni ini kini dihubungkan.

Setelah meletakkan penyambung pada Artboard 2, tetapan "Sambungan" (yang kini harus dipaparkan) harus kelihatan seperti ini:

• Butiran Interaksi
  "Apabila diklik" (interaksi akan dicetuskan oleh klik)
  "Navigasi ke" / "Artboard 2" (Klik akan menyebabkan pengguna menavigasi ke Artboard 2)
animasi
• "tolak" / "←" ("kertas 2" akan menolak
  • dari sebelah kanan ke skrin) "perlahan" / "300ms" (dalam 300ms, animasi akan bermula dengan cepat dan kemudian perlahan secara beransur -ansur)
  • Pilih kotak semak "Smart Animation Match Layer" (jika ia tidak berubah, elemen biasa seperti butang belakang dan navigasi tidak akan bernyawa)

mahu melihat apa yang telah kami lakukan setakat ini? Klik butang "Demo" di sudut kanan atas (iaitu Play

ikon). Jika anda menggunakan Figma dalam penyemak imbas web anda, ini akan membuka tab baru.

Petua: Tekan

r

untuk memuatkan semula prototaip. Langkah 3: Kembali!

Sebelum kita pergi ke hadapan dan menggali sambungan yang lebih kompleks, mari pastikan kita dapat kembali ke Artboard 1 (atau apa sahaja yang kita datangi). Buat sambungan lain, kali ini bermula dengan butang belakang, tetapkan seperti berikut:

Butiran Interaksi

"Apabila diklik"

"kembali"
• Tetapan animasi tidak akan tersedia kali ini kerana pilihannya ditetapkan. Khususnya, peralihan akan terbalik animasi. Sebagai contoh, jika kita menggunakan "push ←" untuk peralihan ke papan art, maka kita akan menggunakan "PUSH →" untuk beralih kembali.

Langkah 4: Buat (relatif) animasi masa kompleks

Pada langkah terakhir yang akan datang, kami akan membuat satu animasi yang merangkumi pelbagai papan arten dan menghidupkan pelbagai objek secara berasingan dan bukannya keseluruhan artboard. Khususnya, kami akan memutar kad yang diperluaskan ke kiri selepas mengklik butang, kemudian tetapkan pemasa untuk memutarnya ke kanan, dan kemudian kembali ke keadaan asalnya.

Pada dasarnya, ini adalah animasi swing.

Pilih objek "Button" pada Artboard 2 dan buat penyambung yang disambungkan ke Artboard 3. Gunakan tetapan berikut:

Butiran Interaksi

"Apabila diklik"

"navigasi ke" / "kertas 3"

• animasi
  • "animasi pintar"
  • "perlahan" / "300ms"
• • Nota: Oleh kerana kita memilih "animasi pintar" sebagai jenis animasi, lapisan yang wujud di kedua -dua papan art pada masa yang sama tetapi berbeza secara visual akan beralih dengan lancar, tetapi hanya jika struktur lapisan yang relevan dan lapisan nama tetap konsisten . Jika mereka tidak konsisten, Figma tidak akan memahami bahawa lapisan ini adalah lapisan yang sama dan mereka tidak akan bernyawa dengan betul.

  Dalam panel reka bentuk, anda harus melihat bahawa saya telah menetapkan latar belakang butang ke #FF0000 dan memutarkan kad ke kiri.

  Walau bagaimanapun, bagaimana anda memutar 300ms "putar animasi kiri" ke kanan selepas selesai berjalan? Nah, di sinilah animasi masa diperlukan. Ulangi langkah -langkah di atas, kali ini menghubungkan Artboard 3 ke Artboard 4, "selepas kelewatan" / "300ms" adalah satu -satunya perbezaan. Untuk melengkapkan interaksi, berulang kali menyambungkan Artboard 4 ke Artboard 5 lagi.
  Ini adalah bagaimana kita menjalankan animasi secara berterusan. Dalam contoh kami, interaksi klik awal mengaktifkan "animasi putar kiri" dan animasi berikutnya akan secara automatik mengikuti pemasa.

  Prototaip Figma adalah menyeronokkan, bukan?

  Kami kini telah menyelesaikan tutorial ini. Fail Figma sebenarnya tidak kelihatan berbeza (kecuali beberapa penyambung yang kelihatan apabila menggunakan mod prototaip). Walau bagaimanapun, ia akan mempunyai fungsi yang sangat berbeza dalam mod demo. Jika anda tidak mengikuti tutorial, lihat versi "Dinamik" di mana anda boleh menguji hasil akhir.

  Ia sejuk, bukan?

  Walaupun kita pasti dapat membayangkan gaya animasi yang lebih kompleks dan jenis interaksi, apa yang kita lihat di sini harus meliputi kira -kira 99% daripada apa yang perlu anda ketahui. Ketika datang ke interaksi, kesederhanaan selalu lebih baik!

  Untuk animasi yang memerlukan lebih banyak kerumitan, terdapat plugin Figma yang bersih yang dipanggil Lottiefiles yang pasti patut dicuba.

  Untuk maklumat lanjut mengenai Figma, anda juga boleh membaca tentang menggunakan Figma untuk reka bentuk wireframe.

  soalan yang sering ditanya mengenai prototaip Figma

  Apakah prototaip Figma? Prototaip Figma adalah perwakilan interaktif reka bentuk yang dibuat menggunakan FIGMA, alat reka bentuk kolaboratif. Ia membolehkan pereka untuk menunjukkan dan menguji keberkesanan reka bentuk mereka, memberikan pengalaman yang lebih dinamik dan pengguna.

  Bagaimana untuk membuat prototaip di Figma? Untuk membuat prototaip di Figma, reka bentuk skrin atau bingkai, dan kemudian gunakan mod prototaip untuk menghubungkan bingkai ini bersama -sama untuk menentukan interaksi, peralihan, dan animasi untuk mensimulasikan pengalaman pengguna.

  Bolehkah saya melihat prototaip Figma saya sebelum berkongsi? Ya, Figma membolehkan anda melihat prototaip anda secara langsung dalam editor Figma. Cukup masukkan mod prototaip dan klik butang "Demo" untuk mengalami interaksi reka bentuk anda.

  Bagaimana untuk berkongsi prototaip Figma saya dengan orang lain? Anda boleh berkongsi prototaip FIGMA anda dengan menghasilkan pautan yang boleh dikongsi. Pergi ke menu SHARE, laraskan tetapan perkongsian, dan salin pautan. Sesiapa yang mempunyai pautan ini boleh melihat dan berinteraksi dengan prototaip anda.

  Adakah terdapat cara untuk mengumpulkan maklum balas mengenai prototaip Figma saya? Ya, Figma menyokong mengulas mengenai reka bentuk dan prototaip. Kongsi pautan prototaip anda, dan penonton boleh meninggalkan komen secara langsung mengenai unsur -unsur tertentu atau bidang reka bentuk, memudahkan kolaborasi dan pengumpulan maklum balas.

Atas ialah kandungan terperinci Prototaip Figma: Panduan cepat, langkah demi langkah untuk mockup berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!