Sketch'teki Sembollerin Tüm Potansiyelini Ortaya Çıkarmak

Ama önce, biraz arka plan. Sketch'i birkaç yıl önce kullanmaya başladım, o zamanlar en sevdiğim tasarım yazılımım olan ve Adobe tarafından üretimi durdurulan Fireworks'ün yerine geçtim ve tüm nesil tasarımcıların kalbi kırık kaldı. Sketch'i kullanmaya başladığım ilk günlerden beri, kullanımının ne kadar kolay ve anlaşılır olduğuna çok şaşırdım. Bir kez daha, kullanıcı arayüzü (ve simge) tasarımına odaklanan bir uygulama buldum - başka bir şey değil.

Alışkın olduğum menüler ve yığılmış panellerle dolu alternatiflerle karşılaştırıldığında Sketch'deki belirgin özellik eksikliği, aslında en büyük avantajlarından biriydi ve daha hızlı tasarlamama yardımcı oldu. Bu birkaç özellik arasında, semboller çok sık kullandığım ve pratik olarak her gün hala kullandığım şeylerdi (evet, pazar günleri bile… bilirsiniz, bir serbest çalışanın hayatı).

Semboller nelerdir? Özetle, semboller, bir proje genelinde bir öğeyi kullanmanıza ve yeniden kullanmanıza olanak tanır ve üzerinde değişiklik yapıldığında sembolün diğer örneklerini otomatik olarak güncelleyen bir ana sembol tutar.

Bu konsept tam olarak yeni değil (dürüst olmak gerekirse Sketch'e özel de değil). Bununla birlikte, arayüzler tasarlarsanız, özellikle bileşenleri bir tasarım sisteminin parçası olarak kullanırken, bunu son derece yararlı bulacaksınız.

Bu makalede, en temel durumlardan bazı daha gelişmiş kullanım durumlarına kadar, tam potansiyellerini ortaya çıkarmak için Sketch'te sembollerin nasıl kullanılacağını özetleyeceğim. Ayrıca yol boyunca öğrendiğim bazı ipuçlarını ve püf noktalarını da ekleyeceğim.

SmashingMag'de Daha Fazla Okuma :

• Duyarlı Web Tasarımı İçin Sketch Kullanma
• Baskı Tasarımı Eğitimlerinin Nihai Özeti
• Duyarlı Web Tasarım Yönergeleri ve Eğitimleri
• Sketch, Illustrator veya Fireworks? Yeni Bir Ücretsiz Kullanıcı Arayüzü Tasarım Uygulamasını Keşfetmek: Gravit

Sembollere Kısa Bir Giriş

Daha derine inmeden önce ve Sketch'te yeniyseniz, size sembollerin nasıl çalıştığına dair kısa bir giriş yapmama izin verin.

Semboller Sketch'deki hemen hemen her öğeden yapılabilir: metin nesneleri, şekiller, bitmap görüntüleri, hatta diğer semboller (bundan daha sonra bahsedeceğiz). Her sembolün içinde (düzenleme moduna girmek için bir sembole çift tıklayın), sembolün katmanlarını içeren bir ana çalışma yüzeyi bulacaksınız. Bu çalışma yüzeyi, sembolün sınırlarını da tanımlar.

Genellikle, daha sonra yeniden kullanmayı umduğunuz (düğmeler, liste öğeleri, sekmeler vb. gibi) bir arabirimde bu öğeler için simgeler oluşturulur ve bu öğeler tasarımlarınızda farklı ekranlara, sayfalara ve çalışma yüzeylerine yayılır.

Not: Gelecekte başvurmak için, bir sembolün "kopyalarının" örnekler olarak adlandırıldığını unutmayın.

Sembolleri kullanmanın (gruplandırılmış, bağımsız ve bağlantısız nesneler yerine) en iyi yanı, bir noktada belirli bir sembolün bazı özelliklerini (örneğin, renk, şekil, metin boyutu, boyutlar veya istediğiniz herhangi bir şey) değiştirmeye karar vermenizdir. ), sembolün ana örneğini bir kez düzenlemeniz yeterlidir ve bu değişiklik, nerede olurlarsa olsunlar ana örneğin tüm örneklerine otomatik olarak çoğaltılacaktır. Sizi bilmem ama ben bunu süper uygun buluyorum!

İpucu 1: Organize Olun

