วิธีใช้เค้าโครงอัตโนมัติใน Figma

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

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

การใช้เค้าโครงอัตโนมัติ

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

• กด “Alt + A” แป้นพิมพ์ของคุณ (ใช้ได้กับ Mac และ Windows)
• คลิกขวาที่ออบเจ็กต์หรือส่วนประกอบแล้วคลิกเค้าโครงอัตโนมัติ (คุณต้องเพิ่มคุณสมบัตินี้ลงในแต่ละส่วนประกอบเนื่องจากเป็นไปไม่ได้ที่จะรวมจำนวนมาก)
• แตะไอคอนเครื่องหมายบวกถัดจากตัวเลือก "เค้าโครงอัตโนมัติ" ในเมนูบน Figma

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

การเพิ่มและการลบวัตถุ

การเพิ่มวัตถุลงในเฟรมของคุณค่อนข้างตรงไปตรงมา คุณเพียงแค่ต้องคว้าวัตถุที่คุณต้องการเพิ่มและปฏิบัติตามตัวบ่งชี้ และหากคุณจะลบอันหนึ่งออก ให้ลากกลับออกมาแล้วกด Delete หากคุณเลือกที่จะเพิ่มวัตถุที่มีขนาดใหญ่กว่าเฟรมหลัก คุณจะต้องหลีกเลี่ยงการตั้งค่าเริ่มต้นของ Figma เพื่อให้สามารถทำได้ คุณสามารถทำได้โดยกดปุ่ม "Ctrl" สำหรับ Windows และ "Command" สำหรับ Mac

การทำสำเนาวัตถุ

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

1. แตะวัตถุที่คุณต้องการทำซ้ำ
   
2. กดปุ่ม "Ctrl" และ "D" พร้อมกันหากคุณมี Windows
   
3. สำหรับ Mac ให้ทำซ้ำโดยกดปุ่ม "Command" และ "D" ค้างไว้
   

การจัดวางวัตถุ

หากคุณไม่ชอบรูปลักษณ์ของเฟรมและการจัดระเบียบของวัตถุและส่วนประกอบภายในเฟรม คุณสามารถจัดเรียงใหม่ได้ หากคุณรวมสองชั้นเข้าด้วยกัน คุณต้องข้ามการตั้งค่าเริ่มต้นของ Figma โดยกด “Ctrl” สำหรับ Windows และ “Command” สำหรับ Mac เพื่อเข้าถึงตัวเลือกการเลือกแบบลึกและย้ายส่วนประกอบจากเลเยอร์เริ่มต้น อย่างไรก็ตาม หากเป็นเฟรมเดียว คุณสามารถเลือกวัตถุและย้ายไปที่อื่นได้ คล้ายกับการเพิ่มวัตถุ หรือใช้ปุ่มลูกศร

ระดับเค้าโครงอัตโนมัติ

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

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

1. เลือกหนึ่งเฟรมและทุกสิ่งที่คุณต้องการเพิ่ม
   
2. กด “Shift + A” เพื่อเพิ่มกรอบเค้าโครงอัตโนมัติ
   

ฟังก์ชั่นเค้าโครงอัตโนมัติ

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

ทิศทาง

ดังที่ชื่อบอก ทิศทางหมายถึงลำดับของวัตถุในเฟรม เมื่อใช้เค้าโครงอัตโนมัติ วัตถุสามารถวางได้:

• แนวตั้ง – วัตถุวางอยู่บนแกน y ตัวเลือกนี้เหมาะสำหรับรายการ เมนู ฟีดข่าว ฯลฯ
• แนวนอน – วัตถุและส่วนประกอบบนแกน x (ปุ่ม ไอคอน ฯลฯ)
• ตำแหน่งการตัดคำ – ออบเจ็กต์ถูกตั้งค่าในหลายคอลัมน์และแถว

ลำดับการซ้อน

คุณสามารถเลือกลำดับการซ้อนที่เหมาะกับเฟรมของคุณได้ดีที่สุด นี่เป็นการเปลี่ยนแปลงภาพเท่านั้นเนื่องจากลำดับการเรียงซ้อนยังคงเหมือนเดิม (หากเป็น 1,2,3 ก็จะยังคงเป็น 1,2,3 แต่มีการปรับเปลี่ยนภาพ) เมื่อวัตถุซ้อนกัน คุณสามารถเลือกได้ว่าวัตถุใดจะวางอยู่ด้านบน ตัวอย่างเช่น ถ้าคุณมีสามสิ่งที่ทำเครื่องหมาย 1, 2 และ 3 คุณสามารถเลือก 1 หรือ 3 ก็ได้ วิธีดำเนินการดังนี้:

1. เลือกกรอบเค้าโครงอัตโนมัติ
   
2. ไปที่ตัวเลือกเค้าโครงอัตโนมัติทางด้านขวาของหน้าจอ
   
3. แตะจุดแนวนอนสามจุดเพื่อเปิดตัวเลือกขั้นสูง
   
4. ค้นหาตัวเลือก "การซ้อนผ้าใบ"
   
5. เลือก “อยู่ด้านบนสุด” หรือ “อยู่ด้านบนสุด”
   

ตำแหน่งที่แน่นอน

คุณสมบัติ “Layer Flow” อีกประการหนึ่งคือตำแหน่งที่แน่นอน นอกเหนือจากลำดับและทิศทางการซ้อน คุณลักษณะนี้ช่วยให้คุณสามารถวางวัตถุได้ทุกที่ที่คุณต้องการ โดยไม่คำนึงถึงขอบเขตของเฟรม นี่คือวิธีการเปิดใช้งาน:

1. คว้าวัตถุแล้ววางไว้ภายในกรอบ
   
2. ในเมนูด้านขวา ถัดจากค่าสำหรับ "X" และ "Y" ให้แตะไอคอนที่มีลักษณะคล้ายสี่เหลี่ยมจัตุรัสที่ไม่มีขอบและมีเครื่องหมายบวกอยู่ด้านใน
   
3. ย้ายวัตถุตามแนวเส้นของกรอบ
   

การตั้งค่าช่องว่าง

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

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

การตั้งค่าการจัดตำแหน่ง

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

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

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

การปรับขนาด

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

คุณสามารถเลือกค่าคงที่หรือตั้งค่าเป็นขนาดสูงสุดหรือต่ำสุดที่เป็นไปได้สำหรับความกว้างและความสูง เนื้อหา Hug ช่วยให้คุณปรับขนาดของเฟรมตามวัตถุลูกได้ ในขณะที่ตัวเลือก Fill Container จะปรับขนาดวัตถุตามเฟรมหลัก

การสร้างเฟรมที่ไม่ซ้ำใครด้วยเค้าโครงอัตโนมัติ

เค้าโครงอัตโนมัติซึ่งเป็นหนึ่งในคุณสมบัติสำคัญของ Figma สามารถปรับกรอบและวัตถุและช่องภายในตามที่คุณต้องการได้ คุณสมบัติและคุณสมบัติของมันมีหลายประการ ทำให้คุณสามารถสร้างผลิตภัณฑ์ที่เหมาะสมและเรียบร้อยได้ Auto Layout เป็นเครื่องมือพื้นฐานที่คุณต้องเชี่ยวชาญก่อนที่จะทำงานใน Figma

คุณใช้ฟังก์ชันเค้าโครงอัตโนมัติใดมากที่สุด แจ้งให้เราทราบในส่วนความเห็นด้านล่าง