เครื่องมือ 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 ก็จะถูกอัปเดตโดยอัตโนมัติในทุกๆ ที่
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_to_code_tools_how_do_they_work_1d7af11e3d.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_to_code_tools_how_do_they_work_1d7af11e3d.png)
ใน design system โดยทั่วไปแล้วนักออกแบบจะสรุปองค์ประกอบต่างๆ เช่น รูปแบบฟอนต์, ขนาด, สี, เส้นขอบ, และเงาลงใน token ซึ่งเราเรียก token เหล่านี้เรียกว่า "design token" ที่ทำหน้าที่เป็นที่เก็บบรรดาตัวเลือกการออกแบบและแสดงเป็นคู่ key-value ในรูปแบบไฟล์เช่น JSON และ SCSS จากนั้นไฟล์เหล่านี้จะถูกใช้เป็น input เพื่อสร้างไฟล์ output ต่างๆ ในระหว่างขั้นตอนการประมวลผล
เพื่อให้สามารถใช้ design token ได้อย่างมีประสิทธิภาพ แผนผังต่อไปนี้จะแสดงรูปแบบการทำงานที่เหมาะสมที่สุด โดยผู้ออกแบบจะเริ่มกระบวนการออกแบบภายในเครื่องมือออกแบบที่พวกเขาต้องการ (โปรดดูเครื่องมือออกแบบที่แนะนำด้านล่าง) เครื่องมือนี้ประกอบด้วยปลั๊กอินและ API ที่ให้คู่ key/value ในรูปแบบ SCSS หรือ JSON จากนั้นไฟล์ที่สร้างขึ้นโดยเครื่องมือออกแบบจะถูกแชร์ให้กับนักพัฒนาซึ่งใช้ค่าเหล่านี้เพื่อสร้างผลิตภัณฑ์ที่สามารถเข้ากันได้กับอุปกรณ์ต่างๆ
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/diagram_shows_how_design_tokens_work_b2a5f7f2e8.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/diagram_shows_how_design_tokens_work_b2a5f7f2e8.png)
เครื่องมือออกแบบที่ใช้สร้าง design token
การใช้ design token ถือเป็นกุญแจสำคัญสู่อนาคตของการออกแบบและการพัฒนา อย่างไรก็ตาม แม้สิ่งนี้จะมีความสำคัญ แต่ว่าทีมออกแบบจำนวนมากก็ต้องเผชิญหน้ากับความท้าทายในการนำมันมาใช้งาน โดยอุปสรรคเหล่านี้อาจเกิดจากช่องว่างทางความรู้ระหว่างนักออกแบบและนักพัฒนา รวมถึงข้อจำกัดทางธุรกิจ, ค่าใช้จ่ายในการดำเนินการสูง, และปัจจัยอื่นๆ ที่ล้วนมีผลเกี่ยวข้อง
นอกจากนี้ เครื่องมือออกแบบที่มีอยู่ในปัจจุบันยังไม่รองรับการ integration ระหว่างการออกแบบและการเขียนโปรแกรมได้อย่างสมบูรณ์ ในขณะที่พวกเขาช่วยนักออกแบบในการกำหนดแนวคิดและการแสดงภาพความคิดของพวกเขา แต่พวกเขากลับขาดความสามารถในการสร้างการเชื่อมต่อโดยตรงระหว่างการออกแบบและโค้ด ซึ่งยังนับว่าโชคดีที่มีเทคโนโลยีหลายอย่างซึ่งเกิดขึ้นเพื่อมาแก้ไขข้อจำกัดเหล่านี้
ด้านล่างนี้คือรายการของเครื่องมือที่ช่วยอำนวยความสะดวกในการเชื่อมโยงการออกแบบและโค้ดของคุณให้สามารถทำงานร่วมกันมีประสิทธิภาพมากขึ้น
1. FigmaTokens
FigmaTokens เป็นโซลูชันล้ำสมัยที่ออกแบบมาเพื่อส่งเสริมการใช้ design token ใน Figma ซึ่งปลั๊กอินอันเป็นนวัตกรรมใหม่นี้ช่วยให้สามารถจัดการ design token ภายในไฟล์ Figma ได้อย่างมีประสิทธิภาพ ด้วยความสามารถที่หลากหลาย ทำให้ประยุกต์ใช้ FigmaTokens เพื่อวัตถุประสงค์ต่างๆ ได้ตามต้องการ จนสิ่งนี้ได้กลายเป็นเครื่องมือที่มีค่าสำหรับนักออกแบบที่ต้องการปรับปรุงขั้นตอนการออกแบบของตนให้คล่องตัวและรับประกันได้ว่าการออกแบบของพวกเขาจะสามารถใช้งานกับสิ่งอื่นๆ ในอนาคตได้อย่างไร้ปัญหา
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Figma_Tokens_6537b191e2.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Figma_Tokens_6537b191e2.png)
2. Design Tokens plugin
ขอแนะนำหนึ่งในปลั๊กอิน Figma ที่ใช้งานง่ายซึ่งช่วยลดความยุ่งยากในการสร้างไฟล์ JSON และการซิงโครไนซ์กับ GitHub ให้เป็นไปอย่างราบรื่นมากขึ้น ด้วยปลั๊กอินนี้ คุณจะสามารถเลือกใช้ token เฉพาะต่างๆ ได้อย่างยืดหยุ่น ทั้งยังเลือกเปิดหรือปิดการใช้งาน token เหล่านั้นได้อย่างง่ายดายตามต้องการ แถมเป็นมิตรกับผู้ใช้อย่างเหลือเชื่อ ซึ่งช่วยให้คุณซิงค์กับ GitHub repository หรือส่งไฟล์ JSON ด้วยตนเองไปให้กับนักพัฒนาเพื่อการ intragation เข้ากับ codebase ได้อย่างราบรื่น เราแนะนำว่าให้ลองใช้ปลั๊กอินนี้ในขณะที่คุณกำลังลงมือปรับปรุงการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาในเวิร์กโฟลว์ของคุณ
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_Tokens_plugin_825645b155.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_Tokens_plugin_825645b155.png)
3. Style Dictionary
เมื่อพูดถึงการรักษาสไตล์ที่สอดคล้องและต้องใช้งานได้เหมือนกันหมดในทุกแพลตฟอร์มและอุปกรณ์การพัฒนาต่างๆ สิ่งนี้อาจดูน่ากลัวและเต็มไปด้วยความท้าทาย แต่ว่าด้วย Style Dictionary จะช่วยให้คุณเอาชนะอุปสรรคเหล่านี้ได้อย่างง่ายดายและทำให้เวิร์กโฟลว์คล่องตัวยิ่งขึ้น ด้วยการสร้างคำจำกัดความของสไตล์โดยอัตโนมัติจากที่แห่งเดียว ซึ่งระบบอันทรงพลังนี้ช่วยขจัดความไม่ถูกต้องและความไร้ประสิทธิภาพ ได้ด้วยคำสั่งเดียวเท่านั้น ทั้งยังช่วยให้ประยุกต์ใช้กฎเหล่านี้กับแพลตฟอร์มต่างๆ ได้หลากหลาย เช่น iOS, Android, CSS, JS, HTML, ไฟล์ Sketch และแม้กระทั่งเอกสารที่ระบุรายละเอียดของสไตล์เอาไว้
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Style_Dictionary_1e0fe2bff3.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Style_Dictionary_1e0fe2bff3.png)
4. Specify
Specify เป็นห้องสมุดที่เก็บรวบรวม token ทั้งหมดภายในระบบของคุณ สิ่งนี้ช่วยให้นักพัฒนาและนักออกแบบเข้าถึงทุก token ได้อย่างง่ายดาย ขณะเดียวกันพวกเขาก็ยังทำการเปลี่ยนแปลงโค้ดได้โดยตรงจากภายในอินเทอร์เฟซของ Specify อีกด้วย โดยแอปพลิเคชันนี้ประกอบด้วยด้านต้นทางและด้านปลายทาง ซึ่งไฟล์ Figma ทำหน้าที่เป็นแหล่งที่มาซึ่งมีข้อมูลที่มีค่า เช่น Figma style และทรัพย์สินอื่นๆ เช่น ไอคอน ซึ่งจัดเก็บไว้ใน Specify
เพื่อสร้างการเชื่อมต่อระหว่าง Figma และ Specify เครื่องมือนี้จะดึงข้อมูลที่เกี่ยวข้องจากไฟล์ Figma ซึ่งขั้นตอนต่อไปจะเกี่ยวข้องกับการตั้งค่าลิงก์ระหว่าง Specify และ Git เพื่อให้แน่ใจว่าการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาจะเป็นไปอย่างราบรื่น เมื่อการตั้งค่านี้เสร็จสิ้น นักออกแบบสามารถอัปเดต token ใน Figma ได้อย่างง่ายดาย และส่งไปยัง Specify ได้โดยตรง การเปลี่ยนแปลงดังกล่าวจะได้รับการตรวจสอบและอนุมัติโดยนักพัฒนาก่อนที่จะมีการอัปเดตโค้ด ทำให้เวิร์กโฟลว์นี้เต็มไปด้วยความคล่องตัวแถมยังช่วยให้การทำงานร่วมกันมีประสิทธิภาพมากขึ้น
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Specify_f46b016afb.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Specify_f46b016afb.png)
5. Supernova
Supernova เป็นแพลตฟอร์มอันทรงพลังที่เชื่อมช่องว่างระหว่างการออกแบบและการเขียนโค้ด ด้วยการนำเสนอโซลูชันแบบครบวงจรสำหรับการสร้างและบำรุงรักษา design system ของคุณ พร้อมกับทำหน้าที่เป็นแหล่งข้อมูลเดียวสำหรับ design system ของคุณ และยังอำนวยความสะดวกในการสร้างเอกสารที่ครอบคลุมอีกด้วย
ในการเริ่มใช้งาน Supernova คุณเพียงแค่ต้องเชื่อมโยงไฟล์ Figma ของคุณกับแพลตฟอร์ม เมื่อเชื่อมต่อแล้ว Supernova จะช่วยให้คุณสามารถส่งการปรับเปลี่ยนการออกแบบไปยังโค้ดพื้นฐานได้อย่างราบรื่น ทำให้มั่นใจได้ว่าการออกแบบจะมีความสอดคล้องและคงประสิทธิภาพที่ดีตลอดกระบวนการออกแบบและพัฒนา ด้วย Supernova คุณจึงสามารถจัดการ design system ของคุณได้อย่างมั่นใจ และซิงค์การเปลี่ยนแปลงระหว่างการออกแบบและโค้ดได้อย่างง่ายดาย
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Supernova_047153547c.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Supernova_047153547c.png)
ก้าวไปอีกขั้น: 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 พิสูจน์ได้ว่ามีประโยชน์อย่างยิ่งเมื่อถึงคราวที่ต้องแนะนำหรือแปลคอนเทนต์เป็นภาษาอื่นๆ เพื่อช่วยลดการคาดเดาและทำหน้าที่เป็นแหล่งข้อมูลส่วนกลางสำหรับคอนเทนต์ทั้งหมด ทำให้มั่นใจได้ว่าผลิตภัณฑ์ที่พัฒนาขึ้นจะมีความสม่ำเสมอและความถูกต้องสมบูรณ์แบบ
![https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_and_Microcopy_45c062d5a7.png](https://morph-2-prd-bucket.s3.ap-southeast-1.amazonaws.com/Design_and_Microcopy_45c062d5a7.png)
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 ได้รับการยอมรับอย่างแพร่หลายในปัจจุบัน เป็นผลให้การพัฒนาการออกแบบผลิตภัณฑ์ดิจิทัลได้กลายมาเป็นแบบรวมศูนย์ โดยเป็นแพลตฟอร์มแบบครบวงจรสำหรับผู้มีส่วนได้ส่วนเสียทั้งหมดที่เกี่ยวข้อง ซึ่งวิธีการแบบครบวงจรนี้ได้ช่วยส่งเสริมการทำงานร่วมกัน, สร้างความสม่ำเสมอ, และมีประสิทธิภาพตลอดวงจรชีวิตการออกแบบและการพัฒนาผลิตภัณฑ์