วิธีทำ Slider Image Figma

[Aoranuch Phupaloy]

วิธีทำ Slider Image Figma
Figma เป็นหนึ่งใน UI Design ที่ผู้ใช้ระบบปฏิบัติการ Windows เลือกใช้มากที่สุดเพราะมีฟีเจอร์การใช้งานที่หลากหลาย อำนวยความสะดวกตั้งแต่งานด้าน Graphic Design และ UX/UI Design รวมถึงการทำงานร่วมกับ Developer อีกด้วย
วิธีทำ Slider Image (ภาพสไลด์) ของ Figma
1. สร้างวัตถุ

สร้างวัตถุ

สไลด์ภาพ1.png (30.18 KiB) Viewed 135 times

- เราจะสร้างรูปแบบขึ้นมาเพื่อรองรับรูปภาพ สามารถเลือกรูปแบบไหนก็ได้ที่เราต้องการ

2. Group

กรุ๊ปวัตถุ

สไลด์ภาพ2.png (58.63 KiB) Viewed 135 times

- ทำการเลือกวัตถุที่เราสร้างขึ้นมา
- คลิกขวา แล้วเลือกคำว่า Group Selection

3. ใส่รูปภาพ

ใส่รูปภาพ

- กดไปที่แถบรูปทรง แล้วเลือกคำว่า Place image

เลือกรูปภาพ

สไลด์5.png (84.59 KiB) Viewed 135 times

- เลือกรูปภาพที่เราต้องการ

แสดงผล

สไลด์ภาพ6.png (141.57 KiB) Viewed 135 times

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

[Duanghathai Termtem]

ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นไม่ครบ

[Aoranuch Phupaloy]

วิธีทำ Gimmicks Slider Image ของโปรแกรม Figma อย่างง่าย
Figma เป็นหนึ่งใน UI Design ที่ผู้ใช้ระบบปฏิบัติการ Windows เลือกใช้มากที่สุดเพราะมีฟีเจอร์การใช้งานที่หลากหลาย อำนวยความสะดวกตั้งแต่งานด้าน Graphic Design และ UX/UI Design รวมถึงการทำงานร่วมกับ Developer อีกด้วย
วิธีทำ Slider Image (ภาพสไลด์) ของ Figma
1. สร้างวัตถุ

สร้างวัตถุ

สไลด์ภาพ1.png (30.18 KiB) Viewed 110 times

- เราจะสร้างรูปแบบขึ้นมาเพื่อรองรับรูปภาพ สามารถเลือกรูปแบบไหนก็ได้ที่เราต้องการ

2. Group

กรุ๊ปวัตถุ

สไลด์ภาพ2.png (58.63 KiB) Viewed 110 times

- ทำการเลือกวัตถุที่เราสร้างขึ้นมา
- คลิกขวา แล้วเลือกคำว่า Group Selection

3. ใส่รูปภาพ

ใส่รูปภาพ

- กดไปที่แถบรูปทรง แล้วเลือกคำว่า Place image

เลือกรูปภาพ

สไลด์5.png (84.59 KiB) Viewed 110 times

- เลือกรูปภาพที่เราต้องการ

แสดงผล

สไลด์ภาพ6.png (141.57 KiB) Viewed 110 times

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

[Aoranuch Phupaloy]

ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นไม่ครบ

แก้ไขแล้วค่ะ