ภาพรวมโดยละเอียดของเครื่องมือเพิ่มเติมที่เราพัฒนาเพื่อใช้ภายในในแผนกออกแบบ

ในเรื่องนี้ ฉันจะเล่าเกี่ยวกับปลั๊กอิน Sketch, ยูทิลิตี้คอนโซล และส่วนขยายเบราว์เซอร์ที่เราพัฒนาขึ้นสำหรับนักออกแบบที่ทำงานอย่างใกล้ชิดกับ Design System

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

ปลั๊กอินพื้นฐานสำหรับ Sketch

เริ่มต้นด้วยปลั๊กอินง่ายๆ ที่อาจสร้างข้อมูลจำลองหรือรักษาการเยื้องที่ถูกต้องภายในส่วนประกอบ แปลเลเยอร์ข้อความเป็นภาษาอื่น และอื่นๆ

ข้อมูล

เพื่อลบงานประจำบางส่วนออกจากนักออกแบบเมื่อพวกเขาทำงานกับอาร์เรย์ข้อมูลขนาดใหญ่ในตาราง เราได้พัฒนาปลั๊กอินที่มีชุดข้อมูลเหล่านี้จำนวนมาก หลักการทำงานไม่แตกต่างจาก Dummy Data Generator for Sketch อื่นๆ หลายสิบตัว ค่านี้นำมาจาก JSON และจะถูกแทรกลงในคอลัมน์ที่เลือกตามลำดับหรือแบบสุ่ม ทั้งนี้ขึ้นอยู่กับหมวดหมู่ที่เลือก

จานสี

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

หลักการทำงานคล้ายกับปลั๊กอิน Sketch Palettes จาก Andrew Fiorillo

https://github.com/andrewfiorillo/sketch-palettes

ปุ่ม

งานหลักของปลั๊กอินคือการเขียนทับค่าข้อความภายในสัญลักษณ์และบันทึกการเยื้องที่ระบุก่อนหน้า ปลั๊กอินใช้งานได้อย่างสมบูรณ์แบบด้วยการผูกที่ซับซ้อนภายในสัญลักษณ์ และไม่พังหลังจากการเปิดตัว Sketch เวอร์ชันใหม่ถัดไป เราใช้ปลั๊กอิน Relabel Button จาก Ken Moore และแก้ไขตามความต้องการของเรา

https://github.com/kenmoore/sketch-relabel-button

แปล

ผลิตภัณฑ์และบริการของเรามีให้บริการใน 26 ภาษา ภาษาอังกฤษเป็นภาษาหลักที่เราใช้ในการจำลองของเรา ก่อนที่เราจะนำการจำลองไปพัฒนา เราต้องแน่ใจว่าอินเทอร์เฟซที่วาดไว้นั้นสามารถทนต่อการทดสอบการแปลเป็นภาษาท้องถิ่นได้ หนึ่งในภาษาที่ “มีปัญหา” มากที่สุดสำหรับการแปลเป็นภาษาท้องถิ่นคือภาษาเยอรมันและรัสเซีย (รวมถึงโปแลนด์ อิตาลี ฯลฯ) ความยาวของคำในภาษาเหล่านี้ยาวกว่าภาษาอังกฤษโดยเฉลี่ย 20%

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

เพื่อให้งานในส่วนนี้เป็นกิจวัตรน้อยลงและเป็นระบบมากขึ้น (เพื่อให้นักออกแบบตรวจสอบอินเทอร์เฟซ) เราได้พัฒนาปลั๊กอินที่ทำงานผ่าน Yandex.API และสามารถแปลเลเยอร์ข้อความที่เลือกเป็นภาษาที่จำเป็นทั้งหมดได้

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

สำรวจปลั๊กอินสำหรับ Sketch

ปลั๊กอินสำรวจช่วยให้คุณสามารถเชื่อมโยงสัญลักษณ์ Sketch กับส่วนประกอบ 'สด' ในแซนด์บ็อกซ์ เชื่อมโยงสัญลักษณ์ไปยังเอกสารประกอบใน Zeplin และให้สิทธิ์การเข้าถึงงานปัจจุบันใน Jira ปลั๊กอินชุดนี้เป็นการพัฒนาที่ซับซ้อนกว่าและใช้เครื่องมือคอนโซลเช่น skpm และ sketch-module-web-view

