Anima ile Tasarımdan Geliştirici Dostu Tepki Koduna Dakikalar İçinde

Bu, Sketch, Figma veya Adobe XD ile tamamen etkileşimli yüksek kaliteli prototipler tasarlamanıza yardımcı olan Anima'daki sevgili arkadaşlarımızın nazik desteğiyle yazılmış, sponsorlu dostça bir makaledir. Teşekkür ederim!

Kod çevirisine sorunsuz tasarım vaadi, erken WYSIWYG sayfa oluşturucularına kadar uzanır. Takdire şayan hedefe rağmen, (birçoğu arasında) en büyük kusurları, ürettikleri korkunç koddu. Şüphecilik bugüne kadar devam ediyor ve bu fikir ne zaman yeniden ortaya çıksa, en büyük endişeler her zaman kodun kalitesi ve sürdürülebilirliği ile ilgilidir.

Yeni ürünler doğru yönde büyük atılımlar yaptıkça bu durum değişmek üzere. Nihai hedefleri, tasarımdan koda sürecini otomatikleştirmek, ancak kod kalitesi pahasına değil. Bu ürünlerden biri olan Anima, nihayet geliştirme platformuna tam teşekküllü bir tasarım sağlayarak aradaki boşluğu kapatmaya çalışıyor.

Anima nedir?

Anima, tasarımdan geliştirmeye yönelik bir araçtır. Tasarım devir sürecini sürekli bir işbirliğine dönüştürmeyi amaçlar. Tasarımcılar , tam olarak bitmiş ürün gibi görünen ve çalışan tamamen duyarlı prototipler oluşturmak için Anima'yı kullanabilir (kodlama gerektirmez). Geliştiriciler ise bu tasarımları alıp geliştirici dostu React/HTML koduna aktarabilir. Kullanıcı arayüzünü sıfırdan kodlamak yerine, mantık ve mimariye odaklanmakta özgürdürler.

Bunu, doğrudan tasarım aracınıza bağlanan ve tasarımları yapılandırmanıza ve bunları Anima'nın web platformuyla senkronize etmenize olanak tanıyan bir eklentinin yardımıyla yapar. Ekibin geri kalanının prototipe erişebileceği, tartışabileceği ve faydalı özellikleri veya varlıkları seçebileceği yer burasıdır. İşbirliği işlevinin yanı sıra, oluşturulan kod sayesinde geliştiricilere bir başlangıç ​​sağlar.

Bu, tasarımcılar ve geliştiriciler arasında gidip gelen geleneksel ileri geri dansta büyük bir fark yaratabilir. Her şeyi tek bir yerde, senkronize halde tutar ve her iki tarafın da kod veya tasarım araçlarını kullanarak değişiklik yapmasına olanak tanır.

Eklentiyi Kurmak ve Bir Proje Kurmak

Anima'yı kullanmaya başlamak basittir. Önce bir hesap oluşturmanız ve ardından eklentiyi yüklemeniz gerekir. Bu izlenecek yol için Figma'yı kullanacak olsam da, Anima tüm önemli tasarım araçlarını destekliyor: Sketch, Figma ve Adobe XD.

• Çizim için Animasyon
• Figma için Anima
• Adobe XD için Animasyon

Bu yapıldıktan sonra, Anima'nın platformunda bir proje oluşturduğunuzdan emin olun - tasarımlarımızı senkronize ettiğimizde burada görünecek.

Eklentinin kendisi, her biri bir seçenekler listesi içeren üç ana bölüme ayrılmıştır. Yapacağımızın çoğu, bu seçeneklerden birini seçip Figma'da belirli bir katman veya çerçeve uygulamaktır .

Duyarlı Bir Prototip Oluşturma

Makalenin amacı doğrultusunda, etkileşimli bir prototipe dönüştürülecek bir işe alım deneyimi tasarladık. Şimdiye kadar en yaygın üç kesme noktası için ekranlar hazırladık ve bunları Figma'nın prototipleme özelliklerini kullanarak birbirine bağladık.