Tıpkı hayatın kendisinde olduğu gibi, her şeyi düzende tutmak esastır. Daima, daha sonra başka birinin tasarım dosyanızı açması ve üzerinde çalışması gerekecekmiş gibi tasarlayın ve sizin yardımınız olmadan onu anlayın! Bu aynı zamanda sembolleri adlandırma şekliniz için de geçerlidir - adlandırma belirli kriterleri karşılamalıdır.

Bir tavsiye, sembolün adında eğik çizgi ( / ) kullanmaktır. Sketch, eğik çizgiden önceki bölümle otomatik olarak bir kategori oluşturacak ve eğik çizgiden sonraki adın bölümünü kullanarak sembolü adlandıracak ve içine yerleştirecektir. Örneğin, "Düğme/Birincil" ve "Düğme/İkincil" adında iki simgeniz varsa, bunları araç çubuğundan eklemeye çalıştığınızda nasıl görünecekleri aşağıda açıklanmıştır:

Aynı kök altında birkaç sembolün benzer mantıkla gruplandırılması ve böylece daha kolay bulunması için bunu birçok kez tekrarlayabilirsiniz. Ve "ağacınız" çok büyürse, bir dakikanızı ayırın ve adlandırma sisteminizi yeniden gözden geçirin ve onu optimize etmenin ve daha yönetilebilir hale getirmenin olası bir yolu olup olmadığına bakın.

İpucu 2: Adlandırma Kuralları

Sembollerin nasıl adlandırılması gerektiğine dair pek çok farklı uzlaşım vardır, belki de her tasarımcı için bir uzlaşım. Şahsen, öğelerin görsel özelliklerine atıfta bulunan adları kullanmamayı tercih ediyorum - örneğin, “Kırmızı Düğme” bence kötü bir seçim olur çünkü düğmenin rengi daha sonra herhangi bir nedenle değişirse, adı sembol yanlış olacaktır. Bunun yerine, sembolün işlevini ve durumunu (“Birincil/Devre Dışı” gibi) ayırt etmeye çalışıyorum.

Her durumda, tutarlı olun ve hem sizin hem de ekibiniz için işe yarayan bir şey bulun ve ona bağlı kalın; isimlendirme sistemini duruma göre değiştirmeyin! Bu, sembollerin içindeki katmanlar için de geçerlidir: bazı tasarımcılar, hangilerinin düzenlenebilir olması gerektiğini işaretlemek için emojiler bile kullanır (örneğin, ada bir kalem emojisi ekleyerek). Bunu yapmak için, emojileri seçmek üzere bir iletişim kutusu açmak üzere Control + Command + Space tuşlarına basın.

Not: Sembollerin isimleriyle ilgili olarak, örneklerin isimlerini ana sembolden alacağını, ancak daha sonra bunları istediğiniz gibi değiştirebileceğinizi unutmayın. Bu şekilde aynı sembolün örnekleri birbirinden farklı isimlere sahip olabilir.

3. İpucu: Semboller Sayfasına Bir Alternatif

Bir sembol oluşturduğunuzda Sketch, onu semboller sayfasına göndermek isteyip istemediğinizi sorar. Tavsiyem bu kutuyu işaretlemenizdir, bir süre sonra (ve birkaç sembol sonra) bu özel sayfa bir karmaşaya dönüşse bile. (Sketch, oluşturulurken bir sembolü diğerinin yanına yerleştirir ve bir sembolü sildiğinizde, yerinde boş alan kaldığını fark edeceksiniz.)

Bunun yerine, bunu çözmek için yaptığım şey, sembol örneklerini istediğim sırada düzenleyebileceğim ve bu nedenle de resmi semboller sayfası.

Bu şekilde, kategorileri takip eden (listeler, düğmeler, girişler vb.) çalışma yüzeyleri oluşturabilir ve sembolleri uygun bulduğum ve bana anlamlı gelecek şekilde yerleştirebilirim. Bu sayfayı zaman zaman güncellemek için yine de biraz zaman ayırmanız gerekecek, ancak bir kez oluşturulduğunda, her şeyi çok daha kolay hale getirecek ve kısa sürede yeni bir ekran oluşturabileceksiniz.

Not: Bunun yerine semboller sayfasını kullanmayı tercih ederseniz, her şeyi düzenli tutmanıza yardımcı olabilecek Symbol Organizer eklentisi vardır.

4. İpucu: Sembolleri Değiştirme

