จากการออกแบบไปจนถึงโค้ดตอบสนองที่เป็นมิตรกับนักพัฒนาในไม่กี่นาทีด้วย Anima

นี่เป็นบทความที่ได้รับการสนับสนุนที่เป็นมิตร ซึ่งเขียนขึ้นโดยได้รับการสนับสนุนอย่างดีจากเพื่อนรักของเราที่ Anima ซึ่งช่วยคุณออกแบบต้นแบบที่มีความเที่ยงตรงสูงแบบโต้ตอบได้อย่างเต็มที่ด้วย Sketch, Figma หรือ Adobe XD ขอขอบคุณ!

สัญญาของการออกแบบที่ราบรื่นในการแปลโค้ดกลับไปสู่ผู้สร้างเพจ WYSIWYG รุ่นแรกๆ แม้จะมีเป้าหมายที่น่าชื่นชม แต่ข้อบกพร่องที่ใหญ่ที่สุดของพวกเขา (ในหลาย ๆ ด้าน) คือรหัสที่น่ากลัวที่พวกเขาสร้างขึ้น ความสงสัยยังคงอยู่มาจนถึงทุกวันนี้ และเมื่อใดก็ตามที่แนวคิดนี้ปรากฏขึ้นอีกครั้ง ข้อกังวลที่ใหญ่ที่สุดมักเกี่ยวข้องกับคุณภาพและความสามารถในการบำรุงรักษาของโค้ด

สิ่งนี้กำลังจะเปลี่ยนไปเนื่องจากผลิตภัณฑ์ใหม่ได้ก้าวกระโดดไปในทิศทางที่ถูกต้อง เป้าหมายสูงสุดของพวกเขาคือทำให้การออกแบบเป็นไปโดยอัตโนมัติเพื่อประมวลผลโค้ด แต่ไม่ต้องเสียคุณภาพของโค้ด หนึ่งในผลิตภัณฑ์เหล่านี้ Anima พยายามที่จะเชื่อมช่องว่างในท้ายที่สุดด้วยการจัดหาการออกแบบที่ครบถ้วนสำหรับแพลตฟอร์มการพัฒนา

แอนิมาคืออะไร?

Anima เป็นเครื่องมือออกแบบเพื่อพัฒนา โดยมีจุดมุ่งหมายเพื่อเปลี่ยนกระบวนการแฮนด์ออฟการออกแบบให้เป็นการทำงานร่วมกันอย่างต่อเนื่อง นักออกแบบ สามารถใช้ Anima เพื่อสร้างต้นแบบที่ตอบสนองได้อย่างเต็มที่ซึ่งมีลักษณะและทำงานเหมือนกับผลิตภัณฑ์สำเร็จรูป (ไม่ต้องเขียนโค้ด) ในทางกลับกัน นักพัฒนา สามารถนำการออกแบบเหล่านี้และส่งออกไปยังโค้ด React/HTML ที่เป็นมิตรกับนักพัฒนา แทนที่จะเขียนโค้ด UI ตั้งแต่เริ่มต้น พวกเขาสามารถมุ่งเน้นไปที่ตรรกะและสถาปัตยกรรมได้

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

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

การติดตั้งปลั๊กอินและการตั้งค่าโครงการ

การเริ่มต้นใช้งาน Anima นั้นง่ายมาก คุณต้องสร้างบัญชีก่อนแล้วจึงติดตั้งปลั๊กอิน ในขณะที่ฉันจะใช้ Figma สำหรับคำแนะนำนี้ Anima รองรับเครื่องมือการออกแบบที่สำคัญทั้งหมด: Sketch, Figma และ Adobe XD

• Anima สำหรับ Sketch
• Anima สำหรับ Figma
• Anima สำหรับ Adobe XD

เมื่อเสร็จแล้ว ตรวจสอบให้แน่ใจว่าคุณสร้างโปรเจ็กต์บนแพลตฟอร์มของ Anima — นั่นคือที่ที่การออกแบบของเราจะปรากฏขึ้นเมื่อเราซิงค์

