วิธีใช้สูตรบูลีนใน Figma

blank
By
Jugo Mobile
Jugo Mobile is a platform ...
อ่าน 1 นาที

Figma เป็นที่รู้จักว่าเป็นหนึ่งในโปรแกรมที่ดีที่สุดสำหรับนักออกแบบกราฟิกทั่วโลก คุณสมบัติของมันครอบคลุม ช่วยให้ผู้ใช้สามารถสร้างอะไรก็ได้ตั้งแต่โลโก้ที่สะดุดตาไปจนถึงหน้า Landing Page ที่ไม่ซ้ำใคร โดยเฉพาะอย่างยิ่ง คุณลักษณะบูลีน (ซึ่งเป็นส่วนหนึ่งของการอัปเดตคุณสมบัติส่วนประกอบในปี 2545) ช่วยให้คุณสร้างรูปร่างที่กำหนดเองได้โดยการรวมเลเยอร์ต่างๆ ผ่านสูตรหลายสูตร

ที่นี่คุณจะได้เรียนรู้วิธีใช้ฟีเจอร์บูลีนในการออกแบบครั้งต่อไปของคุณ

ตัวเลือกสูตรบูลีนสำหรับรูปร่างแบบกำหนดเอง

ก่อนที่จะสร้างรูปร่างที่กำหนดเอง คุณจะต้องทราบว่าสูตรบูลีนทำงานอย่างไรและบรรลุผลอย่างไร เมื่อใดก็ตามที่คุณสร้างกลุ่มบูลีน มันจะนับเป็นเลเยอร์รูปร่างเดียวที่มีทั้งคุณสมบัติการเติมและเส้นโครงร่าง

คุณจะพบไอคอนบูลีนที่มีสี่เหลี่ยมจัตุรัสสองอันซ้อนทับกันที่แถบด้านบนของอินเทอร์เฟซของคุณ คุณจะมีตัวเลือกสูตร 4 แบบจากเมนูที่ขยายลงมาเมื่อคลิก

ตัวเลือกสูตรเหล่านี้ได้แก่:

  • การเลือกสหภาพ – ตัวเลือกนี้จะเปลี่ยนรูปร่างที่คุณเลือกให้เป็นกลุ่มบูลีน เมื่อใช้ Union เส้นทางของรูปร่างย่อยด้านนอกจะสร้างโครงร่างของรูปร่างแบบกำหนดเองใหม่ อย่างไรก็ตาม จะไม่รวมส่วนที่ทับซ้อนกันภายในใดๆ
  • ลบการเลือก – การพิจารณาตัวเลือกนี้จะตรงกันข้ามกับการเลือกสหภาพจะมีประโยชน์ โดยจะลบพื้นที่ทั้งหมดของรูปร่างออกจากรูปร่างฐาน ทำให้มองเห็นได้เฉพาะชั้นล่างสุดเท่านั้น
  • การเลือกจุดตัด – ด้วยการเลือกจุดตัด ผู้ใช้สามารถสร้างรูปร่างที่กำหนดเองได้เฉพาะส่วนที่ทับซ้อนกันของรูปร่างดั้งเดิมหรือเลเยอร์ย่อยเท่านั้น
  • ไม่รวมส่วนที่เลือก – ฟังก์ชันแยกจะตรงกันข้ามกับตัวเลือกกลุ่มบูลีนที่ตัดกัน การใช้มันจะทำให้คุณได้รูปร่างที่กำหนดเองจากส่วนที่ไม่ทับซ้อนกันของรูปร่างดั้งเดิม

โปรดทราบว่าคุณจะต้องเลือกรูปร่างตั้งแต่ 2 รูปร่างขึ้นไปก่อนจึงจะสามารถใช้ตัวเลือก Boolean จากเมนูด้านบนได้อย่างมีประสิทธิภาพ เนื่องจากบูลีนจะรวมเลเยอร์รูปร่างหลายชั้นไว้ในรูปร่างที่กำหนดเองและซับซ้อนเพียงรูปร่างเดียวเท่านั้น

การใช้คุณสมบัติ Swap อินสแตนซ์ Figma

เมื่อ Figma ประกาศการอัปเดตคุณสมบัติส่วนประกอบในปี 2022 การเลือกบูลีนเป็นเพียงหนึ่งในคุณสมบัติใหม่ที่มีอยู่มากมาย จุดรวมของการอัปเดตส่วนประกอบคือการช่วยให้คุณสร้างเทมเพลตรูปแบบต่างๆ ได้อย่างมีประสิทธิภาพ แทนที่จะต้องค้นหาตัวเลือกที่ไม่จำเป็น