Mevcut bir sembolü bir başkasıyla değiştirmek kolaydır. Sadece sembolü seçin ve sembol örneğine sağ tıkladığınızda görünen bağlamsal menüden "Değiştir"i seçin. Ardından, kullanmak istediğiniz yeni sembolü seçin. Yeni sembolün öncekiyle aynı boyut ve konumu koruyacağını unutmayın; aynı bağlamsal menüden "Orijinal boyuta ayarla"yı seçerek bunu düzeltebilirsiniz.

5. İpucu: Ayrılma

Bir sembol yaptıktan sonra, onu oluşturan öğeleri grup olarak kurtarmak için onu ayırabilirsiniz. Bunu yapmak için, daha önce bahsettiğim aynı bağlamsal menüde “Sembolden ayır” ı seçin.

6. İpucu: Sembolleri Varlık Olarak Dışa Aktarma

Diğer öğeler gibi semboller de bitmap görüntüleri olarak dışa aktarılabilir. Bunu yapmak için öğeleri dışa aktarılabilir olarak işaretlemeniz gerekir. (Sembol örneğini seçin ve ardından Denetçinin alt kısmındaki "Dışa Aktarılabilir Yap"ı seçin.)

Bu işlem sırasında bulduğum sorun şu ki, eğer sembolün bir miktar dolgusu varsa (örneğin, içindeki şekiller sembolün toplam boyutundan daha küçükse), dışa aktarma yaparken Sketch , boş alanı atlayacak ve sadece bir görüntü oluşturacaktır. yalnızca görünür içerikle .

Bunu çözmenin bir yolu, bir dilim kullanmaktır. Dilim oluştururken, örneğin üzerine yerleştirin ve örneğin sınırlarının boyutuyla (genişlik ve yükseklik) eşleştiğinden emin olun; ardından dilimi seçin ve gerektiğinde dışa aktarma seçeneklerini kullanın.

Yan not: Aynı numara Zeplin gibi diğer araçlar için de geçerlidir.

Daha fazla okuma

• "Çizim Sembolü En İyi Uygulamaları (İç İçe Geçersiz Kılmalar Artık Bir Şeydir)," Lloyd Humphreys
  Sembollerden iyi yararlanmaya yönelik diğer birkaç teknik ve uygulamanın ana hatlarını verir.

Farklı Boyutları Kullanma

Birden çok boyut ve en boy oranına sahip ekranlarla dolu bu dünyada, tasarımınızın birçok farklı senaryoya uyum sağlaması önemlidir. Öğeleri (veya zaten tahmin ettiğiniz gibi, sembolleri) yeniden kullanarak her şeyi her seferinde sıfırdan tasarlamanız gerekmiyorsa, bunu başarmak daha kolaydır.

Sembollerdeki yeniden boyutlandırma seçeneklerinin kullanışlı olduğu yer burasıdır ve aynı öğeyi farklı genişlik ve yüksekliklerde sorunsuzca kullanmanıza yardımcı olur: Yalnızca bir örneği seçerek yeniden boyutlandırırsanız, bu diğer örnekleri etkilemez . (Ancak yeniden boyutlandırma seçeneklerinin örneğe değil, ana sembol içindeki tek tek katmanlara uygulandığını unutmayın. Bu nedenle, boyutları örnekten örneğe ayrı ayrı ayarlayabilseniz bile, içindeki öğeler her zaman aynı davranışı koruyacaktır.)

Not: Aşağıda belirtilen seçenekler yalnızca semboller için değil, gruplar için de geçerlidir. Davranışlar her zaman öngörülebilir değildir, bu nedenle, çoğu durumda bir veya iki farklı ayarı birleştirerek, ihtiyacınız olanı bulmadan önce biraz oynamanız ve keşfetmeniz gerekebilir.

Uzatmak

Uzat seçeneği kullanıldığında, örneğin sembolün toplam genişliğinin %50'sini belirten bir şekil, örnek dikey veya yatay olarak uzatıldığında bu aynı ilişkiyi koruyacaktır. Bu varsayılan davranıştır.

Köşeye Sabitle

"Köşeye Sabitle" (adından da anlaşılacağı gibi) bir öğeyi en yakın köşeye sabitler ve öğe, bu köşeye aynı mesafeyi koruyarak yeniden boyutlandırılmaz. Nesne ortalanmışsa (her iki taraftan eşit aralıklarla), hangisinin en yakın köşe olduğunu bilemeyeceğini, dolayısıyla ortada kalacağını unutmayın.