ตัวปลั๊กอินเองถูกแบ่งออกเป็นสามส่วนหลัก แต่ละส่วนมีรายการตัวเลือกต่างๆ สิ่งที่เราจะทำส่วนใหญ่ก็แค่เลือกหนึ่งในตัวเลือกเหล่านั้น แล้ว ใช้เลเยอร์หรือเฟรมเฉพาะใน Figma

การสร้างต้นแบบที่ตอบสนอง

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

สิ่งที่น่าสนใจอย่างหนึ่งที่เราสามารถทำได้ด้วย Anima คือการสร้างต้นแบบที่พอดีกับหน้าจอทุกขนาด ต้นแบบดั้งเดิมที่สร้างจากรูปภาพที่คลิกได้เป็นแบบคงที่และมักจะล้มเหลวภายใต้ขนาดหน้าจอที่ต่างกัน

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

เมื่อคุณพร้อมแล้ว ให้คลิกที่ “ดูตัวอย่างในเบราว์เซอร์” เพื่อดูผลลัพธ์ นั่นคือเวลาที่ Anima จะแปลงการออกแบบของคุณให้เป็นโค้ด

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

เพื่อให้การเปลี่ยนภาพราบรื่นขึ้น สิ่งสำคัญคือต้องใช้คุณลักษณะข้อจำกัดของ Figma เมื่อออกแบบส่วนประกอบของคุณ ตรวจสอบให้แน่ใจว่าได้เลือกช่อง "ใช้ Figma Constraints" ในส่วน "Layout" ของปลั๊กอินด้วย

ทำให้การออกแบบของคุณมีชีวิตชีวาด้วยเลเยอร์อัจฉริยะ

เราสามารถก้าวไปอีกหน่อย เนื่องจาก Anima แปลงการออกแบบเป็นโค้ด ความเป็นไปได้จึงไม่มีที่สิ้นสุดสำหรับสิ่งที่เราสามารถเพิ่มเพื่อทำให้ต้นแบบของเราสมจริงยิ่งขึ้น

แอนิเมชั่นและเอฟเฟกต์โฮเวอร์ จะเป็นวิธีที่ดีในการทำให้ต้นแบบมีชีวิตชีวายิ่งขึ้นและสร้างความประทับใจให้กับผู้มีส่วนได้ส่วนเสีย Anima มีตัวเลือกมากมายที่สามารถนำไปใช้กับเลเยอร์หรือส่วนประกอบใดก็ได้ ในกรณีของเรา เราจะเลือกเลเยอร์พาดหัว แล้วเลือก “แอนิเมชั่นทางเข้า” และ “เฟดอิน” ในฟิลด์การหน่วงเวลา เราจะเพิ่ม 0.5

สำหรับแต่ละฟิลด์ เราจะเพิ่มเอฟเฟกต์เรืองแสงเมื่อวางเมาส์เหนือ เลือกเลเยอร์ฟิลด์ จากนั้นเลือก "เอฟเฟกต์โฮเวอร์" และเลือก "เรืองแสง" ทำซ้ำเช่นเดียวกันสำหรับปุ่ม

ตอนนี้เราได้นำการเปลี่ยนแปลงทั้งหมดไปใช้แล้ว เราจะเห็นว่าต้นแบบเริ่มรู้สึกเหมือนเป็นผลิตภัณฑ์จริง

หนึ่งในคุณสมบัติพิเศษที่ Anima นำเสนอคือความสามารถในการ เพิ่มฟิลด์และแบบฟอร์มสด ให้กับต้นแบบ เนื่องจากเรากำลังออกแบบประสบการณ์การเริ่มต้นใช้งาน สิ่งนี้จะเป็นประโยชน์สำหรับเราจริงๆ การป้อนข้อมูลเป็นหนึ่งในจุดพลิกผันที่ใหญ่ที่สุดในประสบการณ์ผลิตภัณฑ์ใดๆ และเป็นการยากที่จะทดสอบแนวคิดโดยไม่ต้องคำนึงถึง

