วิธีทำ Slider Image Figma

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

วิธีทำ 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 2012 times
- เราจะสร้างรูปแบบขึ้นมาเพื่อรองรับรูปภาพ สามารถเลือกรูปแบบไหนก็ได้ที่เราต้องการ

2. Group
กรุ๊ปวัตถุ
กรุ๊ปวัตถุ
สไลด์ภาพ2.png (58.63 KiB) Viewed 2012 times
- ทำการเลือกวัตถุที่เราสร้างขึ้นมา
- คลิกขวา แล้วเลือกคำว่า Group Selection

3. ใส่รูปภาพ
ใส่รูปภาพ
ใส่รูปภาพ
- กดไปที่แถบรูปทรง แล้วเลือกคำว่า Place image
เลือกรูปภาพ
เลือกรูปภาพ
สไลด์5.png (84.59 KiB) Viewed 2012 times
- เลือกรูปภาพที่เราต้องการ
แสดงผล
แสดงผล
สไลด์ภาพ6.png (141.57 KiB) Viewed 2012 times
เมื่อแสดงผลแล้วเราจะเห็นได้ว่า มีจำนวนหน้าที่เราใส่รูปภาพ เราสามารถเลื่อนดูได้เลย
จะเห็นได้ว่าการทำสไลด์รูปภาพใน figma ง่ายนิดเดียวเพียงแค่ไม่กี่ขั้นตอนก็สามารถทำได้แล้ว แต่ในการทำสไลด์รูปภาพนี้จะมีส่วนของเส้นกรอบของวัถตุเข้ามาเกี่ยวข้องอยู่พอสมควร ถ้ากรณีที่เราจัดเส้นวัตถุไม่ตรงหรือไม่เท่ากัน จะทำให้การแสดงผลภาพสไลด์ผิดเคลื่อนไป และขนาดภาพจะไม่ตรงกับหน้าจอโมบายนี้
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: วิธีทำ Slider Image Figma

โพสต์ที่ยังไม่ได้อ่าน โดย Duanghathai Termtem »

ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นไม่ครบ
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีทำ Gimmicks Slider Image ของโปรแกรม Figma อย่างง่าย

โพสต์ที่ยังไม่ได้อ่าน โดย 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 1987 times
- เราจะสร้างรูปแบบขึ้นมาเพื่อรองรับรูปภาพ สามารถเลือกรูปแบบไหนก็ได้ที่เราต้องการ

2. Group
กรุ๊ปวัตถุ
กรุ๊ปวัตถุ
สไลด์ภาพ2.png (58.63 KiB) Viewed 1987 times
- ทำการเลือกวัตถุที่เราสร้างขึ้นมา
- คลิกขวา แล้วเลือกคำว่า Group Selection

3. ใส่รูปภาพ
ใส่รูปภาพ
ใส่รูปภาพ
- กดไปที่แถบรูปทรง แล้วเลือกคำว่า Place image
เลือกรูปภาพ
เลือกรูปภาพ
สไลด์5.png (84.59 KiB) Viewed 1987 times
- เลือกรูปภาพที่เราต้องการ
แสดงผล
แสดงผล
สไลด์ภาพ6.png (141.57 KiB) Viewed 1987 times
เมื่อแสดงผลแล้วเราจะเห็นได้ว่า มีจำนวนหน้าที่เราใส่รูปภาพ เราสามารถเลื่อนดูได้เลย
จะเห็นได้ว่าการทำสไลด์รูปภาพใน figma ง่ายนิดเดียวเพียงแค่ไม่กี่ขั้นตอนก็สามารถทำได้แล้ว แต่ในการทำสไลด์รูปภาพนี้จะมีส่วนของเส้นกรอบของวัถตุเข้ามาเกี่ยวข้องอยู่พอสมควร ถ้ากรณีที่เราจัดเส้นวัตถุไม่ตรงหรือไม่เท่ากัน จะทำให้การแสดงผลภาพสไลด์ผิดเคลื่อนไป และขนาดภาพจะไม่ตรงกับหน้าจอโมบายนี้
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: วิธีทำ Slider Image Figma

โพสต์ที่ยังไม่ได้อ่าน โดย Aoranuch Phupaloy »

Duanghathai Termtem เขียน: 23/12/2020 12:52 pm ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นไม่ครบ
แก้ไขแล้วค่ะ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 46