Nesneyi Yeniden Boyutlandır

“Nesneyi Yeniden Boyutlandır” kullanıldığında, elemanlar yanlardan eşit (veya sabit) bir boşluk bırakarak büyüyecektir.

Yerinde Yüzer

"Yerinde Yüzer", bir nesnenin aynı boyutta kalmasını sağlar ve göreceli konumunu sembolün sınırlarına göre tutar.

İpucu 1: Orijinal Boyuta Geri Dönün

Sembolünüzü yeniden boyutlandırdıysanız ancak sonuçtan memnun değilseniz, içerik menüsünden “Orijinal boyuta ayarla” seçeneğini seçerek her zaman başa dönebilirsiniz.

2. İpucu: Sınırlar

Sembollerin özel çalışma yüzeylerine sahip olduğunu ve bunların sembollerin sınırlarını tanımlayacağını unutmayın (içerideki şekiller üzerlerine taşsa bile). Sembolün çalışma yüzeyini, onu seçip Denetçiden “Sığdırmak için yeniden boyutlandır” seçeneğini seçerek içeriğiyle aynı boyutta yapabilirsiniz.

3. İpucu: Karakterleri ve Operatörleri Kullanma

Denetçideki genişlik ve yükseklik giriş alanlarında, değerleri değiştirmek için operatörleri kullanabilirsiniz. Örneğin, bir öğenin boyutlarını 200 piksele ayarlamak için 100*2 kullanabilirsiniz. Diğer operatörler + (toplama), - (çıkarma) ve / (bölme).

Matematiksel operatörlerin yanı sıra, aynı giriş alanlarında, bir nesneyi soldan ölçeklemek için L (bu varsayılandır), sağdan ölçeklemek için R , üstten ölçeklemek için T (bu varsayılandır), Alttan ölçeklemek için B ve merkezden veya ortadan ölçeklendirmek için C ve M

Örneğin, 200 piksel genişliğinde bir şekliniz varsa ve onu sağdan sola ölçeklenecek şekilde yeniden boyutlandırmak istiyorsanız, genişlik giriş alanında 300r gibi bir şey kullanabilirsiniz.

Daha fazla okuma

• “Sketch 39 Yeniden Boyutlandırma: Hile Sayfası” Peter Nowell
  Bu makale, yeniden boyutlandırmadaki farklılıkları anlamak için iyi bir referanstır. Ayrıca başka ipuçları ve püf noktaları da içeriyor, o yüzden bir deneyin!

İç İçe Semboller

Bir sembolden daha iyi ne olabilir? Belki içinde başka bir sembol olan bir sembol!

Bu özellik Sketch'te oldukça yenidir ve sembolleri bir araya getirirken size birçok olanak sunar. Bir sembolü diğerinin üzerine yerleştirebilir, ikisini de seçebilir ve ardından iki örneği içeren yeni bir sembol oluşturabilirsiniz. Bunu istediğiniz kadar tekrarlayabilirsiniz. Yine de ılımlı olun, yoksa kendinizi iç içe geçmiş sembollerin seviyelerini ve seviyelerini kazarken bulacaksınız. Bu, bakımı çok daha zor hale getirebilir ve ayrıca daha büyük organizasyonel sorunların bir belirtisi olabilir.

Yuvalama sembolleri, özellikle bir sembolün varyasyonlarını yaratmanız gerektiğinde faydalı olabilir. Örneğin, şöyle bir süreç izleyebilirsiniz:

1. Bir üs görevi görecek bir sembol seçin. (bu sembol her durumda aynı kalacaktır.)
2. Duruma bağlı olarak orada olabilecek veya bulunamayacak diğer sembollerle (simgeler veya rozetler gibi) üst üste getirin.
3. Son olarak, ortaya çıkan tasarımla başka bir sembol oluşturun.

Aşağıdaki resimde, tüm satırların aynı özellikleri paylaştığını görebilirsiniz (solda aynı boyuta, metin özelliklerine ve dolgu miktarına sahiptirler), bu yüzden sadece bu öğeleri içeren bir temel sembol oluşturdum (yani, diğer sembollerle paylaşılır). Bu sembolü bir başlangıç ​​noktası olarak kullanarak, farklı olan bazı örtüşen öğeler yarattım ve sonucu her durumda farklı bir sembol olarak kaydettim; yani, "Varyasyonlar" altındaki tüm semboller aslında farklı sembollerdir.

