วิธีทำ Slider menu Figma

[Aoranuch Phupaloy]

วิธีทำ Slider menu Figma
วิธีทำ Slider menu Figma จะง่ายกว่าการทำ Slider image Figma ยิ่งไปอีก เพราะเราสามรถสร้าง attribute ต่างๆ เช่น color, styles, size ไว้ใช้สำหรับการใช้งานได้ และสามารถ parent component ได้โดยการ copy จากคอมโพเน้นท์หลัก
วิธีการทำ Slider menu ของ Figma นั้นเป็นอะไรที่ง่ายมาก เราสามารถทำได้ภายใน 5 นาที มาดูวิธีทำกันค่ะ
วิธีที่ 1 สร้างเฟรม

สร้างเฟรม

- สร้างเฟรมมา 1 ตัว โดยจะลากขนาดความยามให้เท่ากันกับเฟรมเดิมของเรา

วิธีที่ 2 ใส่สีเฟรม

ใส่สีเฟรม

สไลด์เมนู2.png (136.39 KiB) Viewed 1870 times

- คลิกตรงเฟรมที่เราสร้างขึ้นแล้ว
- ใส่สีตรงแถบขวามือ
- ปรับขนาดที่เราต้องการ

วิธีที่ 3 ใส่ตัวอักษร หรือใส่ข้อความที่เราต้องการ

ใส่ตัวอักษร

- วิธีใส่ตัวอักษร ต้องคลิกตรงวงกลมสีแดงก่อน
- นำมาลากให้เป็นช่องสี่เหลี่ยมแบบในรูป

วิธีที่ 4 เชื่อม

เชื่อมหน้าจอ

- คลิกไปตรงแถบ Prototype ด้ายขวามือ

ขั้นตอนเชื่อมหน้าจอ 1

สไลด์เมนู6.png (100.17 KiB) Viewed 1870 times

- โยงเส้นจากปุ่มเมนู มายังอีกหน้า

ขั้นตอนเชื่อมหน้าจอ 2

สไลด์เมนู5.png (101.17 KiB) Viewed 1870 times

- เปลี่ยนจาก Navigate to เป็น open overlay

ตั้งค่า open overlay ให้เป็น manual

สไลด์เมนู7.png (106.68 KiB) Viewed 1870 times

- เปลี่ยนจาก open overlay ให้เป็น manual

จัดหน้าเฟรม

- ทำการจัดตำแหน่งเฟรมที่เป็นเมนู ให้อยู่ในตำแหน่งที่เราต้องการ

ตั้งค่าเป็น move in

- ตัว Animation ให้เลือกเป็น move in

แสดงผล

สไลด์เมนู10.png (59.24 KiB) Viewed 1870 times

- จากนั้นลองรันดู เราจะได้สไลด์เมนูที่เราต้องการแล้ว
และนี่ก็เป็นการทำสไลด์เมนูแบบง่ายๆนะคะ ทำได้ภายใน 5 นาที และทำง่ายกว่าตัว Adobe XD อีกค่ะ โดยสิ่งที่เราสร้างจะมีความสามารถเหมือนทุกอย่างที่ คอมโพเน้นหลักมี หมายความว่าเมื่อเรามีการแก้ไขคอมโพเน้นท์หลัก ตัวลูกจะมีการเปลี่ยนแปลงตามไปด้วย ซึ่งทำให้การทำสไลด์ต่างๆรวดเร็วนั่นเอง และยังแสดงผลแบบ Moblic app อีกด้วย แต่ทั้งก็ขึ้นอยู่ที่ว่าเราจะเลือกหน้าจอแบบไหน เราจะเลือกเป็น Web app ก็สามารถทำได้

[Duanghathai Termtem]

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

[Aoranuch Phupaloy]

