Sketch (v44) Resizing: Nasıl Çalışır?

Daha yeni! Daha esnek!

Artık Sketch’in yeni güncellemelerinden faydalanmak için yıllık abone olmanız gerekiyor. Bu aboneliği başlatanların 44. versiyona geçişi ile birlikte kullanabilecekleri yeni bir ‘Resizing’ aracı mevcut. Bu aracın, Sketch’in güncelleme listesindeki tanımı şöyle;

NEW IN SKETCH 44
Resizing options have been updated to give you more power and control over how your layers should behave when their parent is resized.

Yeni ‘Resizing’ aracının ekran görüntüsü

Eskisine nazaran daha kullanışlı ve katmanlardaki (layer) konum, ölçü hakimiyetini daha da artırıyor.

İster UX designer ister UI designer, Sketch’i kullanan herkesin, materyallerini her daim tutarlı bir hale getirebilmesi, katmanlarının duyarlı (responsive) olabilmesini sağlamak için ortaya çıkmış bir güncelleme.

Bu araç, bir grubun ölçüsünü değiştirdiğinizde, o grup içindeki layer’ların konum ve ölçülerindeki istenmeyen karmaşayı kontrol altına alabiliyor.

İlk bakış

Alttaki örnekte, bir dikdörtgen ve bunun köşelerine 20px boşluk ile konumlanmış daireyi kapsayan bir grubun ölçülerini değiştirdiğimizde, normalde nasıl şekil değiştirdiğini görün;

Resizing aracı ile hiç bir özellik seçili değilken dairenin ‘width’ ve ‘height’ değeri, üst ve sağ kısma olan boşluğuyla birlikte, değiştirilen ölçünün oranına ayak uyduruyor.

Şimdi dairenin, kapsayıcı grubunun ölçüsü değiştiğinde, üst ve sağ kenarlara olan boşluğunun değerini korumasını söylüyoruz.

Grup ölçüsünü değiştirsek bile dairenin üst ve sağ kenara olan boşluğu 20px olarak kalıyor. Eski adıyla ‘Pin to corner’ denebilir.

Dairenin konumu ile birlikte ‘width’ ve ‘height’ değerlerinin de korunmasını istersek -adı üzerinde- ‘Fix Width’ ve ‘Fix Height’ seçeneklerini kullanıyoruz. Bu bize istediğimiz sonucu verecektir. Muhteşem! 😎

Bu özelliği daha da spesifik durumlara uyarlayalım! Grubumuzun içinde yine bir dikdörtgen ve bunun üzerinde, buton görevi görebilecek olan başka bir dikdörtgenimiz var. Buton olabilecek olan öğemizin grubun en altına ve iki kenara olan konumu değişmeden, yüksekliği de artmadan ölçülendirilebilir olmasını istiyoruz. Öğeyi seçip, örnekteki seçenekleri işaretlersek, iki öğeyi de kapsayan grubun ölçülerini değiştirdiğimizde konumlar ve ölçüler harika sonuç verecektir.

‘Text layer’ için alınan sonuçlar

İçinde ‘text layer’ bulunan grubu doğruca ölçülendirmek de mümküm. Hadi bunu içeren bir örnekle devam edelim. Bu örnekte yazımızın da buton ile birlikte alt kenara olan mesafesini korumasını istiyoruz. Gerekirse satır sayısı değişecek ama alt kenara olan değeri değişmeyecektir.

‘Artboard’ ve ‘Symbol’ ile kullanım

Adjust content on resize

Versiyon 44 ile birlikte gelen yeni ‘resizing’ özelliklerinden biri de, ‘Artboard’lara da uygulanabilmesi. ‘Artboard’ seçiliyken ‘Adjust content on resize’ seçeneği, ‘artboard’un da bir grup gibi hareket edebilmesini sağlıyor.

Bu seçenek ile Sketch neyi sağlıyor göz atalım. ‘Adjust content on resize’ seçeneği seçili değilken ve seçiliyken ‘Artboard’umuzun ölçüsünü değiştirdiğimizde içindeki öğelerin ‘resizing’ ayarlarına göre şekil ve hareketlerini görün.

Not: ‘Adjust content on resize’ seçeneği kapalı olduğunda, ‘Artboard’a ölçüsüne bağlı ‘resizing’ özellikleri pasif olacaktır.

Solda ‘Adjust content on resize’ kapalıyken, Sağda ‘Adjust content on resize’ açıkken.

Asıl mesele ‘Symbol’ler!

‘Artboard’lara gelen ‘Adjust content on resize’ seçeneği ile, ‘Symbol’ olarak tanımlanan ‘artboard’ların ölçüleri değiştiğinde içindeki öğelerin nasıl konumlanıp ölçülendirileceğini belirleyebiliyoruz.

Yeni ‘Resizing’ aracından kesinlikle etkilendim. ‘Symbol’ler ile yapabildikleri muhteşem. Kullanımı belki daha da geliştirilecektir ama bu aracın şu an bile işe yaradığı kesin. Umarım bu yazı da birçoğumuz için yararlı bir kaynak olacaktır.