วิธีทำ Slider Image Figma

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

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

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

วิธีทำ Slider Image Figma

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

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

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

Re: วิธีทำ Slider Image Figma

Post by Duanghathai Termtem »

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

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

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

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

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

Re: วิธีทำ Slider Image Figma

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 23/12/2020 12:52 pm ชื่อบทความไม่สื่อถึงประโยชน์
ลิงค์เชื่อมส่วนเกริ่นไม่ครบ
แก้ไขแล้วค่ะ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 6 guests