Group vs Frame เลือกใช้ได้ดีก็ทำงานได้ง่ายขึ้น #Figma
ใน Figma มีวิธีรวบของเข้ามาเป็นชุดเดียวกันอยู่สองแบบ คือ Group และ Frame ถ้าอยากใช้ให้คล่อง จุดนี้เป็นสิ่งที่เราควรมาทำความเข้าใจก่อนเลย เพราะโปรแกรมออกแบบอื่นๆ มักจะมีแค่ Group อย่างเดียว แล้วกลายเป็นว่าเราชิน เลยใช้แต่ Group หรือ Frame ทำให้เราขับพลังของ Figma ได้ไม่เต็มที่
มาลองดูลักษณะของ Group ก่อน
โดยปกติแล้วเวลาที่เราจะเปลี่ยนข้อมูลหรือย้ายที่วัตถุหลายๆ ตัวพร้อมกัน เราก็จะใช้วิธีกด Shift หรือ Ctrl ค้างไว้ แล้วคลิ๊กบนวัตถุที่เราต้องการแก้ไขไปเรื่อยๆ มันจะเกิดกรอบขึ้นแล้ว แล้วเราจะสามารถแก้วัตถุทุกชิ้นในกรอบนั้นไปพร้อมๆ กันได้ นั้นก็ถือเป็นการ Group แล้ว แต่เป็นกลุ่มที่อยู่ได้ไม่นาน เพราะเมื่อเราไปคลิ๊กที่วัตถุอื่นหรือกด ESC ความเป็นกลุ่มก็จะหายไป
ถ้าเราอยากให้ความเป็นกลุ่มอยู่ไปยาวๆ หลังจากเลือกแล้วให้กด ctrl+g (Windows) หรือ Cmd+g (Mac) วัตถุที่เราเลือกก็จะถูกรวบมาเป็นกลุ่มเดียวกัน
สังเกตว่า icon หน้า Goup 1 จะเป็นรูปสี่เหลี่ยมแบบมีเส้นประนะครับ!! แล้วของที่อยู่ด้านในจะเยื้องเข้ามาหนึ่งระดับ (สำหรับ Figma แล้ว การเข้าใจ และ จัดการ Layer ด้านซ้ายมือให้เป็น ถือเป็นหัวใจเลยครับ)
การปรับแก้ขนาดของกลุ่มก็จะทำให้ของที่อยู่ด้านในเปลี่ยนขนาดตามไปด้วย เราเรียกว่าการเปลี่ยนตามแบบ “Scale” ในการทำ Frame จะมีการเปลี่ยนขนาดในแบบอื่นอีก ซึ่งนี่เป็นจุดต่างสำคัญของการทำ Group และ Frame ครับ
มาลองดูลักษณะของ Frame กันบ้าง
การใช้ Frame จะไม่ใช่การมัดวัตถุมารวมกัน แต่ให้คิดเหมือนการสร้างกรอบขึ้นมา แล้วเอาวัตถุใส่ลงไปในนั้น ตัวกรอบเองจะมีคุณสมบัติของวัตถุทั่วไปอยู่ครบเลย เช่น สีพื้น สีกรอบ หรือขอบโค้ง เป็นต้น ต่างจากกลุ่มที่จะไม่มีคุณสมบัติใดๆ เลย เป็นแค่การมัดวัตถุไว้ด้วยกันเท่านั้น
จุดที่น่าสนใจจุดแรก คือเราสามารถกำหนดเงื่อนไขให้วัตถุที่อยู่ใน Frame มีขนาดเปลี่ยนไปตาม Frame ได้หลายรูปแบบ เช่น แทนที่จะให้วัตถุเปลี่ยนขนาดไปตาม Frame เราเลือกให้วัตถุนั้นรักษาระยะห่างจากด้านขวาแทนได้ โดยกำหนดที่ Constraints ของแต่ละวัตถุ (ดูใน property panel ด้านขวามือ)
จะเห็นว่าเราสามารถกำหนดพฤติกรรมของวัตถุแต่ละชิ้นโดยอ้างอิงจาก Frame ได้ โดยแต่ละชิ้นเป็นอิสระต่อกัน ซึ่งจะได้ผลดังภาพด้านล่างนี้ครับ
การที่มันสามารถขยับตามกรอบได้ช่วยให้งานออกแบบ UI ง่ายขึ้นมาก เช่น ตอนที่เราต้องการทำ Web Responsive (ขยายขนาดตาม Browser) ถ้าเราสามารถกำหนดลักษณะการยืดได้การทดสอบก็จะทำได้ง่ายขึ้น ที่สำคัญเวลาที่ Developer มาดูก็สามารถดูพฤติกรรมเหล่านั้นไปใช้ได้เลย เพื่อให้ผลออกมาอย่างที่เราออกแบบ
ยิ่งตอนที่เราออกแบบ Mobile App ที่ตัว Prototype ของเราจะต้องปรับไปตามขนาดของเครื่องที่ทดสอบเลย การกำหนดเงื่อนไขการขยายไว้จะทำให้เราแน่ใจได้ว่าจะออกมาดีในทุกขนาดของเครื่อง
จุดที่สองคือ Frame เราสามารถซ่อนส่วนที่เกิดออกไปจากกรอบได้ เหมือนเป็นกรอบรูปจริงๆ ต่างจากแบบ Group ที่ขนาดของมันจะขึ้นอยู่กับของที่อยู่ในกลุ่มไม่สามารถมีกรอบได้เหมือน Frame
จุดที่สาม คือ Frame เป็นต้นทางของการสร้าง Component นี่เป็นเหตุผลที่สำคัญยิ่งกว่าสองข้อแรกอีกครับ บน Figma เราสามารถสร้างวัตถุต้นแบบได้ (Master Component) แล้วคัดลอกไปใช้หลายๆ ที่ได้เรียกว่า Instant Component
ถ้าเราแก้ไขต้นแบบตัวที่คัดลอกไปจะเปลี่ยนตามไปด้วย ซึ่งธรรมชาติของงาน UI เรามักใช้ของซ้ำๆ เป็นจำนวนมาก ถ้าไม่วางแผน “ต้นแบบ” ให้ดี จะทำให้การแก้ไขภายหลังทำได้ยากมา
การกำหนดพฤติกรรมของวัตถุด้านในตัวต้นแบบให้ดี ช่วยให้การใช้งานตัวคัดลอกทได้ง่ายขึ้น และยืดหยุ่นมากขึ้นมากๆ อย่างตัวอย่างในรูปข้างต้นครับ
ขอเก็บส่วน Master Component และ Instant Component เอาไว้เล่าในครั้งหน้านะครับ 🙇♂️
ตกลงเราควรใช้ Group ตอนไหน ใช้ Frame ตอนไหน
ถ้าดูแบบนี้จะเหมือนว่า Frame จะสามารถตอบโจทย์ของ Group ได้ทั้งหมด แล้วแบบนี้จะใช้ Group ตอนไหน
ใช้ Group ตอนนี้ครับ
- ตอนวาดภาพ แล้วต้องการรวมภาพหลายๆ ชิ้นเข้ามาเป็นภาพเดียวกัน — เพราะภาพมักไม่มีเงื่อนไขกับขอบ การทำเป็น frame เราอาจจะพลาดไปกำหนดเงื่อนไขได้ง่ายๆ พอขยับขยายภาพก็พังเลย
- ตอนออกแบบ icon, logo, symbol — เพราะของพวกนี้เราต้องการให้มันขยายขนาดไปด้วยกัน (แบบ scale) การจับกลุ่มแบบ Group จึงเหมาะกว่า ในกรณีที่ต้องการทำให้เป็น master component ก็ให้เอา Frame ครอบไปอีกที
- ตอนกำลังทดลองออกแบบ — เพราะตอนนั้นขนาดของกรอบในแต่ละวัตถุยังไม่ชัด การใช้ Group จะทำให้กรอบขยายอัตโนมัติไปตามของที่อยู่ด้านใน การสร้าง Frame มาครอบจะเป็นภาระให้เรามาคอยขยาย Frame อีกที และทำให้มีเงื่อนไขเรื่องกรอบเข้ามา คนที่ยังใช้ Frame ไม่คล่องจะปล่อยความคิดสร้างสรรค์ไม่ออกได้ แต่ถ้าคล่องแล้วก็ใช้ได้ตามใจชอบเลย
ใช้ Frame ตอนนี้
- ตอนออกแบบส่วน UI ในส่วนที่ค่อนข้างชัด— เพราะงาน UI มีเงื่อนไขเรื่องขนาดและการขยายตามขอบแน่นอน เช่น Frame ตั้งต้นของ Mobile/Desktop หรือขนาดของ App bar, Bottom bar เป็นต้น ส่วนนี้ควรทำให้ชัดตั้งแต่ต้นๆ ลดความผิดพลาดในอนาคต (แต่ถ้าเป็นส่วนที่ไม่ชัด ต้องการความคล่องตัวในการเปลี่ยนสูงๆ การใช้ Group ไปก่อน ก็เป็นตัวเลือกที่ดี)
- ตอนที่ต้องการกำหนดของเขตให้ภาพวาด — หลังจากที่วาดมาแล้ว อยากจะเอาภาพไปใส่ใน UI ก็ให้สร้างขอบให้ชัดเจนด้วย Frame ได้เลยครับ
- ตอนที่ทำ prototype — เรามักจะต้องกำหนดให้บางวัตถุมีพฤติกรรมที่ขยับไปตามการใช้งาน เช่น App bar ต้องชิดด้านบนเสมอ ไม่เลื่อนไปตามเนื้อหา หรือ Tab bar ต้องติดด้านล่าง Dialog box ต้องลอยอยู่ตรงกลาง เป็นต้น
- ตอนที่ต้องการใช้ Grid — เพราะการใช้ Group จะสร้าง Grid ไม่ได้ แถม Grid ของ Figma มหัสจรรย์มาก เราสามารถกำหนดให้ของขยับไปตาม Grid ได้ด้วย ไม่ใช่แค่ตามกรอบของ Frame อย่างเดียว
การที่ Figma มีทั้ง Group และ Frame ให้เลือกใช้ ทำให้การทำงานของเราเป็นระบบระเบียบมากขึ้น ซึ่งนั้นเป็นสิ่งที่การออกแบบ UI ต้องการเป็นพิเศษ ต่างจากธรรมชาติของการวาดรูป อยากให้ทุกคนที่เริ่มใช้งาน Figma ได้ทดลองทำความเข้าใจดูครับ
ถ้าเพื่อนๆ สนใจเรื่องนี้ในรายละเอียด อยากชวนให้ลองติดตามเนื้อหาเรื่อง Figma จากช่องทางเหล่านี้ดูครับ
- Blog ของ UX Academy — นอกจากจะมีเรื่อง Figma แล้ว ยังมีเรื่อง UX / UI / Service Design อีกด้วยครับ
- Figma Thailand — ชุมชน Figma ในเมืองไทยกลุ่มแรกเลย ตอนนี้มีสมาชิกมากกว่า 1.4K แล้วครับ
- Friend of Figma Bangkok— ชุมชน Figma แบบ Official ครับ มีหน้าเว็บอยู่บน figma.com และมีกลุ่มอยู่บน Facebook ด้วยครับ
ตอนนี้ที่ UX Academy มีเปิด Figma online workshop อยู่นะครับ (วันที่ 27 กุมภาพันธ์ 2021 ครับ)
ใน workshop เราจะไม่เน้น “How to” หรือการบอกตรงๆ ว่าอยากได้อะไรต้องทำอย่างไร แต่จะเน้นให้เข้าใจ Fundamental (พื้นฐาน) ผ่านการลงมือทำ เพื่อช่วยให้เข้าใจปัญหา และออกแบบระบบที่ทำให้การแก้ไขงานในอนาคตทำได้ง่ายขึ้น (เพราะงานออกแบบ Software ไม่มีวันเสร็จ เราต้องพร้อมแก้อยู่ตลอด)
มาเข้าใจธรรมชาติการใช้งาน Figma กันครับ สามารถเรียนได้ทั้ง Design, Developer และ Business ครับ
สนใจแล้วสามารถดูรายละเอียดการสมัครได้ที่ Figma online Workshop ผ่านเว็บ Eventpop ครับ
