วิธีการส่งออก adobe xd เป็น html

Adobe XD เป็นเครื่องมือออกแบบที่ยอดเยี่ยมที่ช่วยให้คุณสร้างการออกแบบเว็บไซต์ที่ยอดเยี่ยมได้อย่างง่ายดายโดยไม่ต้องมีประสบการณ์การพัฒนาเว็บไซต์มาก่อน คุณสามารถนำเข้าไฟล์ PSD ของการออกแบบของคุณจาก Photoshop และสร้าง UI เว็บไซต์ที่สะดุดตา

การออกแบบเหล่านี้ช่วยให้นักพัฒนาเข้าใจวิธีที่คุณต้องการให้เว็บไซต์ของคุณค้นหาและทำให้กระบวนการพัฒนาง่ายขึ้นเล็กน้อยในส่วนของพวกเขา อย่างไรก็ตามมีเพียงไม่กี่วิธีที่คุณสามารถส่งออกการออกแบบจากซอฟต์แวร์ได้

คุณสามารถเลือกที่จะบันทึกเป็นไฟล์ XD และหวังว่านักพัฒนาซอฟต์แวร์จะได้ติดตั้งไว้ในระบบของเขาแล้วหรือส่งออกแต่ละบอร์ดเป็นไฟล์ PNG ซึ่งอาจไม่สะดวกในการใช้

ยังแนะนำแนวทาง

สุดยอด 3 เครื่องมือออกแบบสำหรับสร้าง Mockups และ Wireframes

โชคดีที่มีปลั๊กอินของบุคคลที่สามที่มีประโยชน์ที่ให้คุณส่งออกกระดานเป็นไฟล์ HTML และนั่นคือสิ่งที่ฉันจะพูดถึง แต่ก่อนที่เราจะไปถึงมันมีบางสิ่งที่คุณต้องรู้

หมายเหตุ: ไฟล์ HTML ที่สร้างขึ้นโดยใช้วิธีนี้ไม่ควรถือว่าเป็นฐานสำหรับหน้าเว็บแบบสมบูรณ์ วิธีนี้เป็นเพียงวิธีการแบ่งปันการออกแบบของคุณกับนักพัฒนาอย่างง่ายดายและไม่ใช่กระบวนการพัฒนาเว็บไซต์ที่ใช้งานได้

ส่งออกไฟล์ Adobe XD ไปยัง HTML โดยใช้ปลั๊กอิน

ตอนนี้เรามีวิธีแก้ปัญหาเสร็จแล้วเพียงทำตามขั้นตอนง่าย ๆ เหล่านี้เพื่อดาวน์โหลดปลั๊กอินที่ต้องการแล้วส่งออกไฟล์ Adobe XD ไปยัง HTML:

ขั้นตอนที่ 1: คลิกที่ปุ่มเมนูแฮมเบอร์เกอร์ที่มุมบนซ้ายของซอฟต์แวร์

ขั้นตอนที่ 2: เลื่อนลงจนสุดแล้วคลิกที่ตัวเลือกปลั๊กอิน ที่จะเปิดแผงเสริมใหม่ทางด้านขวาของเมนูหลัก

ขั้นตอนที่ 3: เลือกตัวเลือก Discover Plugins จากแผงปลั๊กอิน

ขั้นตอนที่ 4: ในหน้าถัดไปค้นหา HTML จากนั้นคลิกที่ปุ่มติดตั้งถัดจากปลั๊กอินการส่งออกเว็บ

เมื่อคุณติดตั้งปลั๊กอินที่ต้องการแล้วให้เปิดโครงการที่คุณต้องการส่งออกเป็น HTML จากนั้นทำตามขั้นตอนต่อไปนี้ สำหรับบทความนี้ฉันจะใช้งาน Adobe XD artboard ฟรีที่ฉันพบทางออนไลน์

ขั้นตอนที่ 5: เลือก artboard ที่คุณต้องการส่งออกโดยคลิกที่มัน

ขั้นตอนที่ 6: ตอนนี้คลิกที่ปุ่มเมนูไปที่พาเนลปลั๊กอินแล้วเลือกตัวเลือกส่งออกอาร์ทบอร์ดจากการตั้งค่าปลั๊กอินการส่งออกเว็บใหม่

จากหน้าต่างเดียวกันคุณยังสามารถเลือกที่จะส่งออกหลายกระดานหรือกระดานล่าสุดที่คุณแก้ไข

