วิธีทำลิสต์จากไอเท็มที่มีองค์ประกอบซ้ำๆ (Repeat Grid)

April 21, 2019

เลือกไอเท็ม

เลือกไอเท็มที่เกิดจากการรวมกลุ่ม (Ctrl + G, Command + G) หรือเลือกไอเท็มหลายอันโดยการลากคลุม

สร้าง List / Grid

คลิกเมนู Repeat Grid ที่อยู่ใน Panel ด้านขวามือ

จากนั้นจึงขยายกรอบสีเขียวในแนวตั้งเพื่อทำเป็น ลิสต์ (List) หรือขยายทั้งแนวตั้งและแนวนอนเพื่อทำเป็น กริด (Grid)

ปรับช่องว่างระหว่างไอเท็ม

ลากพื้นที่ไฮไลต์สีชมพูเพื่อปรับช่องว่างระหว่างไอเท็ม

แก้ไขข้อความ

คลิก 2 ครั้งที่ลิสต์เพื่อเลือกไอเท็มที่ต้องการแก้ไข

คลิกอีก 2 ครั้งที่ Text เพื่อแก้ไขข้อความ ซึ่งการแก้ไขข้อความจะเป็นการแก้ไขเฉพาะข้อความของไอเท็มนี้ ไม่ใช่ข้อความทั้งลิสต์

แก้ไขรูปภาพ

คลิก 2 ครั้งที่ลิสต์เพื่อเลือกไอเท็มที่ต้องการแก้ไข

คลิกอีก 2 ครั้งที่รูปภาพ แล้วลากรูปภาพจาก Finder หรือ File Explorer มาใส่ ซึ่งการแก้ไขรูปภาพเช่นนี้จะเป็นการแก้ไขเฉพาะรูปภาพของไอเท็มนี้ ไม่ใช่ทั้งลิสต์

** หากเปลี่ยนมากกว่า 2 รูปขึ้นไป จะทำให้ไอเท็มที่อยู่ลำดับถัดจากรูปสุดท้ายที่เปลี่ยนมีรูปเดียวกับรูปแรก เช่น เปลี่ยนรูปให้ไอเท็มที่ 1 2 และ 3 ดังนั้นไอเท็มที่ 4 ก็จะใช้รูปเดียวกับไอเท็มที่ 1

แก้ไขลักษณะของไอเท็ม

การแก้ไขลักษณะของไอเท็ม เช่น สี เส้นกรอบ ขนาด เป็นต้น จะทำให้ทุกไอเท็มใน List/Grid นี้เปลี่ยนแปลงตามไปด้วยอย่างไม่สามารถหลีกเลี่ยงได้

ผลลัพธ์

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

ทำให้หน้าจอ Scroll ได้

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

ซึ่งสามารถขยายได้โดยการเลือกชื่อ Artboard จากนั้นจึงลากจุดที่ปรากฏขึ้นมา ในรูปที่ 1 จะสังเกตุว่าเมื่อขนาดดีไซน์สูงกว่าขนาดหน้าจอที่ตั้งไว้จะมีเส้นประสีฟ้าเกิดขึ้น เมื่อกด Preview หรือแชร์ให้คนอื่นดูจะสามารถ Scroll หน้าจอขึ้นลงได้

ระบบปฏิบัติการ: macOS Mojave
Adobe XD เวอร์ชัน: 18.0.12.9