Adobe XD'de UI Kitleri Nasıl Kullanılır

Web tasarımıyla ilgilenenler için, UI kitleri Adobe XD, yeni bir tasarım projesini hızlı bir şekilde başlatmak için harika bir yoldur. Bu kitlerle, değiştirebileceğiniz ve web siteniz veya uygulama tasarımınız için kullanabileceğiniz bazı kullanışlı kaynaklara erişebilirsiniz.

Yazılımda yeniyseniz ve UI kitlerini nasıl kullanacağınızdan emin değilseniz Adobe XD, o zaman doğru yere geldiniz. Bu yazıda, yazılıma UI kitlerini nasıl kurabileceğinizi ve ardından projeniz için verilen kaynakları nasıl kullanabileceğinizi göstereceğim.

Adobe XD'de UI Kitleri Nasıl İndirilir

Öncelikle, doğrudan yazılımın içinden Adobe XD'de UI kitlerini nasıl indirebileceğinize bir göz atalım. Başlamak için şu adımları uygulamanız yeterlidir:

Aşama 1: Yazılımın sol üst köşesindeki hamburger menü düğmesine tıklayın.

Adım 2: Menüde, UI Kitlerini Al seçeneğine gidin ve ardından mevcut seçeneklerden üçüne tıklayın.

Bu makale için Google Material UI kitini seçeceğim. Ancak projenize bağlı olarak Apple iOS veya Microsoft Windows kitlerini seçebilirsiniz. Bu, UI kitlerini ücretsiz olarak indirebileceğiniz resmi bir web sayfası açacaktır.

Aşama 3: Aşağıdaki web sayfasında Adobe XD UI kitini bulun ve sisteminize indirin.

4. Adım: Şimdi indirilen dosyayı Adobe XD'de açın ve ilgili platform için UI kaynakları içeren bir grup çalışma yüzeyi ile karşılaşacaksınız.

Tüm çalışma yüzeylerini ayrı ayrı görmek için yakınlaştırmak/uzaklaştırmak için Ctrl düğmesini basılı tutabilir ve kaydırma tekerleğini hareket ettirebilirsiniz.

Bunun yerine Tel Çerçeveleri indirmek isterseniz, UI Kitlerini Al menüsündeki Tel Çerçeveler seçeneğine tıklayabilirsiniz.

Ayrıca, UI Kitlerini Al menüsünde Daha Fazla UI Kitleri seçeneğine tıklayarak Adobe'nin web sitesinde ek UI kitleri arayabilirsiniz.

Web sitesinde, bir baş üstü ekrana benzeyen bu gerçekten harika Movie Magic UI kiti de dahil olmak üzere, aralarından seçim yapabileceğiniz bazı harika seçenekler var.

Artık UI kitlerini nasıl indireceğinizi bildiğinize göre, bunları projelerinizde nasıl kullanabileceğinize bir göz atalım.

Adobe XD'de UI Kitleri Nasıl Kullanılır

Projenizde UI kitlerini kullanmak için şu basit adımları uygulamanız yeterlidir:

Aşama 1: Projenizde kullanmak istediğiniz UI öğesini yakınlaştırın ve seçmek için başlığına tıklayın.

Adım 2: Şimdi Ctrl+C kısayolunu kullanarak öğeyi kopyalayın.

Aşama 3: Ardından menüden yeni bir Adobe XD projesi açın.

4. Adım: Buraya, Ctrl+V kısayolunu kullanarak UI öğesini yapıştırın.

Bu makale için Google Material UI kitindeki Mobile Dark öğesini kullanacağım. Öğe, daha fazlasını yerleştirmenize yardımcı olacak kılavuzlar içerir katmanlar, ancak bunları kullanmak istemiyorsanız bir sonraki adımı izleyerek kolayca kaldırabilirsiniz.

Adım 5: Kılavuzları kaldırmak için sol üst köşedeki kilit simgesine tıklayın ve ardından sil düğmesine basın. Öğeye daha fazla nesne yerleştirmek için kılavuzları kullanmak istiyorsanız bu adımı atlayabilirsiniz.

6. Adım: Şimdi bu sayfaya eklenecek başka bir öğe seçmek için UI kitine geri dönün. Bir kez daha öğenin başlığına tıklayın ve Ctrl+C kısayolunu kullanarak kopyalayın.

Bu makale için diyaloglardan birini kullanacağım temel bir tost oluşturacağım.

7. Adım: Yeni öğeyi önceki öğeye yapıştırın ve ardından kılavuzlara göre hizalayın.

Adım 8: Şimdi tosttaki her bir öğeyi düzenlemek için metin kutusuna çift tıklayın ve ardından kullanmak istediğiniz metni girin. Öncelikle tost un başlığını değiştirelim.

Ardından, metin kutusuna çift tıklayarak ve eklemek istediğiniz şeyi yazarak gövdenin içeriğini değiştirin.

Aynı şekilde düğmelerin metnini de değiştirebilirsiniz. Metni düzenlemeyi bitirdikten sonra metnin rengini ve opaklığını değiştirebilirsiniz. Opaklığı değiştirmek için, araç çubuğundaki Opaklık seçeneğinin altındaki kaydırıcıyı sağa hareket ettirin.

Metnin rengini değiştirmek için Doldur seçeneğinin yanındaki dikdörtgene tıklayın ve ardından renk seçiciden yeni bir renk seçin.

Ve bu şekilde düzenleyebileceğiniz sadece metin değil. Ayrıca, iletişim kutusundaki hemen hemen tüm öğelerin rengini ve opaklığını değiştirebilirsiniz; bu, benzersiz bir renk şeması arıyorsanız harikadır.

Sonuçtan memnun kaldığınızda, devam edin ve menüdeki Farklı Kaydet seçeneğine tıklayarak veya Shift+Ctrl+S kısayolunu kullanarak dosyanızı kaydedin.

UI Kitlerini Kullanarak Tasarımınızı Mükemmelleştirin

Artık Adobe XD'de UI kitlerini nasıl indireceğinizi ve kullanacağınızı bildiğinize göre, kısa sürede harika tasarımlar üretmeye başlayacağınızdan eminim. Bu UI kitleri kesinlikle oldukça kullanışlıdır ve her bir UI öğesini tasarlama konusunda endişelenmeden projenize doğrudan ulaşmanıza yardımcı olur.

Sıradaki: Adobe XD'de bir projeyi tamamladınız ve onu HTML'ye nasıl aktaracağınızı bilmiyor musunuz? Basit bir adım adım eğitim için sonraki makaleye göz atın.