แม้ว่าบูลีนจะเป็นส่วนสำคัญของสิ่งนี้ แต่ผู้ใช้ก็สามารถใช้คุณสมบัติการสลับอินสแตนซ์ได้เช่นกัน ต่อไปนี้เป็นวิธีดำเนินการ:

  1. เลือกองค์ประกอบการออกแบบของคุณ
    วิธีใช้สูต
  2. ไปที่เมนูสลับอินสแตนซ์ทางด้านขวาของอินเทอร์เฟซแล้วคลิก ไอคอนมีรูปเพชรพร้อมลูกศรอยู่
    1714044291 981 วิธีใช้สูต
  3. ตั้งชื่อคุณสมบัติ เช่น “ไอคอน” บนเมนูป๊อปอัป และตั้งค่าเป็นเครื่องหมายถูก เป็นต้น
    1714044291 11 วิธีใช้สูต
  4. เลือก “สร้างทรัพย์สิน” จากนั้น Figma จะทำเครื่องหมายคุณสมบัติของส่วนประกอบที่เมนูสลับเดิมเป็น
    1714044291 359 วิธีใช้สูต
  5. สร้างสำเนาการออกแบบของคุณโดยเลือกและใช้คำสั่ง CTRL + C จากนั้น ตั้งค่าอินสแตนซ์แบบเคียงข้างกัน
    1714044291 705 วิธีใช้สูต
  6. เลือกไอคอนใหม่จากเมนูคุณสมบัติส่วนประกอบที่ทำเครื่องหมายไว้โดยคลิกที่ไอคอนนั้น สิ่งนี้จะเปลี่ยนองค์ประกอบบนอินสแตนซ์โดยอัตโนมัติ

ฟังก์ชันสลับอินสแตนซ์นั้นเน้นเรื่องความสะดวกสบายเป็นหลัก เมื่อใช้ตัวเลือกสลับอินสแตนซ์ คุณจะปรับปรุงกระบวนการออกแบบในขณะเดียวกันก็สลับรูปแบบ (อินสแตนซ์) เคียงข้างกันได้อย่างรวดเร็ว

การใช้ตัวเลือกคุณสมบัติข้อความสำหรับการเปลี่ยนแปลงอินสแตนซ์อย่างง่าย

สมมติว่าคุณกำลังออกแบบปุ่มคำกระตุ้นการตัดสินใจสำหรับหน้า Landing Page คุณมีสองรูปแบบเคียงข้างกัน และคุณได้ใช้คุณสมบัติการสลับอินสแตนซ์เพื่อดูไอคอนต่างๆ อย่างไรก็ตาม การใช้ถ้อยคำก็เป็นอีกองค์ประกอบหนึ่งที่ต้องคำนึงถึง

โดยปกติแล้ว คุณจะต้องสับเปลี่ยนส่วนเลเยอร์เพื่อทำกระบวนการให้เสร็จสิ้น ด้วยคุณสมบัติองค์ประกอบข้อความ คุณจะสามารถดูและเปลี่ยนแปลงสิ่งนี้บนแถบด้านข้างแทนได้ ต่อไปนี้คือวิธีใช้คุณลักษณะคุณสมบัติข้อความให้เป็นประโยชน์:

  1. เลือกองค์ประกอบข้อความในการออกแบบของคุณ
    1714044291 347 วิธีใช้สูต
  2. ตั้งชื่อองค์ประกอบของคุณ เช่น “ข้อความ” และค่า “ปุ่ม” ก่อนที่จะคลิกที่ “สร้างคุณสมบัติ”
    1714044291 665 วิธีใช้สูต
  3. จากนั้นคุณจะสามารถเปลี่ยนข้อความและทดลองใช้ถ้อยคำสำหรับคำกระตุ้นการตัดสินใจของคุณได้

คุณสมบัติข้อความสะดวกต่อการใช้งานควบคู่ไปกับตัวเลือกการสลับอินสแตนซ์และบูลีน

วิธีใช้คุณสมบัติตัวแปรบน Figma