Ancak - mutlaka - satırın her durumu için yeni bir sembol oluşturmanız gerekmez. Daha basit bir yol olabilir: geçersiz kılmaları kullanmak.

İç İçe Geçersiz Kılmalar

İçeriğinin bir kısmı değiştiği için birçok farklı sembol oluşturmak zorunda kalsaydınız, muhtemelen delirirdiniz. Sembollerin temel amaçlarından biri, tam olarak mümkün olduğunca az tasarlamak ve daha az öğeye sahip olmak ve dolayısıyla bunlar üzerinde daha fazla kontrol sahibi olmaktır. İç içe geçersiz kılmaları girin!

Bu iş akışının pratik bir örneği, farklı durumlara sahip bir sekme çubuğu tasarlamak olabilir. Bu durumda, etkin olmayan sekmelere sahip ana sembol temel görevi görecek ve ardından vurgulanan sekmelerin her biri için farklı bir sembol olacaktır. Müfettiş'teki "Geçersiz Kılmalar" seçeneklerinden istediğinizi seçin.

Not: Bu tekniğin çalışması için ana sembolün (gezinme çubuğu) içindeki etkin olmayan sekmelerin de sembol olması gerektiğini unutmayın. Ayrıca, tüm simgelerin (hem etkin olmayan hem de etkin olanlar) tam olarak aynı boyutlara (genişlik, yükseklik) sahip olduğundan emin olun. Aksi takdirde, "Geçersiz Kılmalar" açılır menüsünde mevcut seçenekler olarak görünmezler.

Başka bir kullanım örneğine bakalım. Bir tasarımda birden fazla düğmeniz varsa ancak üzerlerinde farklı metin etiketleri varsa, Geçersiz Kılmalar seçeneği metin değerini değiştirmenize olanak tanır (yazı tipi ailesini veya yazı tipi boyutunu değil; sembol yöneticisi), her seferinde yeni bir sembol oluşturmak zorunda kalmadan. Bunu yapmak, örneği seçmek ve Inspector'daki metin içeriğini değiştirmek kadar kolaydır.

Geçersiz kılmalar yalnızca metne uygulanmaz; bunları bitmap görüntüleri ve hatta daha önce bahsedildiği gibi diğer semboller için de kullanabilirsiniz. Bu şekilde, her birinde farklı bir görüntü olan bir sembolün birkaç örneğine sahip olabilirsiniz - ve bunların tümü, sembolün ana öğesini değiştirmek zorunda kalmadan.

Bir sembolün efendisinin parçası olarak belirli bir görüntüye sahip olmak istemediğim durumlar var. Bu nedenle, genellikle yaptığım şey, görünür içeriği olmayan boş bir PNG dosyası oluşturmak, bir şekil oluşturmak ve bu resmi desen dolgusu olarak kullanmaktır (bu seçeneği bir şekil seçerken “Doldurma Seçenekleri”nde bulabilirsiniz). Ardından, sembolü geçersiz kılma yaparken, bu şeffaf görüntüyü her durumda istediğimle değiştiririm!

Bu uygulamadan en iyi şekilde yararlanmak için, görüntünün altında yer tutucu görevi gören ve yalnızca orijinal şeffaf bitmap'i tuttuğumda görülebilecek bir simge veya öğeye sahip bir katmanlama sistemi de kullanıyorum. Bunu yapmanın bir yararı, bitmiş ürüne görüntüler yüklenirken ortaya çıkacak olan bu boş durumu simüle edebilmem, yine de tasarlamak için gerekli olduğunu düşündüğüm bir şey.

İpucu 1: Adlar ve Katman Sırası

Düzenlenmenin iyi bir fikir olmasının nedenlerinden biri, katmanları adlandırma ve sıralama şeklinizin "Geçersiz Kılmalar" panelinde görüntülenme biçimini etkilemesidir. Inspector'daki giriş alanlarının solundaki etiketler, daha önce sembolün içinde tanımladığınız isme ve sıraya uyacaktır, bu nedenle daha verimli bir iş akışına sahip olmak istiyorsanız bu sıraya dikkat etmelisiniz.

İpucu 2: Boyuta Dikkat Edin

Yalnızca yeni sembolün geçerli öğeyle tam olarak aynı genişlik ve yüksekliğe sahip olması durumunda, iç içe geçmiş bir sembolü başka bir sembolle değiştirebilirsiniz.

3. İpucu: Metin Uzunluğuna Bağlı Olarak Öğeleri Yer Değiştirme