https://github.com/skpm/skpm
https://github.com/skpm/sketch-module-web-view

สนามเด็กเล่นและเอกสาร

สัญลักษณ์ลิงก์ปลั๊กอินสนามเด็กเล่น (ส่วนประกอบ) ใน Sketch พร้อมส่วนประกอบสดในแซนด์บ็อกซ์ ก็เพียงพอที่จะวางสัญลักษณ์ใด ๆ บนอาร์ตบอร์ดและไปที่ส่วนประกอบนี้ในเบราว์เซอร์โดยใช้การกระทำในเมนูหรือทางลัดบนแป้นพิมพ์

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

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

หลังจากพบ postfix แล้ว สคริปต์หลักจะดึง config.js และเปรียบเทียบชื่อของสัญลักษณ์จาก Sketch กับชื่อในพจนานุกรม ทันทีที่พบรายการที่ตรงกัน สคริปต์จะส่งต่อคุณไปยังเบราว์เซอร์หรือแอป Zeplin ในกรณีของ Zeplin สามารถเปิดเอกสารได้โดยใช้ https:// หรือ zpl:// ในตัวแปรแรกเบราว์เซอร์จะเปิดขึ้น ในเวอร์ชันที่สอง — แอปเดสก์ท็อป

งานของฉัน

ปลั๊กอินช่วยให้คุณไปที่รายการงานปัจจุบันใน Jira ซึ่งกรองตามสถานะ new, open, drafting, in progress โดยปกติแล้ว ทุกคนที่ใช้ปลั๊กอินจะเห็นเฉพาะรายการงานปัจจุบันเท่านั้น

อัปเดตอยู่เสมอหรือ appcast.xml

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

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

แต่ละครั้งที่ Sketch เปิดตัว ระบบจะตรวจสอบ appcast.xml ดูเวอร์ชันที่มีอยู่ และเปรียบเทียบกับเวอร์ชันของปลั๊กอินที่ติดตั้ง หากมีรายการเกี่ยวกับเวอร์ชันใหม่ใน appcast.xml ป้ายจะปรากฏใน Sketch เพื่อระบุว่ามีการอัปเดต

ยูทิลิตี้คอนโซล

Gulp clean & Gulp iconfont

ผู้ที่เคยเปิด SVG ที่ส่งออกจาก Sketch ในตัวแก้ไขโค้ดจะรู้ดีว่าโค้ดนี้มีขยะจำนวนมากที่ควรลบออก เพื่อให้กระบวนการนี้ง่ายขึ้นและมีประสิทธิภาพมากขึ้น เราได้พัฒนางาน Gulp ที่จะล้างและลดขนาดโค้ดของ SVG

Gulp iconfont สร้างไอคอน “สะอาด” ทั้งหมดลงในแบบอักษรและเผยแพร่เวอร์ชันใหม่ให้กับผลิตภัณฑ์ทั้งหมดโดยอัตโนมัติ ก่อนที่บิลด์ใหม่จะเข้าสู่การใช้งานจริง เบราว์เซอร์จะเปิดขึ้นพร้อมกับดูตัวอย่างแบบอักษรพร้อมสัญลักษณ์ทั้งหมด ซึ่งคุณสามารถตรวจสอบความถูกต้องของไอคอนที่เพิ่มเข้ามาได้ รายละเอียดเพิ่มเติมเกี่ยวกับโซลูชันนี้ในเรื่องที่แล้วของฉัน:

ระบบการออกแบบ ตอนที่ 2 ไอคอน ฟอนต์ SVG อึก

ส่วนขยายเบราว์เซอร์

ตรวจสอบ

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

สรุปแล้ว

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

ขอขอบคุณเป็นพิเศษสำหรับ Kirill Savelov, Dmitry Kozlov และ Shawn Xu สำหรับความช่วยเหลือ ความอดทน และการสนับสนุน

เรื่องราวเพิ่มเติมเกี่ยวกับระบบการออกแบบและเครื่องมือ

ลิงค์ที่มีประโยชน์

ติดตาม Acronis Design ได้ที่