✨ ไขความลับ Boolean Operations ใน Figma เสกรูปทรงซับซ้อนให้เป็นเรื่องง่าย

เคยไหมคะ? เวลาที่อยากจะวาดไอคอนสักตัว หรือทำกราฟิกเก๋ๆ ใน Figma แต่พอจับเครื่องมือวาดเส้นทีไร ผลลัพธ์กลับดูเบี้ยวๆ ไม่เป๊ะอย่างที่คิด… ความจริงแล้ว กราฟิกสวยๆ หลายชิ้นที่เราเห็น ไม่ได้เกิดจากการวาดเส้นทีละเส้นเสมอไปนะคะ แต่เกิดจากการ “นำรูปทรงเรขาคณิตพื้นฐาน มาตัดแปะรวมกัน” ต่างหาก!

วันนี้เราจะพาไปทำความรู้จักกับ Boolean Operations ฮีโร่ลับที่จะช่วยให้คุณสร้างรูปทรงซับซ้อนได้อย่างรวดเร็วและแม่นยำ พร้อมพาทัวร์เมนูลับที่ซ่อนอยู่ด้วยกัน

หลายคนมักสับสนฟีเจอร์นี้กับ “Boolean Properties” ต้องบอกก่อนว่ามันคนละฟังก์ชันกันนะคะ Boolean Properties จะใช้สร้างสวิตช์เปิด/ปิดเลเยอร์ใน Component ส่วน Boolean Operations ที่เรากำลังจะพูดถึง คือเมนูสำหรับการรวมและตัด “รูปทรง (Shapes)” ค่ะ

เมื่อเราเลือกรูปทรงใน Figma ตั้งแต่ 2 ชิ้นขึ้นไป แล้วคลิกที่ไอคอนรูปสี่เหลี่ยมซ้อนกันที่แถบด้านบน หรือกดคลิกขวาที่เลเยอร์ จะมีเมนูเวทมนตร์ปรากฏขึ้นมาให้เราเลือกใช้งานทั้งหมด 6 คำสั่งด้วยกัน ดังนี้

🌟 4 คำสั่งหลัก: แก๊งตัดต่อรูปทรง (Boolean Operations)

1. Union (รวมร่างสร้างสิ่งใหม่) เครื่องมือนี้เปรียบเสมือนกาวตราช้าง ที่จะหลอมรวมรูปทรงทุกชิ้นที่คุณเลือก ให้กลายเป็น “ชิ้นเดียวกัน”

• 📌 ไอเดียการใช้งาน: วาดวงกลมหลายๆ ขนาดมาวางซ้อนกัน จากนั้นกด Union… ปิ๊ง! คุณจะได้ “รูปก้อนเมฆ” โค้งมนสวยงามทันที

Union

2. Subtract (ตัวบน ตัด ตัวล่าง) การทำงานเหมือนเอาแม่พิมพ์ไปปั๊มกดลงบนแป้งคุกกี้เลยค่ะ รูปทรงที่อยู่เลเยอร์ “บนสุด” จะทำหน้าที่เป็นมีด ไปตัดเนื้อของรูปทรงที่อยู่เลเยอร์ “ล่าง” ออกไป

• 📌 ไอเดียการใช้งาน: อยากได้รูปพระจันทร์เสี้ยว? วาดวงกลม 2 วง เอาวงเล็กไปวางเหลื่อมๆ วงใหญ่ แล้วกด Subtract วงกลมเล็กจะกินเนื้อวงกลมใหญ่ออกไป กลายเป็นพระจันทร์เสี้ยวค่ะ

Subtract

3. Intersect (เก็บแค่รอยต่อ) คำสั่งนี้จะโฟกัสเฉพาะส่วนที่เกี่ยวข้องกันเท่านั้น! มันจะเก็บพื้นที่ “เฉพาะส่วนที่รูปทรงซ้อนทับกัน” เอาไว้ ส่วนพื้นที่ไหนที่ไม่เกี่ยวข้องกันเลย จะถูกลบหายไปทั้งหมด

• 📌 ไอเดียการใช้งาน: วาดวงกลม 2 วงมาวางซ้อนทับกันแค่ครึ่งเดียว พอกด Intersect คุณจะได้รูปทรงตรงกลางที่ดูคล้ายกับ “รูปใบไม้” หรือ “ดวงตา”

Intersect

4. Exclude (เจาะรูทะลุใจ) คำสั่งนี้จะทำงานตรงข้ามกับ Intersect ค่ะ คือจะเก็บรูปทรงรอบนอกไว้ทั้งหมด แต่จะ “เจาะรูทะลุ” เฉพาะตรงกลางที่รูปทรงซ้อนทับกัน

• 📌 ไอเดียการใช้งาน: สร้างสี่เหลี่ยมเป็นพื้นหลัง แล้วเอาวงกลมไปวางไว้ตรงกลาง กด Exclude สี่เหลี่ยมจะถูกเจาะรูเป็นวงกลม (อารมณ์เหมือนโดนัท) มองทะลุไปเห็น Background ด้านหลังได้เลย

Exclude

✨ 2 คำสั่งโบนัส: ตัวช่วยจัดการเลเยอร์ให้เป๊ะปัง

นอกจาก 4 คำสั่งด้านบนแล้ว ในเมนูเดียวกันนี้ยังมีอีก 2 ฟีเจอร์ที่ขาดไม่ได้เลย

5. Use as mask (หน้ากากสั่งลุย) ใครอยากเอารูปภาพใส่ลงไปในกรอบวงกลม หรือรูปทรงแปลกๆ ต้องใช้ตัวนี้เลยค่ะ เลเยอร์ที่อยู่ล่างสุดจะทำหน้าที่เป็น “หน้ากาก (Mask)” คอยตีกรอบกำหนดว่า จะยอมให้เรามองเห็นภาพหรือกราฟิกที่อยู่ด้านบนได้แค่ในขอบเขตไหนบ้าง

Use as mask

6. Flatten (รีดให้เรียบ) ความเจ๋งของ Figma คือคำสั่ง Boolean 4 ตัวแรกทำงานแบบ Non-destructive (กดใช้ไปแล้ว รูปทรงเดิมไม่หาย ยังเข้าไปกดแก้ ย่อ/ขยาย ขยับเล่นได้ตลอด) แต่เมื่อไหร่ที่คุณรู้สึกว่า “โอเค รูปทรงนี้เป๊ะแล้ว ไม่อยากแก้แล้ว” ให้กดคำสั่ง Flatten ได้เลยค่ะ มันจะทำการ “รีด” เลเยอร์ที่ซับซ้อนทั้งหมดให้กลายเป็น Vector แบนๆ แค่ชิ้นเดียว ช่วยให้ไฟล์ทำงานของเราเป็นระเบียบและไม่หนักจนเกินไปค่ะ

Flatten

เมนูในกลุ่ม Boolean Operations และ Masking เป็นเหมือนอาวุธคู่กายของ Designer ถ้าเราเข้าใจหลักการและหมั่นฝึกฝนการมองรูปทรงซับซ้อนให้แตกออกมาเป็นเรขาคณิตพื้นฐานได้ เราจะสามารถสร้างสรรค์ผลงานใน Figma ได้อย่างรวดเร็วและสนุกขึ้นอีกหลายเท่าตัวเลยค่ะ ลองเอาไปเล่นกันดูนะคะ