Geçersiz Kılmalar seçeneklerinde metnin değerini değiştirirken, solundaki daha uzun olduğunda bir öğeyi gerektiği gibi hareket ettirebilirsiniz (aşağıdaki resme bakın).

Bunun çalışması için ikincil metin veya şeklin mutlaka metnin sağında olması gerekir . Ayrıca, her iki öğenin arasında 20 pikselden fazla mesafe olmamalıdır (aşağıdaki "İleri Okuma" bölümüne bakın).

4. İpucu: Geçersiz Kılmalardan Kaçınma

Geçersiz Kılmalar bölümündeki seçenekler nedeniyle bir sembol biraz dağınık görünebilir. İçindeki bir öğenin geçersiz kılınmasını istemiyorsanız, bu katmanı kilitleyin veya gizleyin , listede görünmez.

5. İpucu: İç İçe Sembolleri Gizleme

İç içe geçmiş bir sembolü gizlemek için Geçersiz Kılmalar bölümünden "Yok"u seçmeniz yeterlidir. Tabii ki, yalnızca o özel durumda görünmez olacaktır.

6. İpucu: Metni Gizleme

Geçersiz kılmaları kullanarak bir örnekte bir metin öğesini hızla ortadan kaldırmanın bir yolu vardır. Bunu yapmak için, Geçersiz Kılmalar seçeneklerinde boşluk çubuğuna ve dönüş tuşuna basarak metin değerini boş bir alana ayarlayın.

7. İpucu: Orijinal Görüntüyü Kurtarma

Bir sembolün içinde bitmap resimleriniz varsa, Geçersiz Kılmalar bölümündeki seçenekler kullanılarak başkaları tarafından değiştirilebilirler. “Görüntü geçersiz kılmayı kaldır”ı seçerek orijinal görüntüyü (düzenlenebilir sembolün bir parçasını oluşturan) kurtarmak da mümkündür - Müfettiş'te “Görüntü Seç”in yanındaki görüntü kutusunu sağ tıklamanız yeterlidir.

Daha Fazla Okuma (ve bir Video)

• Aleksandr Pasevin, “Skeçte Düğmeyi Hacklemek”
  Sadece birkaç basit adımda bir simgeyi metnin solunda (normal davranış olan sağda yerine) tutmak için basit bir kesme sunar.
• “Uyarlanabilir Metin Öğeleri,” Yaron Tamuz
  Değerler değiştiğinde üst üste gelmelerini önlemek için gizli öğelerin metin ayırıcılar olarak nasıl kullanılacağını açıklar.
• "Sketch: Simgeleri iç içe semboller kullanarak renklendirin", Francesco Bertocci
  Maskeler kullanarak bir simgenin içindeki renkleri değiştirmek için basit bir teknik.
• Jon Moore, “Bu, Şüphesiz Tüm Gün Göreceğiniz En Harika Eskiz Tekniğidir”
  İç içe sembolleri ihtiyaçlarınıza göre özelleştirerek nasıl zamandan tasarruf edeceğinizi açıklar. Makale ayrıca diğer tasarımcıların ilginç tekniklerini de içeriyor.
• “Sketch Uygulamasında İç İçe Sembollerle Bir Düğme Sistemi Oluşturma” (video), Pablo Stanley
  Şimdiye kadar öğrendiğimiz birçok şeyi kullanarak, bir düğme sistemi oluşturmak için gerçekleştirmeniz gereken adımlarda size yol gösterir.

Sembollerle İyi Oynayan Eklentiler

Sketch ile ilgili iyi bir şey, bir özelliğin yetersiz kalması durumunda, genellikle bunu telafi edecek bir eklentinin olmasıdır. Ve bazıları sembollerle özellikle iyi çalışır ve onları daha da güçlü kılar! Bu eklentilerden bazılarından bahsedildi, ancak bunlardan herhangi birini kaçırmış olmanız durumunda, bazı eklemelerin olduğu bir liste burada.

Eskiz Koşucusu

Diğer birçok özelliğinin yanı sıra Sketch Runner eklentisi, yalnızca bir tuş kombinasyonunu kullanarak bir belgeye kolayca semboller eklemenize yardımcı olur. “Git” seçeneği, belirli bir sembole doğrudan atlamak için çok kullanışlıdır - projenizde çok sayıda sembol varsa ve başka yollarla sembol bulmak zorsa çok kullanışlıdır.

