Dari Desain Hingga Kode Bereaksi Ramah Pengembang Dalam Beberapa Menit Dengan Anima

Ini adalah artikel bersponsor ramah yang ditulis dengan dukungan baik dari teman-teman terkasih kami di Anima yang membantu Anda mendesain prototipe high-fidelity yang sepenuhnya interaktif dengan Sketch, Figma atau Adobe XD. Terima kasih!

Janji desain mulus untuk terjemahan kode kembali ke pembuat halaman WYSIWYG awal. Terlepas dari tujuan yang mengagumkan, kelemahan terbesar mereka (di antara banyak) adalah kode mengerikan yang mereka hasilkan. Skeptisisme tetap ada hingga hari ini dan setiap kali ide ini muncul kembali, kekhawatiran terbesar selalu terkait dengan kualitas dan pemeliharaan kode.

Ini akan berubah karena produk baru telah membuat lompatan besar ke arah yang benar. Tujuan utama mereka adalah untuk mengotomatisasi desain ke proses kode, tetapi tidak dengan mengorbankan kualitas kode. Salah satu produk ini, Anima, akhirnya mencoba menjembatani kesenjangan dengan menyediakan desain yang lengkap untuk platform pengembangan.

Apa itu Anima?

Anima adalah alat desain-untuk-pengembangan. Ini bertujuan untuk mengubah proses handoff desain menjadi kolaborasi berkelanjutan. Desainer dapat menggunakan Anima untuk membuat prototipe yang sepenuhnya responsif yang terlihat dan berfungsi persis seperti produk jadi (tidak perlu pengkodean). Pengembang , pada gilirannya, dapat mengambil desain ini dan mengekspornya ke dalam kode React/HTML yang ramah pengembang. Alih-alih mengkodekan UI dari awal, mereka bebas untuk fokus pada logika dan arsitektur.

Itu dilakukan dengan bantuan plugin yang terhubung langsung ke alat desain Anda dan memungkinkan Anda untuk mengonfigurasi desain dan menyinkronkannya ke platform web Anima. Di situlah tim lainnya dapat mengakses prototipe, mendiskusikannya, dan memilih spesifikasi atau aset yang berguna. Selain fungsionalitas kolaborasi, ini memberi pengembang keunggulan berkat kode yang dihasilkan.

Ini bisa membuat perbedaan besar dalam tarian bolak-balik tradisional antara desainer dan pengembang. Itu membuat semuanya di satu tempat, sinkron, dan memungkinkan kedua belah pihak untuk membuat perubahan baik menggunakan kode atau alat desain.

Memasang Plugin Dan Menyiapkan Proyek

Memulai dengan Anima itu sederhana. Anda harus terlebih dahulu membuat akun dan kemudian menginstal plugin. Sementara saya akan menggunakan Figma untuk panduan ini, Anima mendukung semua alat desain utama: Sketch, Figma, dan Adobe XD.

• Animasi untuk Sketsa
• Anima untuk Figma
• Animasi untuk Adobe XD

Setelah ini selesai, pastikan Anda membuat proyek di platform Anima — di situlah desain kami akan muncul saat kami menyinkronkannya.

Plugin itu sendiri dipisahkan menjadi tiga bagian utama, masing-masing dengan daftar opsi. Sebagian besar dari apa yang akan kita lakukan hanyalah memilih salah satu opsi itu dan kemudian menerapkan lapisan atau bingkai tertentu di Figma .

Membuat Prototipe Responsif

Untuk tujuan artikel, kami telah merancang pengalaman orientasi yang akan diubah menjadi prototipe interaktif. Sejauh ini kami telah menyiapkan layar untuk tiga breakpoint paling umum dan kami telah menghubungkannya bersama-sama menggunakan fitur prototipe Figma.

Salah satu hal menarik yang bisa kami capai dengan Anima adalah membuat prototipe yang cocok untuk semua ukuran layar. Prototipe tradisional yang terbuat dari gambar yang dapat diklik bersifat statis dan sering kali gagal di bawah ukuran layar yang berbeda.

Untuk melakukannya, klik opsi “Breakpoints” dan Anima akan menanyakan bingkai yang ingin Anda sambungkan. Pilih semua frame untuk menambahkannya sebagai breakpoints. Kemudian konfirmasikan pilihan Anda dengan mengklik "Selesai".

Setelah Anda siap, klik "Pratinjau di browser" untuk melihat hasilnya. Saat itulah Anima akan mengubah desain Anda menjadi kode.

Hal pertama yang akan Anda perhatikan adalah bahwa prototipe sekarang diubah menjadi HTML dan CSS. Semua konten dapat dipilih dan mengalir kembali saat layar diubah ukurannya. Ini paling terlihat ketika Anda memilih mode "Responsif" di pratinjau prototipe dan bermain dengan ukuran layar yang berbeda.

Untuk mencapai transisi yang lebih mulus, penting untuk menggunakan fitur batasan Figma saat mendesain komponen Anda. Pastikan juga mencentang kotak “Use Figma Constraints” di bagian “Layout” plugin.

Hidupkan Desain Anda Dengan Lapisan Cerdas

Kita bisa mengambil hal-hal sedikit lebih jauh. Karena Anima mengubah desain menjadi kode, kemungkinan tidak terbatas untuk hal-hal yang dapat kita tambahkan untuk membuat prototipe kita lebih realistis.

Animasi dan efek hover akan menjadi cara yang bagus untuk membuat prototipe lebih hidup dan untuk mengesankan pemangku kepentingan. Anima menawarkan berbagai opsi yang dapat diterapkan ke lapisan atau komponen apa pun. Dalam kasus kami, kami akan memilih layer headline, lalu pilih "Entrance animation" dan "Fade In". Di bidang penundaan, kami akan menambahkan 0.5 .