Anima ile elde edebileceğimiz ilginç şeylerden biri, tüm ekran boyutlarına uyan prototipler yapmaktır. Tıklanabilir görüntülerden oluşan geleneksel prototipler statiktir ve genellikle farklı ekran boyutlarında başarısız olur.

Bunu yapmak için “Kesme Noktaları” seçeneğine tıklayın ve Anima size bağlamak istediğiniz çerçeveleri soracaktır. Kesme noktaları olarak eklemek için tüm kareleri seçin. Ardından “Bitti”ye tıklayarak seçiminizi onaylayın.

Hazır olduğunuzda, sonucu görmek için “Tarayıcıda önizle” seçeneğine tıklayın. İşte o zaman Anima tasarımlarınızı koda dönüştürecektir.

Fark edeceğiniz ilk şey, prototipin artık HTML ve CSS'ye dönüştürülmüş olmasıdır. Tüm içerik seçilebilir ve ekran yeniden boyutlandırıldıkça yeniden akar. Bu, en çok prototip önizleyicide "Duyarlı" modunu seçtiğinizde ve farklı ekran boyutlarıyla oynadığınızda görünür.

Daha yumuşak geçişler elde etmek için, bileşenlerinizi tasarlarken Figma'nın kısıtlama özelliklerini kullanmak önemlidir. Eklentinin “Düzen” bölümündeki “Figma Kısıtlamalarını Kullan” kutusunu da işaretlediğinizden emin olun.

Akıllı Katmanlarla Tasarımlarınızı Hayata Geçirin

İşleri biraz daha ileri götürebiliriz. Anima, tasarımları koda dönüştürdüğünden, prototipimizi daha gerçekçi hale getirmek için ekleyebileceğimiz şeyler için olasılıklar sonsuzdur.

Animasyonlar ve fareyle üzerine gelme efektleri , prototipi daha canlı hale getirmenin ve paydaşları etkilemenin harika bir yolu olacaktır. Anima, herhangi bir katmana veya bileşene uygulanabilecek çeşitli seçenekler sunar. Bizim durumumuzda, başlık katmanını seçeceğiz, ardından “Giriş animasyonu” ve “Giriş”i seçeceğiz. Gecikme alanına 0.5 ekleyeceğiz.

Her alan için üzerine gelindiğinde bir parlama efekti ekleyeceğiz. Alan katmanını, ardından "Vurgulu efekti" seçin ve "Glow" öğesini seçin. Düğme için de aynısını tekrarlayın.

Artık tüm değişiklikleri uyguladığımıza göre, prototipin gerçek bir ürün gibi hissetmeye başladığını görebiliyoruz.

Anima'nın sunduğu benzersiz özelliklerden biri, prototiplere canlı alanlar ve formlar ekleme yeteneğidir. Bir onboarding deneyimi tasarladığımız için bu aslında bizim için gerçekten faydalı olacak. Veri girişi, herhangi bir ürün deneyimindeki en büyük kayıp noktalarından biridir ve fikirleri hesaba katmadan test etmek gerçekten zordur.

Önceki efektleri nasıl eklediğimize benzer şekilde, şimdi alan bileşenini seçiyoruz ve “Metin alanı” seçeneğini seçiyoruz. Oradan, ihtiyacımız olan alan türünü seçmemiz gerekecek. Örneğin bir şifre alanı seçersek, giriş gizlenecek ve Anima alana bir göster/gizle işlevi ekleyecektir.

Gördüğünüz gibi, alanlar artık amaçlandığı gibi çalışıyor. Bu alanlardan toplanan tüm verileri bir elektronik tabloda toplamak da mümkündür. “Devam” düğmesini seçin ve ardından Anima'da “Gönder Düğmesi” seçeneğine tıklayın. Bu, "E-Tabloya Ekle" kutusunu işaretlememiz ve başarı veya başarısızlık durumunda yeniden yönlendirme hedeflerini seçmemiz gereken ek bir iletişim kutusu açacaktır.