InVision Craft Kitaplığı

Bir ekiple çalışıyorsanız, InVision Craft Kitaplığı, herkesin kullanabileceği varlıklarla paylaşılan bir kitaplık oluşturmayı kolaylaştıracak ve bir sembolü güncellemeniz gerektiğinde değişiklikleri senkronize etmenize olanak tanıyarak, kullandığınızdan her zaman emin olmanızı sağlayacaktır. sembollerin en son sürümü.

Otomatikleştirmek

Otomatikleştirme çok güçlüdür ve muhtemelen işinizi daha verimli hale getirecektir. Sembolleri yönetme seçenekleri, kullanılmayan sembolleri kaldırmak, bir sembolün tüm örneklerini seçmek ve çok daha fazlasını içerir.

Sembol Örneği Yeniden Adlandırıcı

Symbol Instance Renamer, tüm örnekleri ana sembollerinin adıyla eşleşecek şekilde yeniden adlandırır.

Sembol Düzenleyici

Symbol Organizer ile semboller sayfanızı alfabetik olarak (katman listesi dahil) ve sembol adlarınız tarafından belirlenen ayrı gruplar halinde düzenleyin.

Otomatik Düzen

Otomatik Düzen, Sketch'e sorunsuz bir şekilde entegre olur ve dikey ve yatay dahil olmak üzere farklı iPhone ve iPad boyutlarının tanımlanmasına ve görüntülenmesine olanak tanır. Ayrıca yığınlar (alt katmanlarının düzenlerini tanımlayan özel bir grup türü) ve hem Android hem de iOS için ön ayarlar gibi daha gelişmiş özellikleri de destekler. Daha fazla bilgi için "Örnekler" sayfasına bakın.

Not: Bunlar, sizin için en yararlı olabileceğini düşündüğüm eklentilerden yalnızca birkaçı, ancak daha birçok eklenti var. Daha fazlasını öğrenmek için Sketch'in resmi eklenti sayfasını veya Sketch App Sources web sitesini düzenli olarak ziyaret edin.

Son düşünceler

Çizim sembolleri sürekli olarak gelişmektedir, bu nedenle onları daha da değerli ve alakalı hale getirecek daha fazla iyileştirme bekleyebiliriz. Bununla birlikte, sahip olmalarını istediğim tek bir şeyi isimlendirmem gerekseydi, bu, Figma'nın yaptığı gibi, paylaşılan sembol kitaplıklarına sahip olma olasılığı olurdu. Bu, özellikle ekip çalışması için, aynı proje üzerinde çalışan birkaç tasarımcının bulutta depolanan birincil, her zaman güncel bir belgeden öğeler seçmesi gerektiğinde son derece yararlı olabilir.

( Not: Bu özellikle ilgili olarak, Sketch ekibinin üzerinde çalıştığının farkındayım, bu yüzden umarım yakında görürüz. Sürüm 43'teki daha açık format muhtemelen bu özelliğin temelini atıyor. Her durumda, ben' Bunu sabırsızlıkla bekliyorum, çünkü bu, birçok tasarımcı iş akışında oyunun kurallarını değiştirebilir.)

Gerçeği söylemek gerekirse, şu anda yukarıda bahsedilen davranışın aynısını aşağı yukarı gerçekleştirmenize yardımcı olan bazı eklentiler var, ancak Sketch'in temel işlevselliğinin bir parçası olduklarında her zaman daha güvenilir buluyorum - bu, özelliğin çalışmaya devam etmesini sağlar. yazılım sonraki sürüme güncellenir.

Daha birçok teknik ve püf noktası olduğunun farkındayım. Bir kişinin çalışma şekli bazen biraz kişisel olma eğilimindedir ve bir şeyi yapmanın tek bir doğru yolu yoktur. Burada güvenilir, ilgi çekici ve fazla hack gerektirmediğini düşündüğüm teknikleri paylaştım. Bu nedenle bazı teknikler bu makalenin dışında bırakılmıştır.

Umarım faydalı bir okuma olmuştur! Öyle olsaydı, semboller muhtemelen tasarımlarınızın bel kemiği olacak ve onları oldukça sık kullanacaksınız. Aşağıdaki yorumlarda düşüncelerinizi ve diğer ipuçlarını ve püf noktalarını paylaşmaktan çekinmeyin. Yardıma ihtiyacın olursa bana her zaman Twitter'dan da ulaşabilirsin!