Indigo.Design ile Sketch'ten Visual Studio Code'a Geçişi Basitleştirin

(Bu sponsorlu bir makaledir.) Düşünürseniz, yazılım takımları spor takımlarına çok benzer. Her ekip üyesi aynı amaç için çalışırken, oynadıkları rol ve yaptıkları eylemler birbirinden çok farklıdır.

Bu nedenle, topu bir takım üyesinden diğerine sorunsuz bir şekilde taşımak çok önemlidir.

Ne yazık ki, yazılım takımlarında gerçekleşen transfer, doğal olarak spor sahasında gördüğünüz kadar pürüzsüz değil. Bunun başlıca nedenlerinden biri, ürünleri oluşturmak için kullanılan farklı sistemler ve yaklaşımlardır.

Tasarımcılar, Sketch'te piksel mükemmelliğinde kullanıcı arabirimleri oluşturur, yalnızca bunları geliştiricilerin Visual Studio Code IDE'de uygulamalar oluştururken kullanabilecekleri bir dile çevirmeleri gerekir. Ürün tasarımlarını boru hattından geçirmenin sorunsuz bir yolu olmadan, bu verimsizlikler, bir uygulama tasarımcıdan geliştiriciye aktarıldıktan sonra pahalı yeniden çalışmalara ve hata ayıklamaya yol açar.

Söylemeye gerek yok, Sketch'ten IDE'ye geçiş sorununa bir çözüm uzun zaman önce geldi. Bu, yazılım ekiplerinin nasıl işbirliği yapacaklarını veya birbirleriyle iyi iletişim kuracaklarını bilmemeleri değildir. Sadece farklı sistemleri ve stratejileri, bir takımdan diğerine geçişi hantal, zaman alıcı ve hata yüklü hale getiriyor.

Bugün, bunun neden olduğuna ve ajansınızın Indigo.Design'dan iki eklenti ve bir prototip bulut platformuyla sorunu nasıl çözebileceğine bakacağız.

Tasarımcı-Geliştirici Aktarımı Nerede Yanlış Gidiyor?

Öncelikle asıl sormamız gereken şudur:

Tasarımcı-geliştirici aktarımı neden böyle bir sorundur?

Nick Babich kısa süre önce tasarımcıların mükemmel bir şekilde ölçülen ve tutarlı bir şekilde hazırlanmış dijital çözümler yaratmak için nasıl büyük çaba harcadıklarını yazdı. Ancak tasarım sistemleri, akıcı bir şekilde geliştirme sistemlerine dönüşmez.

Tasarımcı bir arayüze ne kadar çok şey yaparsa, aslında bir geliştiriciyle o kadar çok iletişim kurması gerekir. Bu nedenle, bir Sketch tasarım dosyasını teslim etmek ve geliştiricinin onunla çalışmasına izin vermek yeterli değildir. Tasarımcılar, tüm hareketli parçaların nasıl yerleştirileceğini, aralıklı olacağını, biçimlendirileceğini, renklendirileceğini, birleştirilmesi gerektiğini vb. açıklayan tasarım özellikleri sağlamalıdır.

Bir uygulamanın sonunda mükemmel piksel olmasını sağlamanın tek yolu buydu. O zaman bile, geliştiriciler IDE'lerine girdikten sonra hala çok fazla uygulama gerektiriyor.

Tahmin edebileceğiniz gibi, tüm bu süreç tasarımcının çok zamanını alıyor. Ancak tasarım özellikleri olmadan, geliştiriciler riskli bir tahmin oyunu oynamak zorunda kalırlar.

Sadece bu da değil, geliştiriciler genellikle sıkıcı bir iş olan ve yalnızca kullanıcı arayüzünü temsil eden HTML ve CSS ile kodlama alışkanlığında değildir. Bir web uygulamasının çalışmasını sağlayan perde arkasında çok daha fazla kod vardır ve tüm geliştiriciler UI işaretlemesini yazmayı öğrenmek konusunda usta değildir veya bunlarla ilgilenmez. Bu pozisyona zorlandıklarında, dik öğrenme eğrisi projelere daha fazla zaman ekler ve sonuçta ortaya çıkan yeniden çalışma ve hata ayıklama maliyetleri kontrolden çıkararak maliyetleri düşürür.

Yani, gerçekten, tasarımcı-geliştirici devri kimin zamanını boşa harcayacağımız meselesi haline geldi?

“

Geliştiricinin tasarımı gerçeğe nasıl dönüştüreceğini bilmesi için her şeyi yeniden çizmesi gereken tasarımcı mı?

Veya:

Bir tasarıma bakması, ekrandaki her şeyi manuel olarak ölçmesi ve sadece göz küresi yaparak tüm özellikleri doğru bir şekilde elde etmesini umması gereken geliştirici mi?

Her iki senaryoda da kimse kazanamaz. Ve bu süreçte kar marjlarınızı yiyeceksiniz.

