Adobe xd html'ye verme

Adobe XD, daha önce herhangi bir web geliştirme deneyimi olmadan kolayca harika web sitesi tasarımları oluşturmanıza olanak sağlayan şaşırtıcı bir tasarım aracıdır. Tasarımınızın PSD dosyalarını Photoshop'tan içe aktarabilir ve göz alıcı bir web sitesi arayüzü oluşturabilirsiniz.

Bu tasarımlar, geliştiricilerin web sitenizin nasıl görünmesini istediğinizi anlamalarına ve geliştirme sürecini biraz daha kolay hale getirmelerine yardımcı olmak için uzun bir yol kat ediyor. Ancak, tasarımları yazılımdan dışa aktarabilmeniz için sınırlı sayıda yol vardır.

Bunları bir XD dosyası olarak kaydetmeyi seçebilir ve geliştiricinin zaten sisteminde yüklü yazılımı bulunduğunu umabilir veya her çalışma yüzeyini kullanımı biraz uygunsuz olabilecek ayrı bir PNG dosyası olarak dışa aktarabilirsiniz.

Ayrıca Rehberlik Tech

Maket ve Tel Çerçeve Oluşturma İçin En İyi 3 Tasarım Araçları

Neyse ki, çalışma yüzeylerini HTML dosyaları olarak dışa aktarmanıza olanak tanıyan kullanışlı bir üçüncü taraf eklentisi var ve bundan bahsedeceğim. Ama buna başlamadan önce, bilmen gereken bir şey var.

Not: Bu yöntem kullanılarak oluşturulan HTML dosyası hiçbir şekilde tam bir web sayfası için temel olarak değerlendirilmemelidir. Bu yöntem yalnızca tasarımlarınızı bir geliştirici ile kolayca paylaşmanın bir yoludur, ancak işlevsel bir web sitesi geliştirme süreci değildir.

Eklentileri Kullanarak Adobe XD Dosyalarını HTML'ye Aktar

Artık bunu çözdüğümüze göre, gerekli eklentiyi indirmek ve ardından Adobe XD dosyalarını HTML'ye dışa aktarmak için aşağıdaki basit adımları izleyin:

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

Adım 2: Tamamen aşağı doğru kaydırın ve ardından Eklentiler seçeneğini tıklayın. Ana menünün sağ tarafında yeni bir Eklenti paneli açılacaktır.

Adım 3: Eklentiler panelinden Eklentileri Keşfet seçeneğini belirleyin.

Adım 4: Bir sonraki sayfada HTML arayın ve ardından Web Dışa Aktarma eklentisinin yanındaki Yükle düğmesine tıklayın.

Gerekli eklentiyi yükledikten sonra, HTML'ye aktarmak istediğiniz projeyi açın ve ardından aşağıdaki adımlara devam edin. Bu makale için çevrimiçi bulduğum ücretsiz bir Adobe XD çalışma yüzeyini kullanacağım.

Adım 5: Dışa aktarmak istediğiniz çalışma yüzeyini tıklayarak seçin.

Adım 6: Şimdi menü düğmesine tıklayın, Eklentiler paneline gidin ve yeni Web Dışa Aktarma eklentisi ayarlarından Çalışma Yüzeyini Dışa Aktar seçeneğini belirleyin.

Aynı pencereden, birden fazla çalışma yüzeyini veya düzenlediğiniz son çalışma yüzeyini dışa aktarmayı da seçebilirsiniz.

Adım 7: Çalışma Yüzeyini Dışa Aktar açılır penceresinde, dosya için bir ad ekleyin ve ardından Klasörü Dışa Aktar seçeneğinin yanındaki küçük klasör simgesine tıklayarak dosyayı kaydetmek istediğiniz klasörü seçin.

Adım 8: Şimdi, dışa aktarılan dosyaya harici bir komut dosyası, stil sayfası veya alternatif yazı tipleri eklemek istiyorsanız, bunları aynı pencereye ekleyebilirsiniz.

Adım 9: Ardından, Boyut seçeneğinin yanındaki boş alana değerleri yazarak çıktı HTML dosyasının boyutlarını seçebilirsiniz.

Adım 10: Projenin uygun şekilde ölçeklenmesini sağlamak için, her bir seçeneğin yanındaki kutuyu işaretleyerek aynı pencereden çeşitli ölçeklendirme ayarları da seçebilirsiniz.

Adım 11: Ayrıca, seçeneklerin yanındaki kutuları işaretleyerek Klavye Gezinti, Otomatik Yenileme vb. Gibi ek ayarları seçebilirsiniz.

Adım 12: Tüm ayarları tamamladığınızda, sadece mavi Export (Dışa Aktar) düğmesine tıklayın ve işlem tamamlandı. Çalışma yüzeyiniz daha önce seçtiğiniz hedef klasörde bir HTML dosyası olarak görünecektir.

Aynı pencereden, aynı zamanda bu bilgiyi geliştiricinizle paylaşmak istiyorsanız, çalışma yüzeyinizin CSS'sini ve işaretlemesini de kopyalayabilirsiniz.

Bir kez daha, dışa aktarılan HTML'nin tamamen işlevsel bir web sitesi geliştirmek için hiçbir şekilde kullanılamayacağını unutmayın. Şu an itibariyle, bir Adobe XD projesini doğrudan web üzerinde yayınlamanın bir yolu yok ve Adobe forumlarındaki çeşitli tartışmalara göre, yakın zamanda bir tane olmayacak.

Adobe XD, kodsuz bir ilk tasarım oluşturmanıza olanak sağlayan bir prototipleme aracıdır. Tasarımınız hazır olduğunda, tasarımınızı web sitesine dönüştürmek için Dreamweaver gibi bir platform kullanabilirsiniz. Ancak bunun için, önceden bir web geliştirme deneyimine ihtiyacınız olacak veya bunu yapan birini işe almanız gerekecek.

Ayrıca Rehberlik Tech

#design

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

Adobe XD Dosyanızı HTML olarak Verme

Bu nedenle, Adobe XD dosyanızı HTML'ye nasıl aktaracağınızı bildiğinize göre, çalışma yüzeylerinizi bir geliştirici veya müşteri ile kolayca paylaşabileceğinizden eminim. Ve uyumluluk sorunları hakkında endişelenmenize gerek kalmayacak. Eklentiyi hemen yükleyin ve çalışma yüzeylerinizi kolayca dışa aktarmaya başlayın.

Sıradaki: Kendi HTML web sitenizi nasıl kodlayacağınızı ve yazabileceğinizi öğrenebileceğiniz birkaç ücretsiz etkileşimli web sitesi için aşağıdaki makaleye göz atın.