Untuk setiap bidang, kami akan menambahkan efek cahaya saat mengarahkan kursor. Pilih layer bidang, lalu "Hover effect" dan pilih "Glow". Ulangi hal yang sama untuk tombol.

Sekarang kita telah menerapkan semua perubahan, kita dapat melihat bahwa prototipe mulai terasa seperti produk nyata.

Salah satu fitur unik yang ditawarkan Anima adalah kemampuan untuk menambahkan bidang dan formulir langsung ke prototipe. Karena kami sedang merancang pengalaman orientasi, ini sebenarnya akan sangat berguna bagi kami. Entri data adalah salah satu titik churn terbesar dalam pengalaman produk apa pun dan sangat sulit untuk menguji ide tanpa memperhitungkannya.

Mirip dengan bagaimana kami menambahkan efek sebelumnya, kami sekarang memilih komponen bidang dan memilih "Bidang teks". Dari sana, kita harus memilih jenis bidang yang kita butuhkan. Jika kita memilih bidang kata sandi, misalnya, input akan disembunyikan dan Anima akan menambahkan fungsionalitas tampilkan/sembunyikan ke bidang tersebut.

Seperti yang Anda lihat, bidang sekarang berfungsi sebagaimana dimaksud. Anda juga dapat mengumpulkan semua data yang dikumpulkan dari bidang tersebut dalam spreadsheet. Pilih tombol "Lanjutkan" dan kemudian klik opsi "Kirim Tombol" di Anima. Ini akan membuka dialog tambahan, di mana kita perlu mencentang kotak "Tambahkan ke Spreadsheet" dan pilih tujuan pengalihan jika berhasil atau gagal.

Selanjutnya, kami akan menambahkan animasi Lottie untuk layar kesuksesan kami karena ini akan menjadi cara yang bagus untuk membuat pengalaman sedikit lebih menarik. Untuk itu, kita perlu menambahkan layer placeholder di tempat animasi, lalu pilih dan pilih opsi “Video / GIF / Lottie” di plugin.

Kemudian kami akan menempelkan URL animasi Lottie kami dan mencentang kotak "Putar Otomatis" dan "Tidak ada kontrol". Dalam kasus kami, kami tidak ingin memiliki kontrol pemutar video, karena ini adalah animasi yang sukses.

Terapkan perubahan dan buka mode pratinjau untuk melihat hasilnya. Seperti yang Anda lihat, ketika kami mengisi bidang dan mengirimkan formulir, kami diarahkan ke halaman sukses kami, dengan animasi perulangan.

Bagikan Desain Dengan Anggota Tim lainnya

Sampai saat itu, kami sedang mengerjakan draf yang hanya terlihat oleh kami. Sekarang saatnya untuk membaginya dengan anggota tim lainnya . Cara melakukannya di aplikasi adalah dengan mengklik "Pratinjau di browser", periksa tampilannya, dan jika Anda puas, lanjutkan dengan "Sinkronkan".

Setiap orang yang diundang ke proyek sekarang akan memiliki akses ke desain dan akan dapat melihat pratinjau, memberikan komentar, dan memeriksa kode.

Pengembang Dapat Mendapatkan Kode React yang Dapat Digunakan Kembali

Seperti disebutkan sebelumnya, sebagai pengembang, kami biasanya skeptis terhadap alat yang menghasilkan kode, terutama karena menulis sesuatu dari awal selalu lebih cepat daripada memfaktorkan ulang sesuatu yang ditulis dengan buruk. Untuk menghindari hal ini, Anima telah mengadopsi beberapa praktik terbaik untuk menjaga kode tetap bersih, dapat digunakan kembali, dan ringkas.

Saat kita beralih ke mode "Kode", kita dapat mengarahkan dan memeriksa elemen desain kita. Setiap kali kita memilih sebuah elemen, kita akan melihat kode yang dihasilkan di bawahnya. Tampilan default adalah React , tetapi kita juga dapat beralih ke HTML dan CSS. Kami juga dapat menyesuaikan preferensi dalam sintaks dan konvensi penamaan.

Kelas menggunakan kembali nama lapisan dalam alat desain Anda, tetapi desainer dan pengembang juga dapat mengganti nama lapisan. Namun, penting untuk menyepakati konvensi penamaan terpadu yang akan jelas dan lugas bagi desainer dan pengembang.

Bahkan jika kami membiarkan beberapa lapisan tidak diberi nama, pengembang sebenarnya dapat menimpanya dan membuat perubahan bila perlu. Pengalaman ini mengingatkan saya pada fitur elemen Inspeksi Chrome, dan semua perubahan disimpan dan disinkronkan dengan proyek.

Jika Anda menggunakan Vue atau Angular, diharapkan Anima akan mulai mendukung kerangka kerja ini dalam waktu dekat juga.

Sedang mencari

Seperti yang bisa kita lihat, kesenjangan antara desain dan kode terus menjembatani. Bagi mereka yang menulis kode, menggunakan alat seperti itu sangat praktis karena dapat mengurangi banyak pekerjaan berulang di frontend. Bagi mereka yang mendesain, ini memungkinkan pembuatan prototipe, kolaborasi, dan sinkronisasi yang akan sulit dicapai dengan mengirim gambar statis bolak-balik.

Yang sudah pasti adalah Anima menghilangkan banyak aktivitas yang sia-sia dalam proses lepas tangan dan memungkinkan desainer dan pengembang untuk fokus pada hal yang penting: membangun produk yang lebih baik. Saya berharap untuk melihat apa yang muncul selanjutnya di Anima!