เช่นเดียวกับที่เราเพิ่มเอฟเฟกต์ก่อนหน้านี้ ตอนนี้เราเลือกองค์ประกอบของฟิลด์และเลือก "ฟิลด์ข้อความ" จากนั้นเราจะต้องเลือกประเภทของฟิลด์ที่เราต้องการ หากเราเลือกช่องรหัสผ่าน เช่น การป้อนข้อมูลจะถูกซ่อนและ Anima จะเพิ่มฟังก์ชันการแสดง/ซ่อนลงในช่อง

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

ต่อไป เราจะเพิ่มแอนิเมชั่น Lottie สำหรับหน้าจอความสำเร็จของเรา เนื่องจากจะเป็นวิธีที่ดีในการทำให้ประสบการณ์มีส่วนร่วมมากขึ้น สำหรับสิ่งนั้น เราจำเป็นต้องเพิ่มเลเยอร์ตัวยึดตำแหน่งในตำแหน่งของแอนิเมชั่น จากนั้นเลือกเลเยอร์นั้นแล้วเลือกตัวเลือก “วิดีโอ / GIF / Lottie” ในปลั๊กอิน

จากนั้นเราจะวาง URL ของแอนิเมชั่น Lottie ของเราและทำเครื่องหมายที่ช่อง "เล่นอัตโนมัติ" และ "ไม่มีการควบคุม" ในกรณีของเรา เราไม่ต้องการให้มีการควบคุมโปรแกรมเล่นวิดีโอใดๆ เนื่องจากนี่เป็นแอนิเมชั่นที่ประสบความสำเร็จ

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

แบ่งปันการออกแบบกับทีมที่เหลือ

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

ทุกคนที่ได้รับเชิญให้เข้าร่วมโครงการจะสามารถเข้าถึงการออกแบบและจะสามารถดูตัวอย่าง แสดงความคิดเห็น และตรวจสอบโค้ดได้

นักพัฒนาสามารถรับ React Code ได้

ดังที่ได้กล่าวไว้ก่อนหน้านี้ ในฐานะนักพัฒนา เรามักจะไม่มั่นใจในเครื่องมือที่สร้างโค้ด ส่วนใหญ่เป็นเพราะการเขียนบางอย่างตั้งแต่เริ่มต้นมักจะเร็วกว่าการปรับโครงสร้างบางอย่างที่เขียนได้ไม่ดี เพื่อหลีกเลี่ยงปัญหานี้ Anima ได้นำแนวทางปฏิบัติที่ดีที่สุดมาใช้เพื่อให้โค้ดสะอาด ใช้ซ้ำได้ และกระชับ

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

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

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

หากคุณกำลังใช้ Vue หรือ Angular คาดว่า Anima จะเริ่มรองรับเฟรมเวิร์กเหล่านี้ในอนาคตอันใกล้นี้เช่นกัน

มองไปข้างหน้า

ดังที่เราเห็น ช่องว่างระหว่างการออกแบบและโค้ดยังคงเชื่อมโยงกัน สำหรับผู้ที่เขียนโค้ด การใช้เครื่องมือดังกล่าวมีประโยชน์มากเพราะสามารถลดการทำงานซ้ำๆ ในส่วนหน้าได้ สำหรับผู้ที่ออกแบบ จะอนุญาตให้สร้างต้นแบบ การทำงานร่วมกันและการซิงค์ที่ยากต่อการส่งภาพนิ่งไปมา

สิ่งที่แน่นอนอยู่แล้วคือ Anima ขจัดกิจกรรมที่สิ้นเปลืองมากมายในกระบวนการส่งต่อ และช่วยให้ทั้งนักออกแบบและนักพัฒนาสามารถมุ่งเน้นไปที่สิ่งที่สำคัญ: การสร้างผลิตภัณฑ์ที่ดีขึ้น ฉันหวังว่าจะได้เห็นสิ่งที่เกิดขึ้นต่อไปใน Anima!