ปลั๊กอินร่าง Zeplin – สะพานเวิร์กโฟลว์ระหว่างการออกแบบและวิศวกรรม

Zeplin เป็นเครื่องมือการทำงานร่วมกันที่มีประสิทธิภาพซึ่งเชื่อมช่องว่างระหว่างนักออกแบบและนักพัฒนาด้วยการสร้างพื้นที่เชื่อมต่อสำหรับทีมผลิตภัณฑ์

ทำไมต้องเซปลิน?

ชิ้นส่วนสำคัญของปริศนาการพัฒนาผลิตภัณฑ์คือสถานที่ที่การออกแบบมาพบกับการพัฒนา เมื่อการออกแบบพร้อมที่จะเข้าสู่ขั้นตอนการพัฒนา ("แฮนด์ออฟ") วิศวกรต้องการวิธีการทำความเข้าใจและแปลเป็นโค้ด

Zeplin ช่วยอำนวยความสะดวกในการส่งต่อโดยนำการออกแบบจาก Sketch, Adobe XD, Figma และ Photoshop มาส่งออกในรูปแบบที่สามารถสร้างข้อมูลโค้ด แนวทางสไตล์ ข้อมูลจำเพาะ และทรัพย์สินได้อย่างง่ายดาย

บอกลาวัน “แดงเดือด” Zeplin มุ่งเน้นที่การปรับปรุงการทำงานร่วมกันระหว่างนักออกแบบผลิตภัณฑ์และทีมพัฒนาเท่านั้น และถูกใช้โดยทีมผลิตภัณฑ์ชั้นนำที่ Airbnb, Dropbox, Pinterest, Microsoft และอื่นๆ อีกมากมาย

ด้วย Zeplin คุณไม่จำเป็นต้องเขียนขนาดหรือระยะขอบ พิมพ์สำเนา ส่งออกไอคอน มันยอดเยี่ยมมากและช่วยประหยัดเวลาได้มากในการมุ่งเน้นไปที่การสำรวจการออกแบบ – Alex Potrivaev นักออกแบบผลิตภัณฑ์ @Intercom

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

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

โดยพื้นฐานแล้วเราถือว่า Zeplin เป็นแหล่งที่มาของความจริงสำหรับการร่วมมือกับวิศวกรรม ถ้าไม่ใช่ใน Zeplin ก็ไม่เป็นทางการ – Jason Stoff นักออกแบบอาวุโส ผลิตภัณฑ์ดิจิทัล @Starbucks

ข้อจำกัดของเซปลิน

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

เมื่อเข้าใจขั้นตอนการทำงานกับ Zeplin และ Sketch (หรือแอปอื่นๆ ที่กล่าวถึงข้างต้น) แล้ว เวิร์กโฟลว์ก็จะกลายเป็นเรื่องง่าย อย่างไรก็ตาม Zeplin มีช่วงการเรียนรู้ที่ต้องใช้เวลาและความสนใจพอสมควร หากต้องการดูภาพรวมทั่วไปและเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการใช้งาน โปรดดูวิดีโอสาธิตของ Zeplin ด้านล่าง:

การทำงานกับ Sketch และ Zeplin: ขั้นตอนและเคล็ดลับ

1. เริ่มต้นกับ Zeplin

• สร้างบัญชี Zeplin หากคุณยังไม่มี คุณสามารถลงทะเบียนได้ฟรี: https://app.zeplin.io/register
• ดาวน์โหลดแอป Zeplin บนเดสก์ท็อปสำหรับ Mac หรือ Windows
• ดาวน์โหลดปลั๊กอิน Zeplin สำหรับ Sketch

2. เตรียมไฟล์ Sketch ของคุณ

• ตอนนี้เรามี Sketch และ Zeplin พร้อมใช้งานแล้ว เราจะตั้งค่าไฟล์ Sketch เพื่อการส่งออกไปยัง Zeplin อย่างราบรื่น
• ใน Sketch จัดระเบียบทรัพย์สินและเลเยอร์ของคุณโดยใช้รูปแบบการตั้งชื่อที่สอดคล้องกัน หากทำงานร่วมกับนักออกแบบคนอื่นๆ ให้กำหนดแนวทางปฏิบัติที่เหมาะกับทุกคนในทีมของคุณ ขึ้นอยู่กับประเภทของโครงการ (เช่น iOS, Android หรือเว็บ) Zeplin จะปรับรูปแบบการตั้งชื่อของทรัพย์สินโดยอัตโนมัติ ทำให้การส่งออกเป็นกระบวนการขั้นตอนเดียว
• สร้างสัญลักษณ์สำหรับองค์ประกอบและทรัพย์สินทั่วไปภายใน Sketch ซึ่งจะทำให้คุณสามารถตั้งค่าส่วนประกอบใน Zeplin ได้
• บันทึกสีลงในจานสี "Document Colours" และแบบอักษรเป็น "Text Styles" ในไฟล์ Sketch ของคุณ สิ่งเหล่านี้จะปรากฏในคู่มือสไตล์ที่สร้างโดย Zeplin

