Adobe XDTutorials

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

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

 

เลือกไอเท็ม

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

สร้าง List / Grid

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

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

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

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

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

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

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

แก้ไขรูปภาพ

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

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

เสร็จ

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *