როგორ გავიტანოთ Adobe XD HTML-ში ექსპორტი
Miscellanea / / November 29, 2021
Adobe XD არის საოცარი დიზაინის ხელსაწყო, რომელიც საშუალებას გაძლევთ მარტივად შექმნათ ფანტასტიკური ვებსაიტების დიზაინი ყოველგვარი ვებ განვითარების გამოცდილების გარეშე. თქვენ შეგიძლიათ უბრალოდ შემოიტანოთ თქვენი დიზაინის PSD ფაილები Photoshop და შექმენით თვალწარმტაცი ვებსაიტის ინტერფეისი.
![გადაიყვანეთ Html-ზე Adobe Xd Featured](/f/dc18655adeb8a9a6b3712bcd2cf90569.jpg)
ეს დიზაინები დიდ გზას უწევს დეველოპერებს იმის გაგებაში, თუ როგორ უნდა გამოიყურებოდეს თქვენი ვებსაიტი და გააადვილოს განვითარების პროცესი მათი მხრიდან. თუმცა, არსებობს მხოლოდ შეზღუდული რაოდენობის გზები, რომლითაც შეგიძლიათ დიზაინის ექსპორტი პროგრამული უზრუნველყოფიდან.
თქვენ შეგიძლიათ აირჩიოთ მათი შენახვა XD ფაილად და იმედი გქონდეთ, რომ დეველოპერს უკვე აქვს დაინსტალირებული პროგრამული უზრუნველყოფა თავის სისტემაზე, ან ექსპორტი გაუკეთეთ თითოეული არტბორდის ინდივიდუალურად. PNG ფაილი, რომელიც შეიძლება ცოტა მოუხერხებელი იყოს გამოსაყენებლად.
საბედნიეროდ, არის მოსახერხებელი მესამე მხარე ჩართვა შეერთება ეს საშუალებას გაძლევთ ექსპორტი გააკეთოთ არტ დაფები HTML ფაილებად და სწორედ ამაზე ვისაუბრებ ამ სტატიაში. მაგრამ სანამ მას მივაღწევთ, არის რაღაც, რაც უნდა იცოდეთ.
Შენიშვნა: ამ მეთოდის გამოყენებით გენერირებული HTML ფაილი არავითარ შემთხვევაში არ უნდა განიხილებოდეს, როგორც სრული ვებ გვერდის საფუძველი. ეს მეთოდი მხოლოდ საშუალებაა თქვენი დიზაინის მარტივად გასაზიარებლად დეველოპერთან და არა ფუნქციონალური ვებსაიტის განვითარების პროცესი.
Adobe XD ფაილების ექსპორტი HTML-ში დანამატების გამოყენებით
ახლა, როდესაც ჩვენ ეს არ გამოგვივიდა, უბრალოდ მიჰყევით ამ მარტივ ნაბიჯებს, რომ ჩამოტვირთოთ საჭირო მოდული და შემდეგ გაიტანოთ Adobe XD ფაილები HTML-ში:
Ნაბიჯი 1: დააჭირეთ ჰამბურგერის მენიუს ღილაკს პროგრამის ზედა მარცხენა კუთხეში.
![Adobe Xd-ის ექსპორტი Html 01-ში](/f/1fda9a4875e8ec23ab3da78aef33b16d.jpg)
ნაბიჯი 2: გადაახვიეთ ბოლომდე ქვემოთ და შემდეგ დააწკაპუნეთ Plugins ოფციაზე. ეს გახსნის ახალ Plugins პანელს მთავარი მენიუს მარჯვნივ.
![Adobe Xd-ის ექსპორტი Html 02-ზე](/f/53de6efbf8aabffd8a7fe031837cce0f.jpg)
ნაბიჯი 3: აირჩიეთ Discover Plugins ვარიანტი Plugins პანელიდან.
![Adobe Xd-ის ექსპორტი Html 03-ზე](/f/48a446994ddd585e4411616102c0d0e4.jpg)
ნაბიჯი 4: შემდეგ გვერდზე მოძებნეთ HTML და შემდეგ დააწკაპუნეთ ღილაკზე ინსტალაცია Web Export მოდულის გვერდით.
![Adobe Xd-ის ექსპორტი Html 04-ზე](/f/3884062acfd55dfacf3860970a9a529c.jpg)
მას შემდეგ რაც დააინსტალირებთ საჭირო დანამატს, გახსენით პროექტი, რომლის ექსპორტი გსურთ HTML-ში და შემდეგ გააგრძელეთ შემდეგი ნაბიჯები. ამ სტატიისთვის მე გამოვიყენებ უფასო Adobe XD არტბორდს, რომელიც ინტერნეტში ვიპოვე.
ნაბიჯი 5: აირჩიეთ ხელოვნების დაფა, რომლის ექსპორტი გსურთ მასზე დაწკაპუნებით.
![Adobe Xd-ის ექსპორტი Html 05-ზე](/f/93eaef6b5fa1b64a263b0cab26727dee.jpg)
ნაბიჯი 6: ახლა დააწკაპუნეთ მენიუს ღილაკზე, გადადით Plugins პანელზე და შემდეგ აირჩიეთ Export Artboard ვარიანტი ახალი Web Export მოდულის პარამეტრებიდან.
![Adobe Xd-ის ექსპორტი Html 06-ზე](/f/8f0836cc33260f29a731cbb3030b4061.jpg)
იმავე ფანჯრიდან, თქვენ ასევე შეგიძლიათ აირჩიოთ რამდენიმე დაფის ექსპორტი ან თქვენს მიერ რედაქტირებული ბოლო დაფის ექსპორტი.
ნაბიჯი 7: Export Artboard-ის ამომხტარ ფანჯარაში დაამატეთ სახელი ფაილისთვის და შემდეგ აირჩიეთ საქაღალდე, რომელშიც გსურთ ფაილის შენახვა, დაწკაპუნებით პაწაწინა საქაღალდის ხატულაზე Export Folder ვარიანტის გვერდით.
![Adobe Xd-ის ექსპორტი Html 07-ზე](/f/dd11ea00bcf4c811c23294a8477154bd.jpg)
ნაბიჯი 8: ახლა, თუ გსურთ ექსპორტირებულ ფაილში გარე სკრიპტის, სტილის ფურცლის ან ალტერნატიული შრიფტების დამატება, შეგიძლიათ დაამატოთ ისინი იმავე ფანჯარაში.
![Adobe Xd-ის ექსპორტი Html 11-ში](/f/1a13a95520fe76b238f4fcc9e09dd43a.jpg)
ნაბიჯი 9: შემდეგ, თქვენ შეგიძლიათ აირჩიოთ გამომავალი HTML ფაილის ზომები მნიშვნელობების აკრეფით ცარიელ სივრცეში ზომის ოფციის გვერდით.
![Adobe Xd-ის ექსპორტი Html 12-ში](/f/6e0c49bf5f02f424bc844299075ee415.jpg)
ნაბიჯი 10: პროექტის სწორად მასშტაბის უზრუნველსაყოფად, თქვენ ასევე შეგიძლიათ აირჩიოთ სკალირების სხვადასხვა პარამეტრები იმავე ფანჯრიდან, თითოეული ვარიანტის გვერდით მდებარე ველის მონიშვნით.
![Adobe Xd-ის ექსპორტი Html 13-ში](/f/6a82cddc391604fd188cde47ee42ffd3.jpg)
ნაბიჯი 11: გარდა ამისა, შეგიძლიათ აირჩიოთ ნებისმიერი დამატებითი პარამეტრი, როგორიცაა კლავიატურის ნავიგაცია, ავტომატური განახლება და ა.შ. პარამეტრების გვერდით მდებარე ველების შემოწმებით.
![Adobe Xd-ის ექსპორტი Html 14-ში](/f/c472d30c6aca3d4fc63958387f3a2096.jpg)
ნაბიჯი 12: როგორც კი დაასრულებთ ყველა პარამეტრს, უბრალოდ დააწკაპუნეთ ლურჯ ღილაკზე ექსპორტი და დაასრულეთ. თქვენი არტ დაფა გამოჩნდება HTML ფაილის სახით ადრე არჩეულ დანიშნულების საქაღალდეში.
![Adobe Xd-ის ექსპორტი Html 09-ზე](/f/c69c2cb4df37581a4b934b4d736103d3.jpg)
იმავე ფანჯრიდან, თქვენ ასევე შეგეძლებათ დააკოპიროთ CSS და თქვენი არტბორდის მარკირება, თუ გსურთ ამ ინფორმაციის გაზიარება თქვენს დეველოპერთან.
![Adobe Xd-ის ექსპორტი Html 15-ში](/f/d584290aa1c6a62a36a5e6b3d29fa227.jpg)
კიდევ ერთხელ, გაითვალისწინეთ, რომ ექსპორტირებული HTML არავითარ შემთხვევაში არ შეიძლება გამოყენებულ იქნას სრულად ფუნქციონალური ვებსაიტის შესაქმნელად. ამ დროისთვის, თქვენ არ გაქვთ საშუალება გამოაქვეყნოთ Adobe XD პროექტი პირდაპირ ინტერნეტში და რამდენიმეს მიხედვით დისკუსიები Adobe ფორუმებზე, არცერთი არ იქნება მალე.
Adobe XD არის მხოლოდ პროტოტიპის ინსტრუმენტი, რომელიც საშუალებას გაძლევთ შექმნათ საწყისი დიზაინი კოდის გარეშე. მას შემდეგ რაც დიზაინი მზად იქნება, შეგიძლიათ გამოიყენოთ ისეთი პლატფორმა, როგორიცაა Dreamweaver თქვენი დიზაინის ვებსაიტად გადასაყვანად. მაგრამ ამისთვის დაგჭირდებათ ვებ განვითარების წინასწარი გამოცდილება ან დაგჭირდებათ ვინმეს დაქირავება, ვინც ამას აკეთებს.
თქვენი Adobe XD ფაილის ექსპორტი HTML-ში
ასე რომ, ახლა, როდესაც თქვენ იცით, თუ როგორ უნდა გაიტანოთ თქვენი Adobe XD ფაილი HTML-ში, დარწმუნებული ვარ, რომ თქვენ შეძლებთ მარტივად გააზიაროთ თქვენი არტბორდები დეველოპერთან ან კლიენტთან. და თქვენ არ მოგიწევთ ფიქრი რაიმე თავსებადობის საკითხზე. დაუყონებლივ დააინსტალირეთ მოდული და დაიწყეთ თქვენი არტ დაფების ექსპორტი მარტივად.
Შემდეგი: გადახედეთ შემდეგ სტატიას რამდენიმე უფასო ინტერაქტიული ვებსაიტისთვის, რომლებზეც შეგიძლიათ ისწავლოთ კოდირება და დაწეროთ თქვენი საკუთარი HTML ვებსაიტი.