Adobe xd'de ui kitleri nasıl kullanılır?

Web tasarımıyla ilgilenenler için, Adobe XD'deki kullanıcı arayüzü kitleri, yeni bir tasarım projesine başlamak için harika bir yoldur. Bu kitlerle, web siteniz veya uygulama tasarımınız için değiştirebileceğiniz ve kullanabileceğiniz bazı kullanışlı kaynaklara erişirsiniz.

Yazılımda yeniyseniz ve UI kitlerinin Adobe XD'de nasıl kullanılacağından emin değilseniz, doğru yere geldiniz., UI kitlerini yazılıma nasıl kurabileceğinizi ve ardından projeniz için verilen kaynakları kullanabileceğinizi göstereceğim.

Ayrıca Rehberlik Tech

Adobe Bridge ile Fotoğrafları Toplu Dönüştürme

UI Kitlerini Adobe XD'de İndirme

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

Adım 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 üçünü 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, kullanıcı arayüzlerini ücretsiz olarak indirebileceğiniz resmi bir web sayfası açacaktır.

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

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

Tüm çalışma yüzeylerini 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 Wireframe'leri indirmek isterseniz, UI Kitlerini Al menüsündeki Wireframe'lere tıklayabilirsiniz.

Ayrıca UI Kitleri menüsündeki Diğer UI Kitleri seçeneğini tıklatarak Adobe'nin web sitesinde ek UI kitleri de arayabilirsiniz.

Web sitesinde, başörtüsü ekranına benzeyen bu gerçekten harika Movie Magic UI seti dahil, seçebileceğiniz harika seçenekler var.

Şimdi UI kitlerini nasıl indireceğinizi bildiğinize göre, bunları projelerinizde nasıl kullanabileceğinizi görelim.

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

UI kitlerini projenizde kullanmak için aşağıdaki basit adımları uygulamanız yeterlidir:

Adım 1: Projenizde kullanmak istediğiniz UI öğesini büyütün ve seçmek için başlığına tıklayın.

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

Adım 3: Ardından menüden yeni bir Adobe XD projesi açın.

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

Bu makale için, Google Material UI kitindeki Mobile Dark öğesini kullanacağım. Öğe daha fazla katman yerleştirmenize yardımcı olacak kılavuzları içerir, 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 sonra sil düğmesine basın. Kılavuza daha fazla nesne yerleştirmek için kılavuzları kullanmak istiyorsanız, bu adımı atlayabilirsiniz.

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

Diyaloglardan birini kullanacağım bu yazı için temel bir tost oluşturacağım.

Adım 7: Yeni elemanı önceki elemana yapıştırın ve sonra 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. İlk önce tost unvanı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.

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

Metnin rengini değiştirmek için, Dolgu 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ğildir. Ayrıca, benzersiz bir renk düzenine gittiğinizde harika olan iletişim kutusundaki hemen hemen tüm öğelerin rengini ve opaklığını da değiştirebilirsiniz.

Sonuçtan memnun kaldıktan sonra, devam edin ve menüdeki Farklı Kaydet seçeneğini tıklatarak veya Shift + Ctrl + S kısayolunu kullanarak dosyanızı kaydedin.

Ayrıca Rehberlik Tech

#grafik Tasarım

Grafik tasarım makaleleri sayfamızı görmek için tıklayınız.

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

Artık Adobe XD'de UI kitlerinin nasıl indirileceğini ve kullanılacağını bildiğinize göre, çok kısa sürede muhteşem tasarımları karıştırmaya başlayacağınızdan eminim. Bu UI kitleri kesinlikle oldukça kullanışlıdır ve her bir UI öğesini tasarlama konusunda endişelenmeden doğrudan projenize ulaşmanıza yardımcı olur.

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