Tasarımcıları ve geliştiricileri aynı platformda çalışmaya zorlamanın en iyi çözüm olduğuna inanan bazı ajanslar olabilir. Bu şekilde, Sketch'ten Visual Studio Code'a geçiş sırasında tüm bu çeviri veya yorumlamaları yapmanıza gerek kalmaz. Ancak bu genellikle tasarımcının yaratıcılığının engellenmesine veya geliştiricinin etkili yazılım çözümleri oluşturma becerisinin engellenmesine neden olur.

Peki, cevap nedir?

Indigo.Design ile Tasarımcı-Geliştirici Aktarımını İyileştirin

Indigo.Design, yazılım ekipleri için devir sorunlarını çözmeye çalışan ilk platform değil. InVision ve Zeplin kendi çözümlerini sundular.

Bu platformların her biri, görsel özellikleri geliştiriciler için daha erişilebilir hale getirirken, sonuç olarak tasarımcı-geliştirici ekiplerinin verimliliğini artırdı. özellikle:

• Platformlar kırmızı çizgileri işlediğinden, tasarımcıların artık kullanıcı arayüzünü işaretlemelerine gerek yok.
• Geliştiriciler, tasarımcıların yardımı olmadan tasarım özelliklerini manuel olarak çıkarabilir.

Bununla birlikte, InVision ve Zeplin gibi platformlarda geliştiricilerin her bir öğeyi incelemesi ve çıkarılan özelliklere göre manuel olarak kodlaması gerekiyor. Bu platformlar ayrıca Sketch ve Visual Studio Code arasında henüz kusursuz bir köprü oluşturmadı.

Bu nedenle, tasarımcılar ve geliştiriciler birbirleriyle olabildiğince verimli çalışmak istiyorlarsa, Indigo.Design sorunlarına bir yanıt geliştirdi:

Adım 1: Sketch'te Tasarım

Tasarımcı için bu aşamada gerçekten değişmesi gereken tek bir şey var. Uygulama, sayfalar ve akış, Indigo.Design UI Kit'teki bileşenler kullanılarak Sketch içinde her zamanki gibi tasarlanmaya devam edecek.

Ancak, artık uygulama için kırmızı çizgiler veya teknik özellikler derlemeye gerek yok. Indigo.Design sizin için halleder.

Bundan yararlanmak için tasarımcınızın daha önce kullandıkları prototipleme sistemini terk etmesi gerekir. Bu yeni, modern ve hatasız sistemle, tasarımcınız Indigo.Design eklentisini kullanarak tasarımlarını kolayca buluta aktarabilir.

Buna Plugins menu > Indigo.Design > Publish Prototype altından erişilebilir:

Tasarımcının, müşterilerin gözden geçirmesi veya geliştiricilerin birlikte çalışması için dosyaları dışa aktarmasına ve başka bir sisteme yüklemesine gerek yoktur. Prototipi yayınlamak için oldukları yerde kalırlar.

İşlemi tamamlamak da sadece bir dakika sürer. Ardından tasarımcıya, prototipi gözden geçirmek ve yorum yapmak için müşterilerle ve başkalarıyla paylaşabilecekleri bir bulut bağlantısı verilir.

2. Adım: Indigo.Design Cloud'da çalışın

Başkalarını buluta dahil etmek kolaydır. Sağlanan bağlantı, onları tasarımın gözden geçirilebileceği deneyim bulutuna götürecektir:

Tasarımın üstüne yorum bırakmak da çok kolay. Kullanıcıların tek yapması gereken, Yorumlar panelini açmak, bir raptiye bırakmak ve ona yorumlarını eklemek:

Bu işbirliği yazılımında bundan daha fazlası var. Prototip, buluttan da düzenlenebilir.

Buna erişmek için tasarımcı, geliştirici ve grup erişimine sahip diğer herkes projeyi prototip kitaplığından bulur:

Indigo.Design editörüne girmek için "Prototipi Düzenle"ye tıklayın:

Bir ekran seçildikten sonra tasarımcı, uygulamada yeni bir etkileşim oluşturmak için bir etkin nokta ekleyebilir.

Uygulama kullanıcı arayüzünün özelliklerini incelemek için Indigo.Design düzenleyicisini de kullanabilirsiniz:

Bir öğenin üzerine gelindiğinde göreli boşluk özellikleri ortaya çıkar. Bir öğeye tıklamak çok daha fazla ayrıntıyı ortaya çıkarır:

Geliştirici ayrıca temiz yazılmış ve çıktısı alınmış CSS'yi de bu panelden düzenleyebilir veya kopyalayabilir. (Bir sonraki adımda açıklayacağım gibi, zorunda olmasalar da.)

Tasarımcıların teknik özellikleri oluştururken zamandan tasarruf etmelerinden ne demek istediğimi anladınız mı? Bu tasarımı Indigo.Design bulutuna göndererek, özellikler otomatik olarak oluşturulur.

3. Adım: Visual Studio Code'da Derleyin

Şimdi, tasarımınızın geliştirmeye başlamak için yeterince iyi olduğunu varsayalım. Bir Indigo.Design prototipinin Visual Studio Code'a taşınması, Sketch'ten taşınması kadar kolaydır.

