เพิ่มประสิทธิภาพการทำงานของทีมนักออกแบบด้วย Design Version Control
“Talent wins the games, but teamwork and intelligence win the championships.”
ในปัจจุบัน การทำงานใหญ่ๆ ให้เสร็จซักงานนั้น การทำงานเป็นทีมนั้นเป็นทีมเป็นเรื่องที่สำคัญมาก และแน่นอน กับงานออกแแบบของเราก็เช่นกัน
แต่ก่อนการทำงานคนเดียวมันก็เป็นไปได้แหละ ด้วยการแข่งขันที่มีมากขึ้น ความเร็วจึงเป็นอีกสิ่งนึงที่เราให้ความสำคัญ ถ้าทำคนเดียวมันก็คงไม่เร็วพอ เพราะฉะนั้น การทำงานเป็นทีมของเหล่านักออกแบบจึงได้เกิดขึ้น
แต่มันก็มีปัญหามากมายในการทำงานงานออกแบบเป็นทีม เช่น สมาชิกทำงานโดยใช้ไฟล์คนละเวอร์ชั่นกัน, ทำงานพร้อมกันไม่ได้เพราะอีกคนทำอยู่ เดี๋ยวมันจะทับกัน, เกิดความยากลำบากในเวลาที่ต้องการจะ Merge งานรวมกัน เป็นต้น
ปัญหาเหล่านี้จะหมดไป หากคุณรู้จักเครื่องมือที่มีชื่อว่า Design Version Control และนี้แหละคือสิ่งที่ผมจะมาพูดถึงในบทความนี้ ไปเริ่มกันเลย!
Version Control คืออะไรกัน?
Version Control System (VCS) คือระบบที่จะคอยบันทึกเวอร์ชั่นการเปลี่ยนแปลงของโค๊ด ไฟล์เอกสาร หรือไฟล์งานประเภทอื่นๆ ไว้บน Repository โดยจะทำการบันทึกไว้ด้วย ว่าการเปลี่ยนแปลงแต่ละครั้งนั้นทำเพื่ออะไร และทำโดยใคร อีกทั้งทำรวมงาน(Merge) ของเรากับสมาชิกทีมคนอื่น และอัปโหลดเก็บไว้ให้ด้วย นอกจากนี้ VCS ยังอนุญาตให้เราเปลี่ยนไฟล์งานของเราให้กลับไปเป็นเวอร์ชั่นต่างๆ ก่อนหน้าได้ในกรณีที่ไฟล์ปัจจุบันเกิดปัญหา
Version Control ทำงานอย่างไร?
เนื่องจากเรากำลังพูดเรื่อง VCS for Designer ผมจึงจะยกตัวอย่างแบบ Designer นะครับ การทำงานของ VCS ให้คุณนึกเรื่อง File History ของ Photoshop ที่เมื่อคุณทำงานไปเรื่อยๆ แล้วรู้สึกอยากจะย้อนกลับไปหาสิ่งที่คุณทำก่อนหน้า คุณก็แค่กด Cmd+ z เพื่อย้อนกลับไปในจุดที่คุณต้องการ แต่หากคุณทำไปเยอะมากๆ แล้ว คุณจะไม่สามารถกดย้อนกลับไปยังจุดที่คุณอยากจะย้อนได้
VCS ก็มีแนวคิดคล้ายๆ กันแหละ แต่ว่า VCS จะสามารถย้อนกลับได้ “แบบไม่จำกัดจำนวนครั้ง” ครับ เพราะ VSC จะทำการเก็บไฟล์ “ทุกเวอร์ชั่น” ของเราไว้ใน Repository ทำให้คุณสามารถย้อนกลับไปที่ไฟล์เวอร์ชั่นแรกของเราเลยก็ยังได้หากคุณต้องการ
อีกเรื่องนึงก็คือการ Merge ยกตัวอย่าง สมมุติว่านาย A และ B กำลังทำงานอยู่ในไฟล์ชื่อ ยูไนเต็ด.sketch พร้อมๆ กัน(จากคอมคนละเครื่องนะ) โดยแต่ละคนก็สร้าง Artboard ขึ้นมาคนละ 1 บอร์ด และออกแบบหน้าเว็บออกของแต่ละคนอยู่ใน Artboard นั้นๆ ครับ
ซึ่งพอแต่ละคนมากด Push เพื่ออัปโหลดงานขึ้นบน Repository ตัว VCS จะทำการนำ ยูไนเต็ด.sketch ของทั้ง 2 คนมารวมกัน ซึ่งข้างในไฟล์นั้น ก็จะมีงานที่แต่ละคนทำรวมอยู่ในไฟล์ด้วยกันให้ครับ ให้อารมณ์แบบว่า
“คุณวาดภาพใส่กระดาษคนละแผ่น แต่เจ้า VCS มันเอาภาพที่คุณวาดๆ นั้น มารวมกันให้ในกระดาษแผ่นเดียว”
ประมาณนี้แหละ
ข้อดีของการใช้ Design Version Control
- ทุกคนสามารถทำงานไปพร้อมๆ กันได้ โดยไม่ต้องกังวลว่าจะไปทับงานของใคร เพราะแต่ละครั้งที่เราอัปโหลดไฟล์ขึ้น Repository ระบบจะทำการ Merge ข้อมูลต่างๆ ให้เราด้วย หากส่วนไหนที่มีการทำงานทับซ้อนกัน(Conflict) ขึ้นมา ระบบก็จะถามเราก่อนว่า ต้องการใช้งานของใครเพื่ออัปโหลดขึ้น Repository
- คุณสามารถสลับ Version ของ Project คุณไปมาได้อย่างอิสระ คุณสามารถย้อนอดีตได้โดยไม่ต้องพึ่งโดราเอม่อน เพียงแค่ใช่ Version Control !
- ทำให้การสื่อสารในทีมทำได้ง่ายยิ่งขึ้น เพราะทุกคนเห็นงานเป็นภาพเดียวกันอยู่เสมอ
- จาก 3 ข้อที่กล่าวมา มันจะทำให้ชีวิตการทำงานของคุณดีขึ้น ลดเวลาที่ใช้ไปกับการจัดการไฟล์ Master ของคุณ และทำ Progress ของงานพุ่งไปได้ไวขึ้นด้วยนะเออ
Design Version Control Tools
เอาเข้าจริงแล้ว เราสาสามารถใช้ Github เพื่อเป็น Version Control ของงานออกแบบเราได้นะครับ แต่คืองานออกแบบมันเป็นงานที่ควรจะเห็นเป็นภาพมากกว่าโค้ด เลยขอสรุปไว้ละกันว่า มันทำได้ แต่มันไม่ใช่ทางเลือกที่ดีครับ
อ่ะ เข้าเรื่องกันดีกว่า เราจะเลือกใช้ Version Control ตัวไหนดีในทีมของเรา เรื่องนี้มีคนเขียนไว้แล้วที่บทความนี้ครับ
ในบทความนี้ ผมจะมาเสนอเครื่องมือที่บทความด้านบนไม่ได้บอกเอาไว้ โดยเครื่องมือที่ผมจะนำมาพูดถึงในวันนี้ มีชื่อว่า Versions ครับ
Versions คืออะไร?
Versions เป็น Version Control (งงป่ะ) สำหรับเหล่า UI Designer โดยเฉพาะครับ ทำไมถึงพูดอย่างนั้นล่ะ? ก็เพราะว่า Versions สามารถอัปโหลดได้เฉพาะไฟล์นามสกุล .sketch ครับ
ให้พูดอีกด้านนึงก็คือ คุณจะไม่สามารถใช้ Versions ได้ หากคุณไม่ได้ออกแบบงานโดยใช้ Sketch ครับ
วิธีการใช้งาน Versions นั้นก็ง่ายแสนง่าย อันดับแรกก็คือ คุณต้องสร้าง Repository ของ Project ขึ้นมาก่อน โดยการกด Create New Project ที่มุมขวาบนของโปรแกรม จากนั้นก็ตั้งชื่อ Project แล้วกด Create ที่ด้านล่าง
จากนั้น โปรแกรมจะทำการสร้าง Folder ขึ้นมาบนเครื่องเรา โดยหลังจากนี้ หากเราสร้างไฟล์ .sketch ขึ้นมา และทำการแก้ไขไฟล์ที่อยู่ใน Folder นี้ โปรแกรมจะมองว่า นี้คือการแก้ไขไฟล์งานของคุณ และจะขึ้นให้คุณกด Push บนหน้าโปรแกรม
กลับมาที่โปรแกรม เมื่อเราทำงานเสร็จทุกอย่างแล้ว เราจะพบกับสิ่งเหล่านี้ในหน้าโปรแกรม
โดยทางซ้ายจะบอกประวัติคร่าวๆ ว่ามีใคร Push อะไรขึ้นมาบ้างในช่วงที่ผ่านมา ส่วนทางด้านขวาจะบอกว่า งานเวอร์ชั่นปัจจุบันในเครื่องของเรา เมื่อเทียบกับเวอร์ชั่นล่าสุดที่อยู่ใน Repository นั้น มีอะไรเปลี่ยนแปลงไปบ้าง
และเมื่อเรากดเข้าไปดู เราจะเห็นหน้าแบบนี้ ซึ่งจะเป็นรายละเอียด ว่าเกิดการเปลี่ยนแปลงอะไรขึ้นบ้างกับไฟล์งานของเรา โดยจะแบ่งเป็น 3 แบบคือ
แบบที่ 1 Conflict คืองานที่เกิดการทำทับซ้อนกัน เมื่อเกิดเคสแบบนี้ขึ้น เราต้องมานั่งเลือกนิดนึง ว่าเราจะเลือกเอางานของใครขึ้นไปเป็น Master บน Repository
แบบที่ 2 Download File คืองานที่คนอื่นทำไว้ แล้วมันไม่ทับซ้อนอะไรกับสิ่งที่เราทำอยู่เลย ตรงส่วนนี้ก็คือไม่มีปัญหาอะไร เราสามารถดึงไฟล์นั้นเข้าเครื่องได้ทันที
ส่วนสุดท้าย Upload File คืองานที่เราทำไว้ และมันไม่ได้ไปทับซ้อนอะไรกับสิ่งที่คนอื่นทำไว้ เราสามารถ Push ไฟล์ขึ้น Repo ได้เลย
อธิบายคร่าวๆ เท่านี้แล้วกันสำหรับหน้าตา และการใช้งานโปรแกรม คราวนี้มาดูข้อดี/ ข้อเสียของไอเจ้า Versions กันดีกว่า
ข้อดี
- ฟรี!
- และด้วยความที่มันฟรี มันจึงเหมาะมากกับทีมในทุกระดับ ที่กำลังปรับตัว และหันมาใช้ VCS กับงานออกแบบ
- ช่วยให้การทำงานเป็นทีมทำได้ง่ายขึ้น และดียิ่งขึ้น ตามคอนเซ็ปต์ของ VCS
- ทีมพัฒนาของโปรแกรมนี้น่ารักมาก เคยมีปัญหาเรื่องไฟล์บน Repo หาย ติดต่อไปแปปเดียว เขาตอบกลับมาพร้อมช่วยแก้ปัญหาให้เลยทันทีเลย
ข้อเสีย
- ใช้ได้แค่กับ Mac OS และรองรับแค่ไฟล์ .sketch เท่านั้น (สาวก XD กับ Figma คืออด)
- Interface ของโปรแกรมแอบใช้ยากไปนิดนึง
- มีอาการช้า เด๋อ เอ๋อรับประทานให้เห็นเป็นบางครั้งคราว แต่ก็ไม่กระทบกับการทำงานมากเท่าไหร่นัก
คำแนะนำการใช้งาน
- ให้ทำการ Update ข้อมูลต่าง ๆ ผ่านระบบให้บ่อยที่สุด — หรือ Update ทุกครั้งที่เปลี่ยนแปลงเรียบร้อยเลยก็จะดีมาก เพื่อทำให้ข้อมูลตรงกันอยู่เสมอ และลด Conflict เวลาที่เราจะ Push งานด้วย
- ทำ Task นึง แล้วมา Commit/Push ทีนึง — ผมมองว่าการ Commit/Push แต่ละครั้ง มันเหมือนกันพูดคุยกันของคนในทีมนะ เพราะฉะนั้นสิ่งที่ควรทำคือค่อย ๆ ให้ commit ทีละเรื่อง ในแต่ละการเปลี่ยนแปลงควรมีขนาดเล็ก ชัดเจนรวมทั้งคำอธิบายต้องตรงกับสิ่งที่เปลี่ยนแปลงด้วย มันจะได้เห็นรายละเอียด และทำความเข้าใจได้ง่าย
- อะไรที่ไม่จำเป็น ก็ไม่ต้องเอาขึ้น VCS — ข้อนี้ไม่ต้องอธิบายอะไรเพิ่มเนอะ คืออะไรที่ไม่ได้ใช้ หรือใช้ไม่ได้แล้วก็ต้องทิ้งอะครับ ไม่ว่าจะเป็น Artboard สิ่งของ หรือแม้แต่คนก็ตาม เรียนรู้สิ่งความผิดพลาดจากมัน กด Option + Command + Delete แล้วมุ้ปอรกันเถอะ
ก่อนจากกัน
อย่างที่กล่าวไว้ในตอนต้นของบทความนี้ ในยุคสมัยนี้ เราไม่สามารถปฏิเสธการทำงานเป็นทีมได้ครับ เพราะฉะนั้นแล้ว โอเคมันอาจจะมีปัญหามากมายในการทำงานหลายคน แต่แทนที่เราจะดื้อ ฝืนทำงานคนเดียวเพื่อหลีกหนีปัญหาเหล่า ลองมองมันเป็นความท้าทาย ลองปรับตัว หาวิธีการ ที่มันจะทำให้การทำงานเป็นทีมมันไหลลื่นที่สุดกันดีกว่าเนอะ เพื่อประโยชน์ เพื่อความสุข แก่เหล่า Developer และ Designer ทั้งหลาย ตลอดกาลนานเถิด /สาธุ
อย่าลืม 👏 (Claps) และ 🔖 (Bookmark) บทความนี้ไว้อ่านที่หลังด้วยหละ
