12 Essential Free Sketch Eklentileri
Sketch 44'ün beta sürümünden çıktığından dolayı, Sketch'in en iyi özelliklerinden birine göz atalım: açık kaynaklı eklentilerin büyük seçimi.
Sketch topluluğu çılgınca destek veriyor ve iş akışınızı kökten geliştirecek tonlarca harika eklenti bulabilirsiniz. Bu yazıda, her tasarımcının sahip olması gereken 12 en iyi Sketch eklentisini ele alacağım.
1. Eskiz Ölçüsü
Kroki Ölçüsü tasarımcıların geliştiricileri, proje yöneticileri ve diğer ekip üyeleri için çalışmalarını düzenlemelerine ve özetlemelerine yardımcı olur.
Ancak bu, tüm projelerini tasarlayan ve kodlayan yalnız kurtlar için de son derece faydalıdır. Measure eklentisiyle, bir bakışta uygun ölçümleri elde etmek için belirli genişlik / yükseklik boyutlarını gösteren öğeleri ana hatlarıyla belirtebilirsiniz.
Bu, düğmeler, metin, simgeler ve çalışma yüzeyinin büyük bölümleri gibi tüm sayfa öğelerini içerir.
Sketch Measure ile sayfaları sayfa içi stilleri ile HTML / CSS'ye aktarabilirsiniz. Verilen var Adobe araçları bunu da yapabilir. Ancak Sketch'deki tüm bu işlevselliğe sahip olmak işinizi çok daha kolaylaştırır.
2. InVision El Sanatları
Bir süre sonra InVision ekibi yeni bir eklenti duyurdu zanaat . Ama bu daha fazla özellik ve kısayol ton aldığınız eklentileri bir paket gibidir.
Bir örnek Veri eklentisi tasarımcıların metin / verileri doğrudan web'deki genel API'lardan almasını sağlar. Böylece, uygulamanızı anında gerçek içerik ve resimlerle otomatik olarak doldurabilirsiniz.
InVision geliştiricileri, Craft'ı tasarımcılara daha da değerli hale getirmek için yeni eklenti özellikleriyle sürekli olarak güncelliyor. Ve bunun tamamen bedava olduğunu söyledim mi?
Şimdiye kadar Craft, her biri tasarım iş akışınıza eklenmeye değer 6 önemli eklenti özelliğine sahiptir.
- aletsiz - Sketch'de gerçek zamanlı işbirliği
- Prototip - dinamik yüksek kaliteli prototipleme
- Eşitleme - InVision prototipleri ve Sketch arasında anında senkronizasyon
- Veri - Web'den gerçek verileri Sketch modelinize çekin
- Kütüphane - buluttaki tasarım öğeleri tüm ekibinizle paylaşılabilir
- Çift - yıldırım hızlı UI klonlama
Bir göz atın Zanaat ana sayfası ve ne düşündüğünü gör. Bir kez denedikten sonra asla geri dönmek istemeyeceksiniz.
3. Sketch Toolbox
Her Sketch kullanıcısı hakkında bilgi sahibi olmalı Sketch Toolbox . Sadece eklentileri yüklemek / özelleştirmek çok daha kolay bir zarif eklenti yöneticisidir.
Bu Araç Kutusu ile yüzlerce Sketch eklentisine göz atabilir ve yüklemek istediğinizleri seçebilirsiniz. İstediğinizi tıklarsınız ve otomatik olarak bilgisayarınıza indirilir, kullanıma hazırdır.
Sketch Toolbox, sorunsuz çalışmasını sağlamak için eklentileri otomatik olarak günceller.
Teknik olarak bu hala beta sürümünde ve her zaman yeni güncellemeler alıyor GitHub'da . Ama bence bir üretim iş akışında kullanmak için yeterince sağlam. Aslında, bu inanılmaz eklenti yöneticisi olmadan iyi bir Sketch iş akışının eksiksiz olmayacağını tartışacağım.
4. İhracat Varlıkları
Bir tasarımcının en ayrıntılı görevlerinden biri kaynakları tahsis etmek ve bunları geliştiricilerle paylaşmaktır. Tüm küçük simgeler, grafikler, arka plan desenleri, bunların hepsi ihraç edilmelidir (genellikle elle).
Export Assets plugin Varlık Eklentisi Eklentisi bu süreci bir esinti yapar. Sadece bu eklentinin, tasarımcıların Android / iOS arayüz varlıklarını dışa aktarması gereken mobil uygulamalar için özel olarak tasarlandığını unutmayın. Bu, @ 2x ve @ 3x ekran boyutları için retina varlıkları içerir.
Retina web tasarımı ile ilgili herhangi bir özellik görmedim, ancak Kroki İhracatçı eklenti de. Şu anda beta sürümünde ve orjinalinin geliştirilmiş bir versiyonu olması gerekiyor.
5. İçerik Oluşturucu
Daha önce bahsettiğim Craft eklentisi içerik üretimi sunuyor. Ama bunun gibi daha basit bir şey isteyebilirsiniz. İçerik Oluşturucu Timur Carpeev tarafından.
Bu yüklendiğinde, birden çok Sketch öğesini bir seferde otomatik olarak ilgili verilerle otomatik olarak doldurabilirsiniz:
- Kullanıcı avatarları
- İlk ve soyadları
- Kukla paragraf metni
- Özel dizeler (coğrafi değerler, fiyatlar, CC kart numaraları, vb.)
Tüm içerik Unsplash gibi açık kaynaklı veritabanlarından alınır ve Uinames Böylece bunu birden fazla projede, ticari veya başka bir şekilde kullanabilirsiniz.
6. lüper
Photoshop'un, tekrarlanan işlemleri otomatik hale getirebileceğiniz kendi Eylem paneline sahiptir. Sketch'in böyle bir paneli yok ama var Looper eklentisi Tamamen ücretsiz ve öğrenmesi kolay süper.
Bu, tüm sayfayı ele alan yinelenen desenler oluşturmak için en kullanışlıdır. Grafik tasarımcıları, bu eklenti için web tasarımcılarına göre daha fazla kullanım bulabilirler, ancak tekrarlayan ölçekleme / çoğaltma görevleriyle çok fazla zaman kazandırabilirler.
Bir göz atın Looper ana sayfası neler yapabileceğini görmek için. Herkes için yararlı olmayabilir, ancak bunu kullananlar için kendinizi çok fazla zaman tasarrufu sağlayabilirsiniz.
7. Çizim İkonu
Web tasarımcıları sevgiler simge fontları . Harika ikonlar UI'yi daha kolay tasarlar ve yazı tipi dosyaları genellikle görüntülerden daha küçüktür.
Sketch Iconfont plugin Sketch Iconfont eklentisi icon fontları Sketch içine kaydetmek, sıralamak ve çekmek için eksiksiz bir yönetim paketidir. Varsayılan olarak eklenti boş gelir, bu yüzden bunları kullanmak için simge fontlarını yerel olarak indirmeniz gerekir.
Ancak bu, çevrimiçi bulduğunuz herhangi bir simge yazı tipiyle çalışmaya erişmenizi sağlar. Aslında bir yazı tipi paketi paketi iconfont klasörünüzü hızlı bir şekilde doldurmak istiyorsanız, bu eklenti için özel olarak hazırlanmış. Ve zaman geçtikçe web'i her zaman daha fazla artırabilirsiniz.
Bu eklentinin bir kopyasını almayı kesinlikle tavsiye ederim. Simge yazı tipleri kalmak için burada ve modern web siteleri için paha biçilmez.
8. Stil Envanteri
Yeni bir Sketch dosyasını başlattığınızda ya stilleri sıfırdan yeniden yapmak zorundasınız ya da önceki örneklerdeki stilleri kopyalayıp yapıştırmanız gerekiyor.
İle Stil Envanter eklentisi Bütün bu ekstra işi atlayabilirsiniz. Sadece birkaç tıklama, tüm eski stillerinizi kolay erişim için yeni Sketch belgenize aktarır.
Bu stiller, belirli öğeler için katman stilleri ile birlikte renkler, metin stilleri ve semboller içerir.
Bu eklenti nadiren güncellenir ancak benzer modellerin birleştirilmesi için tavsiye ederim. Ayrıca deneyebilirsiniz Sketch Palettes eklentisi Renk şemalarını kaydetmek ve almak için.
9. Piksel Parçacığı
Her dijital tasarımcı, piksel mükemmel örnekler ile gurur duyuyor. Bu görev hiç de zor değil ama her tasarım öğesinin, üst üste binme veya kusur bırakmayan ızgarayla mükemmel bir şekilde hizalanmasını gerektiriyor.
Çalıştırmadan önce işinizi kontrol etmek isterseniz koşabilirsiniz Piksel Parçacığı . Bu çok küçük eklenti, tüm dosya varlıklarınızı, herhangi bir pikselin, kusurlu pikseller oluşturan geleneksel X / Y koordinat konumlarından taşıp taşmadığını kontrol eder.
Not, bu ofset piksel değerlerini otomatik olarak düzeltmeyecektir. Sorunlara neden olan katmanları bulabilir ve bunları vurgulayabilir, böylece bunları kendiniz de giderebilirsiniz. Yine de her katmanı manuel olarak kontrol etmek için çok zaman kazandırır.
10. Dinamik Düğme
Orijinal dinamik düğme eklentisi 2015'te biraz terk edildi, ancak daha yeni Dinamik Düğme Eklenti daha iyi ve Sketch 3.5 + ile uyumludur.
Oluşturduğunuz herhangi bir metin katmanına otomatik olarak dolgu ve düğme stilleri ekler ve dolgu dinamiktir, böylece metin boyutundan bağımsız olarak güncellenir. Bu, modellerinde sürekli olarak değişiklik yapan kullanıcı arayüz tasarımcıları için son derece yararlıdır.
Bu, düğmelerin genellikle bir sabit boyut / oran izlediği mobil uygulamalar için de kullanılabilir. En göz alıcı Sketch eklentisi değil ama görevi iyi.
11. Compo
Bazı ekstra özelliklerle birlikte bir düğme jeneratörü istiyorsanız Compo eklentisi test etmeye değer.
Compo'nun yaratıcısı, bir süre Dinamik Düğme eklentisini kullandıktan sonra, biraz daha hızlı bir şey isteyen bir fikir elde etti. Compo, tam özelliklerine uyacak şekilde uygun düğme boyutunu ve metin boyutunu otomatik olarak oluşturur. Tek tıklamayla otomatik olarak boyutlandırılmış ve düzgün bir şekilde konumlandırılmış çalışan bir Sketch bileşeniniz var.
Normalde bir düğme oluşturduğunuzda ve metni değiştirdiğinizde sadece metin katmanını etkiler. Yani alttaki düğme çok küçük olurdu. Compo, düğmeyi ve metni otomatik olarak bir öğe gibi yeniden boyutlandırır.
Üzerinde çok sayıda demo bulabilirsiniz. GitHub repo Başlamak için bazı kullanıcı kılavuzları ile birlikte.
12. CSSketch
Son ama kesinlikle en az değil CSSketch Eklenti. Bu, oluşturdukları tüm stiller için CSS koduna doğrudan erişim isteyen tasarımcı + geliştirici kombinasyonları için en kullanışlıdır.
Tasarladığınız tüm sayfalar, tam bir stil sayfasını, hesaplanan tüm öğelerle dışa aktarmak için bu eklenti aracılığıyla çalıştırılabilir. Ancak bu otomatik olduğundan A ++ kalite kodunu bekleyemezsiniz.
Yine de CSS'imi el ile kodlamayı tercih ediyorum, ancak bu eklenti en azından biraz zaman kazanmak isteyen teknik olmayan tasarımcılar veya geliştiriciler için bir başlangıç noktası sunuyor.