Gimmicks Slider menu ของโปรแกรม Figma อย่างง่าย
วิธีทำ Slider menu Figma จะง่ายกว่าการทำ Slider image Figma ยิ่งไปอีก เพราะเราสามรถสร้าง attribute ต่างๆ เช่น color, styles, size ไว้ใช้สำหรับการใช้งานได้ และสามารถ parent component ได้โดยการ copy จากคอมโพเน้นท์หลัก
วิธีการทำ Slider menu ของ Figma นั้นเป็นอะไรที่ง่ายมาก เราสามารถทำได้ภายใน 5 นาที มาดูวิธีทำกันค่ะ
วิธีที่ 1 สร้างเฟรม

สร้างเฟรม

สไลด์เมนู1.png (84.73 KiB) Viewed 1843 times

- สร้างเฟรมมา 1 ตัว โดยจะลากขนาดความยามให้เท่ากันกับเฟรมเดิมของเรา

วิธีที่ 2 ใส่สีเฟรม

ใส่สีเฟรม

สไลด์เมนู2.png (136.39 KiB) Viewed 1843 times

- คลิกตรงเฟรมที่เราสร้างขึ้นแล้ว
- ใส่สีตรงแถบขวามือ
- ปรับขนาดที่เราต้องการ

วิธีที่ 3 ใส่ตัวอักษร หรือใส่ข้อความที่เราต้องการ

ใส่ตัวอักษร

สไลด์เมนู3.png (35.1 KiB) Viewed 1843 times

- วิธีใส่ตัวอักษร ต้องคลิกตรงวงกลมสีแดงก่อน
- นำมาลากให้เป็นช่องสี่เหลี่ยมแบบในรูป

วิธีที่ 4 เชื่อม

เชื่อมหน้าจอ

สไลด์เมนู4.png (41.31 KiB) Viewed 1843 times

- คลิกไปตรงแถบ Prototype ด้ายขวามือ

ขั้นตอนเชื่อมหน้าจอ 1

สไลด์เมนู6.png (80.13 KiB) Viewed 1843 times

- โยงเส้นจากปุ่มเมนู มายังอีกหน้า

ขั้นตอนเชื่อมหน้าจอ 2

สไลด์เมนู5.png (101.17 KiB) Viewed 1843 times

- เปลี่ยนจาก Navigate to เป็น open overlay

ตั้งค่า open overlay ให้เป็น manual

สไลด์เมนู7.png (106.68 KiB) Viewed 1843 times

- เปลี่ยนจาก open overlay ให้เป็น manual

จัดหน้าเฟรม

สไลด์เมนู8.png (102.06 KiB) Viewed 1843 times

- ทำการจัดตำแหน่งเฟรมที่เป็นเมนู ให้อยู่ในตำแหน่งที่เราต้องการ

ตั้งค่าเป็น move in

สไลด์เมนู9.png (60.4 KiB) Viewed 1843 times

- ตัว Animation ให้เลือกเป็น move in

แสดงผล

สไลด์เมนู10.png (59.24 KiB) Viewed 1843 times

- จากนั้นลองรันดู เราจะได้สไลด์เมนูที่เราต้องการแล้ว
และนี่ก็เป็นการทำสไลด์เมนูแบบง่ายๆนะคะ ทำได้ภายใน 5 นาที และทำง่ายกว่าตัว Adobe XD อีกค่ะ โดยสิ่งที่เราสร้างจะมีความสามารถเหมือนทุกอย่างที่ คอมโพเน้นหลักมี หมายความว่าเมื่อเรามีการแก้ไขคอมโพเน้นท์หลัก ตัวลูกจะมีการเปลี่ยนแปลงตามไปด้วย ซึ่งทำให้การทำสไลด์ต่างๆรวดเร็วนั่นเอง และยังแสดงผลแบบ Moblie app อีกด้วย แต่ทั้งก็ขึ้นอยู่ที่ว่าเราจะเลือกหน้าจอแบบไหน เราจะเลือกเป็น Web app ก็สามารถทำได้

[Aoranuch Phupaloy]

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

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