ด้วยการอัปเดตส่วนประกอบใหม่บน Figma คุณสามารถสร้างตัวแปรได้หลายแบบและควบคุมพวกมันทั้งหมดได้จากแถบด้านข้างขวา การทำเช่นนี้จะช่วยให้คุณเปลี่ยนข้อความและสลับไอคอนได้อย่างมีประสิทธิภาพมากขึ้น คุณยังสามารถควบคุมการออกแบบด้านอื่นๆ ของตัวเลือกสินค้าของคุณได้ มาดูวิธีการทำกัน:

  1. เลือกการออกแบบของคุณและคลิก “เพิ่มตัวเลือกสินค้า” ในแถบด้านบน กดซ้ายค้างไว้ คลิกบนการออกแบบของคุณ แล้วลากรูปแบบไปทางด้านขวา
    1714044291 555 วิธีใช้สูต
  2. คุณจะสังเกตได้ว่าคุณสมบัติรูปแบบที่ 2 จะปรากฏบนแถบด้านข้างทางขวาอย่างไร ติดป้ายกำกับคุณสมบัติใหม่เป็น “ปุ่ม” และค่าถัดจากคุณสมบัติเป็น “สีแดง”
    1714044291 796 วิธีใช้สูต
  3. คุณสมบัติเหล่านี้จะติดป้ายกำกับตัวเลือกสินค้าของคุณ หากคุณเลือกการออกแบบดั้งเดิม คุณจะสังเกตเห็นว่าค่าเปลี่ยนกลับเป็น “ค่าเริ่มต้น”
    1714044291 422 วิธีใช้สูต

คำถามที่พบบ่อย

ฉันสามารถสร้างโลโก้โดยใช้ตัวเลือกบูลีนได้หรือไม่

ในทางเทคนิค คุณสมบัติบูลีนทำให้คุณสามารถรวมรูปร่างหลายรูปร่างโดยใช้เส้นทางของมันได้ แม้ว่านี่อาจเป็นวิธีหนึ่งในการสร้างโลโก้แบบเรียบง่าย แต่ตัวเลือกต่างๆ นั้นจำกัดอยู่เพียงรูปร่างที่เรียบง่าย เช่น วงรี การใช้เครื่องมือปากกากับสิ่งต่างๆ เช่น การสร้างโลโก้จะดีที่สุดแทน คุณยังคงใช้การอัปเดตองค์ประกอบอื่นๆ เพื่อทำให้กระบวนการแบ่งชั้นง่ายขึ้นได้

ฉันสามารถเปลี่ยนแบบอักษรโดยใช้ตัวเลือกคุณสมบัติส่วนประกอบข้อความได้หรือไม่

แต่น่าเสียดายที่ไม่ได้. คุณสมบัติองค์ประกอบข้อความช่วยให้คุณเปลี่ยนข้อความแทนแบบอักษรได้ อย่างไรก็ตาม คุณยังคงสามารถเลือกข้อความและค้นหาแบบอักษรที่เหมาะสมได้จากแถบด้านข้างขวา

อินสแตนซ์การออกแบบใดบ้างที่ฉันต้องใช้คุณสมบัติส่วนประกอบข้างต้น

คุณไม่จำเป็นต้องใช้คุณสมบัติส่วนประกอบสำหรับตัวเลือกสินค้า อย่างไรก็ตามมันทำให้กระบวนการออกแบบง่ายขึ้นและเร็วขึ้นมาก ตัวอย่างคือปุ่มที่ต้องใช้สีที่แตกต่างกัน โดยหลักแล้วจะคล้ายกันโดยมีการเปลี่ยนแปลงองค์ประกอบเพียงครั้งเดียว หรือมีการเปลี่ยนแปลงรูปร่างของหน้า Landing Page เล็กน้อย นอกจากนี้ยังมีประโยชน์สำหรับการสร้างสองการออกแบบและเลือกการออกแบบที่ดีที่สุด

ปรับปรุงกระบวนการออกแบบของคุณด้วยคุณสมบัติส่วนประกอบบน Figma

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

คุณสร้างรูปร่างที่ซับซ้อนอะไรโดยใช้ตัวเลือกบูลีน คุณพบว่าตัวเลือกคุณสมบัติของส่วนประกอบนั้นใช้งานง่ายเช่นกันหรือไม่ แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง

แชร์บทความนี้
ติดตาม
Jugo Mobile is a platform dedicated to high-quality content in gaming, sports, and tech. Engage with high-quality content and connect with fellow enthusiasts and experts. Explore the latest trends and innovations in our vibrant community. Join us and experience the future today!