Figma Dev Mode Kullanımı: Geliştiriciye Ölçü, Kod ve Varlık Aktarma

Dev Mode ne işe yarar

Tasarımcı bir ekranı bitirdiğinde geliştiricinin sorusu şudur: bu nasıl yapılacak? Hangi boşluk, hangi renk, hangi yazı stili, hangi görsel dosyası? Bu soruların cevabı eskiden ekran görüntüleri üzerine yazılan notlarda ya da uzun mesajlaşmalarda aranırdı.

Figma’nın Dev Mode görünümü bu bilgileri tasarım dosyasının içinden geliştirici için okunur hâle getirir. Seçilen katmanın adı, türü ve özellikleri bir inceleme panelinde görünür. Ölçüler ve boşluklar işaretlenebilir, uygulanan stiller ve değişkenler görülebilir, varlıklar dışa aktarılabilir.

Bu görünüm düzenleme için değil inceleme içindir. Geliştirici tasarımı yanlışlıkla bozmadan bilgiye ulaşır; tasarımcı da her sorunun cevabını elle yazmak zorunda kalmaz. Aktarım dosyanın içinde olduğu için sürüm farkı riski de azalır.

Burada konu, Figma’da Dev Mode’un nasıl kullanıldığıdır; devir kavramının kendisi ve araçların karşılaştırılması ayrı konulardır.

Aktarıma hazırlık: tasarım dosyasını düzenli tutmak

Dev Mode’un faydası, dosyanın düzenine bağlıdır. Karmaşık, adsız katmanlarla dolu bir dosya, iyi bir görünümde bile geliştiriciyi yorar.

Hazırlıkta şunlara dikkat edin:

• Anlamlı katman adları: “Çerçeve” yerine “Ödeme özeti kartı” gibi adlar, koda geçerken bile referans olur.
• Bileşenler: Tekrar eden öğeleri bileşen yapın; geliştirici de aynı yapıyı kodda bileşen olarak kurar.
• Değişkenler ve stiller: Renk, boşluk ve yazı değerlerini rastgele değil, adlandırılmış değişkenlerle kullanın. Geliştirici panelde değerin adını görür ve kodda aynı adı kullanabilir.
• Otomatik yerleşim: Elemanların büyüyüp küçüldüğünde nasıl davrandığını belirtir.
• Varlıklar: Dışa aktarılacak simge ve görselleri işaretleyin ve uygun biçimlerde dışa aktarılmaya hazır tutun.

Bu hazırlık tasarımcının işi gibi görünür ama geri dönüşü hızlıdır; geliştirici her ayrıntı için soru sormak zorunda kalmaz.

Hazır olduğunu işaretlemek ve izlemek

Figma’da bir tasarımı geliştirmeye hazır olarak işaretleme seçeneği vardır. Bu işaretleme geliştiriciye hangi çerçevelerin kesinleşmiş olduğunu söyler. Tasarımcı taslak halindeki ekranları bu işaretle karıştırmamalıdır; geliştirici de hazır olarak işaretlenmiş çerçevelere odaklanır.

Tasarım sonradan değiştiğinde Dev Mode’un değişiklik karşılaştırma özelliği devreye girer. Geliştirici, önceki ve güncel sürüm arasındaki farkı görebilir; ayrıca bir bileşenin ana bileşenle karşılaştırması da yapılabilir. Böylece yeniden teslimde bütün ekranı baştan okumak yerine yalnız değişen kısımlara bakılır.

Döngü şöyle işler: tasarımcı hazırlar ve işaretler, geliştirici inceler ve uygular, tasarım değişirse fark görünür ve yeniden uygulanır. Bu döngü yazılı bir iletişimle desteklendiğinde en iyi sonucu verir: değişikliğin nedeni kısa bir notla belirtilmelidir.

Geliştirme takibi için Dev Mode, kaynak kod depoları, görev takip araçları ve bileşen dokümantasyonu gibi dış kaynaklara bağlantı eklemeyi de destekler. Böylece tasarım, ilgili görev ya da koda bir tıkla bağlanır.

Geliştirici tarafı: neleri nasıl incelemeli

Dev Mode’a giren geliştirici bir ekranı üç soruyla okur: neyi ölçüyorum, neyi kullanıyorum, neyi dışa aktarıyorum?