3. ทำให้เนื้อหาสามารถส่งออกได้ใน Sketch

• นี่เป็นขั้นตอนที่สำคัญมาก เมื่อทรัพย์สินของคุณถูกจัดกลุ่มเป็นสัญลักษณ์แล้ว ให้เปิดหน้าสัญลักษณ์ในไฟล์ Sketch ของคุณ
• คลิกที่กลุ่มภายในสัญลักษณ์ เช่น “ic-menu” (ไอคอนโฟลเดอร์)
• เมื่อไฮไลต์กลุ่มแล้ว ให้ค้นหาการกระทำ "ทำให้ส่งออกได้" ที่ด้านล่างขวามือของ "ผู้ตรวจสอบ" ใน Sketch แล้วคลิกตัวเลือกนี้ ไอคอนชิ้นควรปรากฏถัดจากชื่อกลุ่มของคุณ
• ขั้นตอนนี้จะช่วยให้วิศวกรส่งออกสินทรัพย์ได้โดยตรงจาก Zeplin

4. สร้างโครงการใหม่ใน Zeplin

• เลือกประเภทโครงการที่คุณกำลังสร้าง โปรดทราบว่าคุณควรมีโปรเจ็กต์แยกต่างหากสำหรับ iOS และ Android แม้ว่าการออกแบบจะเหมือนกันก็ตาม เนื่องจาก Zeplin จะสร้างรหัสที่แตกต่างกันตามประเภทของโครงการ
• เลือกความละเอียดของโปรเจ็กต์ที่ตรงกับอาร์ตบอร์ด Sketch ของคุณ (เช่น 1x, 320px)

5. ส่งออก Sketch artboards ไปยัง Zeplin

• จาก Sketch ให้เลือกอาร์ตบอร์ดทั้งหมดที่คุณต้องการส่งออกไปยัง Zeplin
• ไปที่ Plugins > Zeplin > Export Selected… หรือกด ⌃⌘E บนแป้นพิมพ์ของคุณ
• ต่อไป เราจะส่งออกสัญลักษณ์จาก Sketch เปิดหน้าสัญลักษณ์ใน Sketch และไฮไลต์อาร์ตบอร์ดทั้งหมด ส่งออกไปยัง Zeplin

6. จัดระเบียบโครงการใน Zeplin

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

7. ใช้ส่วนประกอบใน Zeplin

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

ระบบการออกแบบที่เป็นหนึ่งเดียวมีความสำคัญต่อการสร้างให้ดีขึ้นและเร็วขึ้น ดีขึ้นเพราะผู้ใช้ของเราเข้าใจประสบการณ์ที่เหนียวแน่นและรวดเร็วขึ้นเพราะช่วยให้เรามีภาษากลางในการทำงานด้วย

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

8. ส่งออกคู่มือสไตล์จาก Zeplin

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

9. ใส่คำอธิบายประกอบการออกแบบของคุณใน Zeplin

• การเพิ่มโน้ตให้กับงานออกแบบทำได้ง่ายด้วย Zeplin จากมุมมองโดยละเอียดของหน้าจอ ให้เลือกไอคอนเพิ่มโน้ตและปักหมุดโน้ตของคุณไว้ที่ส่วนประกอบ
• คุณสามารถเพิ่มบันทึกโดยกด Cmd ค้างไว้ ( Ctrl สำหรับผู้ใช้ Windows และ Linux) และคลิกที่ใดก็ได้บนหน้าจอ
• คุณยังสามารถพูดถึงเพื่อนร่วมทีมคนอื่นๆ ด้วย “@” และพวกเขาจะได้รับการแจ้งเตือน

10. ทำงานร่วมกัน แบ่งปัน และใช้การควบคุมเวอร์ชัน

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

บทสรุป

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

ความยืดหยุ่นในการอัปเดตเนื้อหาแบบไดนามิกจากแหล่งกลางแหล่งเดียว เช่น สัญลักษณ์ใน Sketch ที่ส่งออกไปยังส่วนประกอบใน Zeplin ทำให้เกิดความยืดหยุ่นอย่างมาก วิศวกรสามารถส่งออกสินทรัพย์ไปยังโค้ดเนทีฟได้อย่างง่ายดาย ประหยัดเวลาและลดความน่าเบื่อ

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• Adobe XD กับ Sketch – เครื่องมือ UX ใดที่เหมาะกับคุณ
• วิธีสร้างกรอบการออกแบบที่มีประสิทธิภาพ (รวมกรอบงาน Sketch UI ฟรี)
• สิ่งที่คุณอาจไม่รู้เกี่ยวกับวิชาการพิมพ์ใน Sketch
• ทำความคุ้นเคยกับการพัฒนาปลั๊กอิน Sketch
• การสร้างภาพประกอบที่เหลือเชื่อด้วย Sketch และ Looper ในเวลาไม่นาน