ขั้นตอนที่ 7: ในป๊อปอัพ Export Artboard ให้เพิ่มชื่อไฟล์แล้วเลือกโฟลเดอร์ที่คุณต้องการบันทึกไฟล์โดยคลิกที่ไอคอนโฟลเดอร์เล็ก ๆ ถัดจากตัวเลือกส่งออกโฟลเดอร์

ขั้นตอนที่ 8: ตอนนี้ถ้าคุณต้องการเพิ่มสคริปต์ภายนอกสไตล์ชีทหรือฟอนต์ทางเลือกลงในไฟล์ที่ส่งออกคุณสามารถเพิ่มสิ่งเหล่านั้นในหน้าต่างเดียวกัน

ขั้นตอนที่ 9: จากนั้นคุณสามารถเลือกขนาดของไฟล์ HTML เอาต์พุตโดยพิมพ์ค่าในพื้นที่ว่างถัดจากตัวเลือกขนาด

ขั้นตอนที่ 10: เพื่อให้แน่ใจว่าโครงการปรับขนาดได้อย่างถูกต้องคุณสามารถเลือกการตั้งค่าสเกลต่างๆจากหน้าต่างเดียวกันโดยทำเครื่องหมายที่ช่องถัดจากแต่ละตัวเลือก

ขั้นตอนที่ 11: นอกจากนี้คุณสามารถเลือกการตั้งค่าเพิ่มเติมเช่นการนำทางด้วยแป้นพิมพ์การรีเฟรชอัตโนมัติ ฯลฯ โดยทำเครื่องหมายในช่องถัดจากตัวเลือก

ขั้นตอนที่ 12: เมื่อคุณเสร็จสิ้นการตั้งค่าทั้งหมดเพียงคลิกที่ปุ่มส่งออกสีน้ำเงินและคุณเสร็จสิ้น บอร์ดศิลป์ของคุณจะปรากฏเป็นไฟล์ HTML ในโฟลเดอร์ปลายทางที่คุณเลือกไว้ก่อนหน้านี้

จากหน้าต่างเดียวกันคุณจะสามารถคัดลอก CSS และมาร์กอัปของ artboard ของคุณหากคุณต้องการแชร์ข้อมูลนั้นกับนักพัฒนาของคุณ

โปรดทราบอีกครั้งว่า HTML ที่ส่งออกไม่สามารถใช้ในการพัฒนาเว็บไซต์ที่ใช้งานได้อย่างสมบูรณ์ ณ ตอนนี้ไม่มีทางที่คุณจะเผยแพร่โครงการ Adobe XD ไปยังเว็บได้โดยตรงและจากการพูดคุยกันหลายครั้งในฟอรัม Adobe จะไม่มีอีกในไม่ช้า

Adobe XD เป็นเพียงเครื่องมือต้นแบบที่ช่วยให้คุณสร้างการออกแบบเริ่มต้นโดยไม่ต้องใช้รหัส เมื่อคุณพร้อมออกแบบคุณสามารถใช้แพลตฟอร์มเช่น Dreamweaver เพื่อแปลงการออกแบบของคุณเป็นเว็บไซต์ แต่สำหรับสิ่งนั้นคุณจะต้องมีประสบการณ์การพัฒนาเว็บไซต์มาก่อนหรือไม่ก็ต้องจ้างคนที่ทำ

ยังแนะนำแนวทาง

#ออกแบบ

คลิกที่นี่เพื่อดูหน้าบทความการออกแบบของเรา

ส่งออกไฟล์ Adobe XD ของคุณเป็น HTML

ดังนั้นตอนนี้คุณก็รู้วิธีการส่งออกไฟล์ Adobe XD ของคุณไปยัง HTML ฉันมั่นใจว่าคุณจะสามารถแบ่งปันงานศิลปะของคุณกับนักพัฒนาหรือลูกค้าได้อย่างง่ายดาย และคุณไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ ติดตั้งปลั๊กอินทันทีและเริ่มส่งออกกระดานของคุณอย่างง่ายดาย

ถัดไป: ตรวจสอบบทความต่อไปนี้สำหรับเว็บไซต์โต้ตอบฟรีสองแห่งซึ่งคุณสามารถเรียนรู้วิธีการเขียนโค้ดและเขียนเว็บไซต์ HTML ของคุณเอง