Ölçü ve boşluklar için seçili öğenin özelliklerine ve işaretli ölçülere bakılır. Özellik değerleri liste görünümünde tek tıkla kopyalanabilir. Uygulanan stiller ve değişkenler de panelde görünür; bunlar kodda kullanılacak adlandırılmış değerlerle eşleşmelidir.

Varlıklar bölümünden simge ve görseller indirilebilir; dışa aktarma ayarlarında PNG, JPG, SVG ve PDF gibi biçimler bulunur. Vektör simgeler için SVG sıklıkla uygundur, fotoğraflar için görsel biçimler. Biçim seçimini projenin teknik gereksinimine göre yapın.

Kod parçaları paneli, seçili öğenin kod karşılığını bir dil seçimiyle gösterir. Bu çıktıyı doğrudan üretim koduna yapıştırmak yerine bir başlangıç noktası olarak görün; projenin bileşen yapısına ve adlandırmasına uygun yeniden düzenlenmesi gerekir. Figma ayrıca bileşenleri koddaki karşılıklarına bağlayan Code Connect özelliğini sunar; hangi planda kullanılabildiğini kendi hesabınızda kontrol edin.

Bir ölçü ya da davranış belirsizse tahmin etmek yerine tasarımcıya sorun ve cevabı dosyaya not olarak ekleyin.

Sık hatalar ve iyi pratikler

Birinci hata, dosyayı hazırlamadan Dev Mode’a güvenmektir. Adsız katmanlar ve rastgele değerler, araç ne kadar iyi olursa olsun karışık bir aktarım üretir.

İkinci hata, hazır işaretini gelişigüzel kullanmaktır. Taslak ekranların hazır görünmesi, geliştiricinin yanlış ekrana zaman harcamasına yol açar.

Üçüncü hata, üretilen kodu olduğu gibi kullanmaktır. Kod çıktısı projenin yapısını bilmez; incelenip uyarlanmalıdır.

Dördüncü hata, davranışı atlamaktır. Dev Mode ölçü ve stili verir ama bir düğmenin hata durumunda ne yaptığı, bir listenin boş halinde ne gösterdiği gibi davranışlar için yazılı not ve konuşma gerekir.

Beşinci hata, değişikliği haber vermemektir. Değişiklik karşılaştırma farkı gösterir ama nedenini söylemez; kısa bir not iş birliğini güçlendirir.

İyi pratik olarak tasarımcı ve geliştiricinin dosyayı birlikte gözden geçirdiği kısa bir devir görüşmesi planlayın; Dev Mode görüşmenin yerini değil, ayrıntı yükünü alır.

Örnek: ödeme özeti ekranının devri

Bir tasarımcı mobil uygulamadaki ödeme özeti ekranını bitirdi. Kartın başlığı, sipariş satırları, toplam alanı ve onay düğmesi bileşenlerden kurulmuş; renkler ve boşluklar adlandırılmış değişkenlerden geliyor. Tasarımcı ekranı hazır olarak işaretler ve geliştiriciye kısa bir not yazar: onay düğmesi ödeme işlenirken pasif görünür, hata durumunda kartın üstünde bir uyarı çıkar.

Geliştirici Dev Mode’da kartı seçer, boşlukları ve yazı stilini okur, simgeyi SVG olarak dışa aktarır, değişken adlarını kod tarafındaki tasarım değerleriyle eşleştirir. Pasif durum ve hata uyarısı Dev Mode’un ölçülerinde görünmez; bunlar nottan okunur. Sonraki hafta toplam alanının hizası değişince geliştirici değişiklik karşılaştırmayı açar, yalnız o alanı günceller ve tasarımcıya neyi değiştirdiğini yazar.

Devir öncesi kısa kontrol listesi:

• Katman adları anlamlı mı?
• Tekrarlayan öğeler bileşen mi?
• Renk ve boşluklar değişkenden mi geliyor?
• Dışa aktarılacak varlıklar işaretli mi?
• Pasif, hata ve boş durumlar için not yazıldı mı?
• Yalnız kesinleşen çerçeveler mi hazır işaretli?

Bu beceriyi Mindset programlarında nerede çalışırsınız

Tasarımı geliştiriciyle birlikte hayata geçiren bir UX/UI tasarımcısı ya da arayüz geliştiricisi için devir kalitesi, projenin hızını ve hatasızlığını belirler. UX/UI Bootcamp ve UX / UI Uzmanlığı Sertifika Programı’ndaki Geliştirici İş Birliği ve Tasarımdan Koda modülü, devir sürecinin ekip düzeyinde nasıl kurulduğunu ele alır.