เครื่องมือ Design-to-Code ที่ช่วยให้นักออกแบบและนักพัฒนาทำงานร่วมกันได้ราบรื่นขึ้น
เผยแพร่เมื่อ 24 May 2023 โพสไปที่คุณคิดว่าการทำงานร่วมกันระหว่างทีมออกแบบและวิศวกรซอฟต์แวร์เป็นอะไรที่น่าหงุดหงิดใช่ไหม? ในบทความนี้ เราจะนำเสนอแนวทางใหม่ในการปรับปรุงการส่งมอบงานระหว่างการออกแบบและวิศวกรรม โดยแนะนำคุณเกี่ยวกับ "design token" ระบบอันมีประสิทธิภาพซึ่งถูกออกแบบมาเพื่อแปลงหลักการออกแบบให้กลายเป็นโค้ด ซึ่งช่วยให้ขั้นตอนการออกแบบทำได้ง่ายกว่าเดิม ด้วยการใช้ประโยชน์จาก design token คุณจะสามารถปรับปรุงการทำงานร่วมกันได้ราบรื่นขึ้น และยังช่วยเพิ่มความคล่องตัวให้กับการออกแบบตามโค้ดได้อย่างง่ายดายอีกด้วย
ความท้าทายในปัจจุบัน
การทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนามักเผชิญกับความท้าทายในเกือบทุกเรื่อง ยิ่งเมื่อต้องแปลงไฟล์การออกแบบเป็นโค้ด front-end กระบวนการนี้อาจใช้เวลานานและมีโอกาสเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะอย่างยิ่งเมื่อมีการเปลี่ยนแปลงการออกแบบและจำเป็นต้องสื่อสารกับนักพัฒนาซอฟต์แวร์ วงจรของการเปลี่ยนแปลงกลับไปกลับมาอาจทำให้กระบวนการล่าช้ามากขึ้น ซึ่งรวมถึงวิศวกรประกันคุณภาพซอฟต์แวร์ที่ต้องทุ่มเทเวลาเพื่อตรวจสอบโค้ดที่มีการอัปเดตล่าสุด
โชคดีที่ยังมีวิธีแก้ไขเรื่องนี้ นั่นก็คือการใช้ design token เครื่องมือ design-to-code ที่ทรงพลังเหล่านี้ทำให้การแปลองค์ประกอบการออกแบบเป็นภาษาโค้ดได้ง่ายขึ้น design token ช่วยจัดเก็บส่วนประกอบการจัดรูปแบบ รวมถึงถ่ายโอนไปยังฐานรากต่างๆ ภายในโปรเจกต์ได้อย่างราบรื่น โดยไม่คำนึงถึงการใช้งาน, บริบท, หรือแพลตฟอร์ม
ด้วยการใช้ประโยชน์จาก design token นี้ ส่งผลทำให้การทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนามีประสิทธิภาพมากขึ้น พร้อมกับลดข้อผิดพลาดและอำนวยความสะดวกในการสื่อสารตลอดจนขั้นตอนการทำงานที่ราบรื่นขึ้นอย่างเห็นได้ชัด
"design token ทำหน้าที่เป็นหน่วยการสร้างพื้นฐานในระบบการออกแบบ ที่ช่วยเชื่อมช่องว่างระหว่างการออกแบบและโค้ดได้อย่างราบรื่น และทำให้สามารถสร้างประสบการณ์ผลิตภัณฑ์ที่สอดคล้องและเป็นหนึ่งเดียวกันได้ดียิ่งขึ้น" Richard Persson กล่าว
เครื่องมือ design-to-code: สิ่งนี้ทำงานอย่างไร?
แนวคิดของ design token เปรียบได้กับตัวแปรในการเข้ารหัส โดยการกำหนดค่าให้กับแต่ละ token ค่านั้นจะถูกใช้งานทั่วทั้ง design system หมายความว่าเมื่อมีการปรับเปลี่ยนอะไรก็ตามกับ token ค่าของ token ก็จะถูกอัปเดตโดยอัตโนมัติในทุกๆ ที่
ใน design system โดยทั่วไปแล้วนักออกแบบจะสรุปองค์ประกอบต่างๆ เช่น รูปแบบฟอนต์, ขนาด, สี, เส้นขอบ, และเงาลงใน token ซึ่งเราเรียก token เหล่านี้เรียกว่า "design token" ที่ทำหน้าที่เป็นที่เก็บบรรดาตัวเลือกการออกแบบและแสดงเป็นคู่ key-value ในรูปแบบไฟล์เช่น JSON และ SCSS จากนั้นไฟล์เหล่านี้จะถูกใช้เป็น input เพื่อสร้างไฟล์ output ต่างๆ ในระหว่างขั้นตอนการประมวลผล
เพื่อให้สามารถใช้ design token ได้อย่างมีประสิทธิภาพ แผนผังต่อไปนี้จะแสดงรูปแบบการทำงานที่เหมาะสมที่สุด โดยผู้ออกแบบจะเริ่มกระบวนการออกแบบภายในเครื่องมือออกแบบที่พวกเขาต้องการ (โปรดดูเครื่องมือออกแบบที่แนะนำด้านล่าง) เครื่องมือนี้ประกอบด้วยปลั๊กอินและ API ที่ให้คู่ key/value ในรูปแบบ SCSS หรือ JSON จากนั้นไฟล์ที่สร้างขึ้นโดยเครื่องมือออกแบบจะถูกแชร์ให้กับนักพัฒนาซึ่งใช้ค่าเหล่านี้เพื่อสร้างผลิตภัณฑ์ที่สามารถเข้ากันได้กับอุปกรณ์ต่างๆ
เครื่องมือออกแบบที่ใช้สร้าง design token
การใช้ design token ถือเป็นกุญแจสำคัญสู่อนาคตของการออกแบบและการพัฒนา อย่างไรก็ตาม แม้สิ่งนี้จะมีความสำคัญ แต่ว่าทีมออกแบบจำนวนมากก็ต้องเผชิญหน้ากับความท้าทายในการนำมันมาใช้งาน โดยอุปสรรคเหล่านี้อาจเกิดจากช่องว่างทางความรู้ระหว่างนักออกแบบและนักพัฒนา รวมถึงข้อจำกัดทางธุรกิจ, ค่าใช้จ่ายในการดำเนินการสูง, และปัจจัยอื่นๆ ที่ล้วนมีผลเกี่ยวข้อง
นอกจากนี้ เครื่องมือออกแบบที่มีอยู่ในปัจจุบันยังไม่รองรับการ integration ระหว่างการออกแบบและการเขียนโปรแกรมได้อย่างสมบูรณ์ ในขณะที่พวกเขาช่วยนักออกแบบในการกำหนดแนวคิดและการแสดงภาพความคิดของพวกเขา แต่พวกเขากลับขาดความสามารถในการสร้างการเชื่อมต่อโดยตรงระหว่างการออกแบบและโค้ด ซึ่งยังนับว่าโชคดีที่มีเทคโนโลยีหลายอย่างซึ่งเกิดขึ้นเพื่อมาแก้ไขข้อจำกัดเหล่านี้
ด้านล่างนี้คือรายการของเครื่องมือที่ช่วยอำนวยความสะดวกในการเชื่อมโยงการออกแบบและโค้ดของคุณให้สามารถทำงานร่วมกันมีประสิทธิภาพมากขึ้น
1. FigmaTokens
FigmaTokens เป็นโซลูชันล้ำสมัยที่ออกแบบมาเพื่อส่งเสริมการใช้ design token ใน Figma ซึ่งปลั๊กอินอันเป็นนวัตกรรมใหม่นี้ช่วยให้สามารถจัดการ design token ภายในไฟล์ Figma ได้อย่างมีประสิทธิภาพ ด้วยความสามารถที่หลากหลาย ทำให้ประยุกต์ใช้ FigmaTokens เพื่อวัตถุประสงค์ต่างๆ ได้ตามต้องการ จนสิ่งนี้ได้กลายเป็นเครื่องมือที่มีค่าสำหรับนักออกแบบที่ต้องการปรับปรุงขั้นตอนการออกแบบของตนให้คล่องตัวและรับประกันได้ว่าการออกแบบของพวกเขาจะสามารถใช้งานกับสิ่งอื่นๆ ในอนาคตได้อย่างไร้ปัญหา
2. Design Tokens plugin
ขอแนะนำหนึ่งในปลั๊กอิน Figma ที่ใช้งานง่ายซึ่งช่วยลดความยุ่งยากในการสร้างไฟล์ JSON และการซิงโครไนซ์กับ GitHub ให้เป็นไปอย่างราบรื่นมากขึ้น ด้วยปลั๊กอินนี้ คุณจะสามารถเลือกใช้ token เฉพาะต่างๆ ได้อย่างยืดหยุ่น ทั้งยังเลือกเปิดหรือปิดการใช้งาน token เหล่านั้นได้อย่างง่ายดายตามต้องการ แถมเป็นมิตรกับผู้ใช้อย่างเหลือเชื่อ ซึ่งช่วยให้คุณซิงค์กับ GitHub repository หรือส่งไฟล์ JSON ด้วยตนเองไปให้กับนักพัฒนาเพื่อการ intragation เข้ากับ codebase ได้อย่างราบรื่น เราแนะนำว่าให้ลองใช้ปลั๊กอินนี้ในขณะที่คุณกำลังลงมือปรับปรุงการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาในเวิร์กโฟลว์ของคุณ
3. Style Dictionary
เมื่อพูดถึงการรักษาสไตล์ที่สอดคล้องและต้องใช้งานได้เหมือนกันหมดในทุกแพลตฟอร์มและอุปกรณ์การพัฒนาต่างๆ สิ่งนี้อาจดูน่ากลัวและเต็มไปด้วยความท้าทาย แต่ว่าด้วย Style Dictionary จะช่วยให้คุณเอาชนะอุปสรรคเหล่านี้ได้อย่างง่ายดายและทำให้เวิร์กโฟลว์คล่องตัวยิ่งขึ้น ด้วยการสร้างคำจำกัดความของสไตล์โดยอัตโนมัติจากที่แห่งเดียว ซึ่งระบบอันทรงพลังนี้ช่วยขจัดความไม่ถูกต้องและความไร้ประสิทธิภาพ ได้ด้วยคำสั่งเดียวเท่านั้น ทั้งยังช่วยให้ประยุกต์ใช้กฎเหล่านี้กับแพลตฟอร์มต่างๆ ได้หลากหลาย เช่น iOS, Android, CSS, JS, HTML, ไฟล์ Sketch และแม้กระทั่งเอกสารที่ระบุรายละเอียดของสไตล์เอาไว้
4. Specify
Specify เป็นห้องสมุดที่เก็บรวบรวม token ทั้งหมดภายในระบบของคุณ สิ่งนี้ช่วยให้นักพัฒนาและนักออกแบบเข้าถึงทุก token ได้อย่างง่ายดาย ขณะเดียวกันพวกเขาก็ยังทำการเปลี่ยนแปลงโค้ดได้โดยตรงจากภายในอินเทอร์เฟซของ Specify อีกด้วย โดยแอปพลิเคชันนี้ประกอบด้วยด้านต้นทางและด้านปลายทาง ซึ่งไฟล์ Figma ทำหน้าที่เป็นแหล่งที่มาซึ่งมีข้อมูลที่มีค่า เช่น Figma style และทรัพย์สินอื่นๆ เช่น ไอคอน ซึ่งจัดเก็บไว้ใน Specify
เพื่อสร้างการเชื่อมต่อระหว่าง Figma และ Specify เครื่องมือนี้จะดึงข้อมูลที่เกี่ยวข้องจากไฟล์ Figma ซึ่งขั้นตอนต่อไปจะเกี่ยวข้องกับการตั้งค่าลิงก์ระหว่าง Specify และ Git เพื่อให้แน่ใจว่าการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาจะเป็นไปอย่างราบรื่น เมื่อการตั้งค่านี้เสร็จสิ้น นักออกแบบสามารถอัปเดต token ใน Figma ได้อย่างง่ายดาย และส่งไปยัง Specify ได้โดยตรง การเปลี่ยนแปลงดังกล่าวจะได้รับการตรวจสอบและอนุมัติโดยนักพัฒนาก่อนที่จะมีการอัปเดตโค้ด ทำให้เวิร์กโฟลว์นี้เต็มไปด้วยความคล่องตัวแถมยังช่วยให้การทำงานร่วมกันมีประสิทธิภาพมากขึ้น
5. Supernova
Supernova เป็นแพลตฟอร์มอันทรงพลังที่เชื่อมช่องว่างระหว่างการออกแบบและการเขียนโค้ด ด้วยการนำเสนอโซลูชันแบบครบวงจรสำหรับการสร้างและบำรุงรักษา design system ของคุณ พร้อมกับทำหน้าที่เป็นแหล่งข้อมูลเดียวสำหรับ design system ของคุณ และยังอำนวยความสะดวกในการสร้างเอกสารที่ครอบคลุมอีกด้วย
ในการเริ่มใช้งาน Supernova คุณเพียงแค่ต้องเชื่อมโยงไฟล์ Figma ของคุณกับแพลตฟอร์ม เมื่อเชื่อมต่อแล้ว Supernova จะช่วยให้คุณสามารถส่งการปรับเปลี่ยนการออกแบบไปยังโค้ดพื้นฐานได้อย่างราบรื่น ทำให้มั่นใจได้ว่าการออกแบบจะมีความสอดคล้องและคงประสิทธิภาพที่ดีตลอดกระบวนการออกแบบและพัฒนา ด้วย Supernova คุณจึงสามารถจัดการ design system ของคุณได้อย่างมั่นใจ และซิงค์การเปลี่ยนแปลงระหว่างการออกแบบและโค้ดได้อย่างง่ายดาย
ก้าวไปอีกขั้น: copy token และ copy library
ศักยภาพของเครื่องมือ design-to-code สามารถไปได้ไกลกว่าขอบเขตที่มีอยู่ในปัจจุบัน โดยความร่วมมือของ SCB TechX กับ Richard เขาได้เสนอแนวคิดใหม่ในการใช้ design token กับข้อความภายในองค์ประกอบการออกแบบ
การออกแบบและ microcopy
ข้อความและน้ำเสียงของแบรนด์มีบทบาทสำคัญในการสร้างประสบการณ์ที่ดีให้กับผู้ใช้ แต่สิ่งเหล่านี้มักถูกมองข้ามไปเมื่ออยู่ใน design sytem อย่างไรก็ตาม ด้วยการเลือกใช้คำที่เหมาะสม เราสามารถสร้างการปฏิสัมพันธ์ที่มีความหมาย, แนะนำผู้ใช้ให้เดินไปในทิศทางที่ถูกต้อง, ช่วยให้พวกเขามองหาสิ่งที่ต้องการได้ง่ายขึ้น, และลดข้อผิดพลาดที่เกิดขึ้นจากมนุษย์ นั่นคือเหตุผลว่าทำไม copy token จึงเป็นเครื่องมือสำคัญในการช่วยให้ผู้ใช้บรรลุเป้าหมาย
สิ่งนี้นำไปสู่การสร้างสรรค์ copy token ไว้สำหรับเก็บข้อความที่เป็นส่วนประกอบต่างๆ แทนที่จะเป็นพื้นฐานการออกแบบ เช่นเดียวกับ design token องค์ประกอบการออกแบบ copy token ขึ้นมาใหม่นั้นจะถูกสร้างขึ้นตามหลักการตั้งชื่อสำหรับคอนเทนต์ที่มีอยู่ในผลิตภัณฑ์
การพัฒนา copy token พิสูจน์ได้ว่ามีประโยชน์อย่างยิ่งเมื่อถึงคราวที่ต้องแนะนำหรือแปลคอนเทนต์เป็นภาษาอื่นๆ เพื่อช่วยลดการคาดเดาและทำหน้าที่เป็นแหล่งข้อมูลส่วนกลางสำหรับคอนเทนต์ทั้งหมด ทำให้มั่นใจได้ว่าผลิตภัณฑ์ที่พัฒนาขึ้นจะมีความสม่ำเสมอและความถูกต้องสมบูรณ์แบบ
copy token สามารถเป็นได้มากกว่าแค่ค่าเฉพาะเพียงค่าเดียว แต่ยังครอบคลุมคลัง copy library ทั้งหมด โดยทำหน้าที่เป็นพื้นที่เก็บข้อมูลส่วนกลางสำหรับองค์ประกอบข้อความทั้งหมดที่ใช้ตลอดกระบวนการออกแบบและการผลิต วิธีการที่ครอบคลุมนี้ช่วยให้คุณสามารถจัดการการแปลภาษาได้อย่างมีประสิทธิภาพ เพราะสามารถควบคุมและเพิ่มคำแปลได้โดยตรงจากไฟล์ข้อความภายใน copy library
ด้วย copy library การเปลี่ยนแปลงใน microcopy ต่างๆ จึงทำได้อย่างรวดเร็วและง่ายดาย ช่วยให้นักออกแบบมั่นใจได้ว่าน้ำเสียงของแบรนด์จะมีความสม่ำเสมอในทุกๆ ส่วน นอกจากนี้ยังช่วยปรับปรุงกระบวนการส่งต่องานไปยังนักพัฒนา และอัปเดตอินสแตนซ์ทั้งหมดของข้อความได้พร้อมกัน วิธีการนี้สนับสนุนให้กระบวนการทำงานง่ายดายยิ่งขึ้น และเพิ่มความร่วมมือระหว่างนักออกแบบและนักพัฒนาให้ราบรื่นยิ่งกว่าเดิม
บทสรุป
design token พร้อมที่จะกลายเป็นมาตรฐานในอนาคตสำหรับ design system ด้วยการผสานรวม design token เข้ากับเครื่องมือการออกแบบของคุณ นั่นทำให้คุณสามารถพัฒนากระบวนการบำรุงรักษา, ความน่าเชื่อถือ, การจัดการองค์กร, และความสามารถในการปรับขนาดของ design system ของคุณได้ดียิ่งขึ้น นอกจากนี้ การเปลี่ยนจากการออกแบบไปสู่การพัฒนา front-end ก็จะราบรื่นและมีประสิทธิภาพมากขึ้นอย่างเห็นได้ชัด
ไม่เพียงเท่านี้ การหันมาใช้งาน copy token ยังช่วยเพิ่มมูลค่าให้กับ design system โดยเฉพาะอย่างยิ่งกับกระบวนการแปลภาษาให้ผู้ใช้งานในแต่ละประเทศสามารถเข้าใจในบริบทที่สื่อสารได้เหมือนกับผลิตภัณฑ์เวอร์ชันต้นฉบับในภาษาอื่น
เนื่องจาก design system ได้รับการยอมรับอย่างแพร่หลายในปัจจุบัน เป็นผลให้การพัฒนาการออกแบบผลิตภัณฑ์ดิจิทัลได้กลายมาเป็นแบบรวมศูนย์ โดยเป็นแพลตฟอร์มแบบครบวงจรสำหรับผู้มีส่วนได้ส่วนเสียทั้งหมดที่เกี่ยวข้อง ซึ่งวิธีการแบบครบวงจรนี้ได้ช่วยส่งเสริมการทำงานร่วมกัน, สร้างความสม่ำเสมอ, และมีประสิทธิภาพตลอดวงจรชีวิตการออกแบบและการพัฒนาผลิตภัณฑ์