Ardından, deneyimi biraz daha ilgi çekici hale getirmenin harika bir yolu olacağından, başarı ekranımıza bir Lottie animasyonu ekleyeceğiz. Bunun için animasyonun yerine bir yer tutucu katman eklememiz gerekiyor, ardından onu seçip eklentideki “Video / GIF / Lottie” seçeneğini seçiyoruz.

Ardından Lottie animasyonumuzun URL'sini yapıştıracağız ve “Otomatik oynat” ve “Kontrol yok” kutularını işaretleyeceğiz. Bizim durumumuzda, bu bir başarı animasyonu olduğu için herhangi bir video oynatıcı kontrolüne sahip olmak istemiyoruz.

Değişiklikleri uygulayın ve sonuçları görmek için önizleme modunu açın. Gördüğünüz gibi, alanları doldurup formu gönderdiğimizde, döngüsel bir animasyonla başarı sayfamıza yönlendiriliyoruz.

Tasarımları Ekibin Geri Kalanıyla Paylaşın

O zamana kadar sadece bizim görebileceğimiz bir taslak üzerinde çalışıyorduk. Şimdi bunu ekibin geri kalanıyla paylaşma zamanı. Bunu uygulamada yapmanın yolu, “Tarayıcıda önizle” seçeneğine tıklayarak nasıl göründüğünü kontrol etmek ve memnunsanız “Senkronizasyon” ile devam etmektir.

Projeye davet edilen herkes artık tasarımlara erişebilecek ve ön izleme yapabilecek, yorum bırakabilecek ve kodu inceleyebilecek.

Geliştiriciler Yeniden Kullanılabilir React Kodu Alabilir

Daha önce de belirtildiği gibi, geliştiriciler olarak, çoğunlukla sıfırdan bir şeyler yazmak, kötü yazılmış bir şeyi yeniden düzenlemekten her zaman daha hızlı olduğu için, genellikle kod üreten araçlara şüpheyle yaklaşırız. Bunu önlemek için Anima, kodu temiz, yeniden kullanılabilir ve özlü tutmak için bazı en iyi uygulamaları benimsemiştir.

“Kod” moduna geçtiğimizde, tasarımımızın öğelerini gezebilir ve inceleyebilirsiniz. Ne zaman bir eleman seçsek, altında oluşturulan kodu göreceğiz. Varsayılan görünüm React'tir , ancak HTML ve CSS'ye de geçiş yapabiliriz. Ayrıca sözdizimi ve adlandırma kurallarındaki tercihleri ​​de ayarlayabiliriz.

Sınıflar, tasarım aracınızdaki katmanların adlarını yeniden kullanır, ancak hem tasarımcılar hem de geliştiriciler katmanları yeniden adlandırabilir. Yine de, hem tasarımcılar hem de geliştiriciler için açık ve anlaşılır olacak birleşik adlandırma kuralları üzerinde anlaşmak önemlidir.

Bazı katmanları isimsiz bırakmış olsak bile, geliştiriciler aslında onları geçersiz kılabilir ve gerektiğinde değişiklik yapabilir. Bu deneyim bana Chrome'un Inspect element özelliğini hatırlatıyor ve tüm değişiklikler kaydedilip projeyle senkronize ediliyor.

Vue veya Angular kullanıyorsanız, Anima'nın da yakın gelecekte bu çerçeveleri desteklemeye başlaması bekleniyor.

Dörtgözle beklemek

Gördüğümüz gibi, tasarım ve kod arasındaki boşluk köprü kurmaya devam ediyor. Kod yazanlar için böyle bir araç kullanmak çok pratiktir çünkü ön uçta çok fazla tekrar eden işi azaltabilir. Tasarlayanlar için, statik görüntüleri ileri geri göndererek elde edilmesi zor olan prototip oluşturmaya, işbirliğine ve senkronizasyona olanak tanır.

Halihazırda kesin olan şey, Anima'nın devir sürecinde pek çok savurgan faaliyeti ortadan kaldırdığı ve hem tasarımcıların hem de geliştiricilerin önemli olana odaklanmasına izin verdiği: daha iyi ürünler oluşturmak. Anima'da sırada ne olacağını görmek için sabırsızlanıyorum!