วิธีทำลิสต์จากไอเท็มที่มีองค์ประกอบซ้ำๆ (Repeat Grid)
- เลือกไอเท็ม
- สร้าง List / Grid
- ปรับช่องว่างระหว่างไอเท็ม
- แก้ไขข้อความ
- แก้ไขรูปภาพ
- แก้ไขลักษณะของไอเท็ม
- ผลลัพธ์
- ทำให้หน้าจอ Scroll ได้
เลือกไอเท็ม
เลือกไอเท็มที่เกิดจากการรวมกลุ่ม (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