Sketch'te Indigo.Design eklentisi tarafından sağlanan orijinal bulut bağlantısını alın. Artık sahip değilseniz, sorun değil. Indigo.Design'daki kütüphaneler ekranından alabilirsiniz:

Geliştiricinin şimdi yapması gereken tek şey Indigo.Design Code Generator uzantısını yüklemek. Visual Studio Code'un prototipi almak için doğrudan Indigo.Design ile konuşmasını sağlayan şey budur.

Uzantı kurulduktan sonra geliştirici aşağıdakileri yapacaktır:

Halihazırda geliştirilmiş olan uygulama kabuğunu açın. Ardından Indigo.Design Code Generator'ı başlatın. Bulut bağlantısını gireceğiniz yer burasıdır:

Bu, bulutta yaşayan uygulama tasarımlarının yanı sıra oluşturdukları ayrı bileşenleri içeren bir açılır pencereyi ortaya çıkaracaktır.

Geliştirici, uygulamanın tüm bileşenleri için kod oluşturma veya yalnızca ihtiyaç duyduklarını kontrol ederek bileşen bileşen gitme seçeneğine sahiptir. Bu, özellikle bir uygulama devam ediyorsa ve geliştiricinin yalnızca yeni bileşenleri VSC'ye aktarması gerekiyorsa yararlıdır.

“Generate Code Assets” tıklandığında seçilen bileşenler Angular'a okunabilir ve anlamsal HTML ve CSS olarak eklenecektir.

Geliştiricinin artık stilleri yeniden oluşturma veya diğer özellikleri yapılandırma konusunda endişelenmesi gereken daha az şey var. Bunun yerine, zamanlarını iş işlevselliği oluşturmak ve ürünü gerçekten rafine etmek için harcayabilirler.

Bu İşlem Hakkında Bir Not

Bu Sketch – bulut – Visual Studio Code iş akışının yalnızca bir tasarımın ilk yinelemesinde çalışmadığını belirtmek önemlidir. Tasarımcılar müşterilerle geri bildirimler veya kullanıcılarla kullanılabilirlik çalışmaları aracılığıyla çalışırken geliştiriciler inşa edebilir - Indigo.Design'ın hesaba kattığı bir şey.

Diyelim ki tasarımcı, Indigo.Design aracılığıyla bir oturum açma formu kullanıcı arayüzünü taşıdı ve geliştirici, işleri hareket ettirmek için kodu oluşturdu.

Geliştirici, form üzerinde çalışırken TypeScript dosyasına bazı kimlik doğrulama kodları uyguladı.

Bu arada tasarımcı, müşteriden Google ile yeni bir Evrensel Giriş'in uygulanması gerektiğini bildiren bir mesaj aldı. Bu, UX'in değişmesi gerektiği anlamına gelir.

Güncelleme hazır olduğunda ve prototip Indigo.Design ile senkronize edildiğinde, tasarımcı geliştiriciye değişiklikler hakkında bilgi vermesi için mesaj gönderir. Böylece geliştirici, Visual Studio Code Generator'ı bir kez daha başlatır. Ancak, oturum açma ekranını yeniden oluştururken TypeScript dosyasında "Geçersiz Kılma" seçeneğini seçerler. Bu şekilde, yeni HTML ve CSS'yi aynı anda içe aktarırken yazdıkları kodu koruyabilirler.

Geliştirici daha sonra güncellenen tasarıma göre gerekli ayarlamaları yapabilir.

Sarmak

Indigo.Design, Sketch'te çalışan tasarımcılar ve Visual Studio Code'da çalışan geliştiriciler için verimli ve hatasız bir aktarım sağladı.

Tasarımcılar, bir platformda tasarım yapmak ve başka bir platformda prototip oluşturmak, tasarım özelliklerini belirlemek veya dosya dışa aktarma işlemleriyle uğraşmak için zaman kaybetmezler. Geliştiriciler, tasarım amacını statik bir dosyadan yeniden oluşturmaya çalışarak zaman kaybetmezler.

Indigo.Design Ürün Geliştirme Kıdemli Başkan Yardımcısı Jason Beres'in dediği gibi:

Indigo.Design kod oluşturma ile tüm bu hatalardan %100 kaçınılır. Yalnızca tasarımın ruhu korunmakla kalmaz, aynı zamanda geliştiricinin tasarımı manuel olarak eşleştirmek zorunda kalma talihsiz bir konumda olmaması için piksel mükemmelliğindeki HTML ve CSS oluşturulur.

Ve tasarımcı-geliştirici iş akışlarındaki ve devir teslimindeki teknik sapmaları çözerek, ajansınız yeniden çalışma ve hata ayıklama maliyetlerini büyük ölçüde azaltacaktır. Ayrıca, yazılım ekibinize, süreç boyunca ve mükemmel piksel durumunda uygulamalar edinmenin daha verimli ve daha hızlı bir yolunu sağlayarak kârınızı artıracaksınız.