วิธีทำ Slider menu Figma
วิธีทำ Slider menu Figma จะง่ายกว่าการทำ Slider image Figma ยิ่งไปอีก เพราะเราสามรถสร้าง attribute ต่างๆ เช่น color, styles, size ไว้ใช้สำหรับการใช้งานได้ และสามารถ parent component ได้โดยการ copy จากคอมโพเน้นท์หลัก
วิธีการทำ Slider menu ของ Figma นั้นเป็นอะไรที่ง่ายมาก เราสามารถทำได้ภายใน 5 นาที มาดูวิธีทำกันค่ะ
วิธีที่ 1 สร้างเฟรม
- สร้างเฟรมมา 1 ตัว โดยจะลากขนาดความยามให้เท่ากันกับเฟรมเดิมของเรา
วิธีที่ 2 ใส่สีเฟรม
- คลิกตรงเฟรมที่เราสร้างขึ้นแล้ว
- ใส่สีตรงแถบขวามือ
- ปรับขนาดที่เราต้องการ
วิธีที่ 3 ใส่ตัวอักษร หรือใส่ข้อความที่เราต้องการ
- วิธีใส่ตัวอักษร ต้องคลิกตรงวงกลมสีแดงก่อน
- นำมาลากให้เป็นช่องสี่เหลี่ยมแบบในรูป
วิธีที่ 4 เชื่อม
- คลิกไปตรงแถบ Prototype ด้ายขวามือ
- โยงเส้นจากปุ่มเมนู มายังอีกหน้า
- เปลี่ยนจาก Navigate to เป็น open overlay
- เปลี่ยนจาก open overlay ให้เป็น manual
- ทำการจัดตำแหน่งเฟรมที่เป็นเมนู ให้อยู่ในตำแหน่งที่เราต้องการ
- ตัว Animation ให้เลือกเป็น move in
- จากนั้นลองรันดู เราจะได้สไลด์เมนูที่เราต้องการแล้ว
และนี่ก็เป็นการทำสไลด์เมนูแบบง่ายๆนะคะ ทำได้ภายใน 5 นาที และทำง่ายกว่าตัว Adobe XD อีกค่ะ โดยสิ่งที่เราสร้างจะมีความสามารถเหมือนทุกอย่างที่ คอมโพเน้นหลักมี หมายความว่าเมื่อเรามีการแก้ไขคอมโพเน้นท์หลัก ตัวลูกจะมีการเปลี่ยนแปลงตามไปด้วย ซึ่งทำให้การทำสไลด์ต่างๆรวดเร็วนั่นเอง และยังแสดงผลแบบ Moblic app อีกด้วย แต่ทั้งก็ขึ้นอยู่ที่ว่าเราจะเลือกหน้าจอแบบไหน เราจะเลือกเป็น Web app ก็สามารถทำได้
วิธีทำ Slider menu Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: วิธีทำ Slider menu Figma
ชื่อเรื่องไม่สื่อถงประโยชน์ที่ผู้อ่านจะได้รับ
มีบางภาพขนาดเกิน 800 อยู่
ใช้สัญลักษณ์สีเขียวในภาพ
ลิงค์ส่วนสรุป ไม่ได้ลิงค์ไป บทความที่แนะนำให้ อ่าน
มีบางภาพขนาดเกิน 800 อยู่
ใช้สัญลักษณ์สีเขียวในภาพ
ลิงค์ส่วนสรุป ไม่ได้ลิงค์ไป บทความที่แนะนำให้ อ่าน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีทำ Gimmicks Slider menu ของโปรแกรม Figma อย่างง่าย
Gimmicks Slider menu ของโปรแกรม Figma อย่างง่าย
วิธีทำ Slider menu Figma จะง่ายกว่าการทำ Slider image Figma ยิ่งไปอีก เพราะเราสามรถสร้าง attribute ต่างๆ เช่น color, styles, size ไว้ใช้สำหรับการใช้งานได้ และสามารถ parent component ได้โดยการ copy จากคอมโพเน้นท์หลัก
วิธีการทำ Slider menu ของ Figma นั้นเป็นอะไรที่ง่ายมาก เราสามารถทำได้ภายใน 5 นาที มาดูวิธีทำกันค่ะ
วิธีที่ 1 สร้างเฟรม - สร้างเฟรมมา 1 ตัว โดยจะลากขนาดความยามให้เท่ากันกับเฟรมเดิมของเรา
วิธีที่ 2 ใส่สีเฟรม - คลิกตรงเฟรมที่เราสร้างขึ้นแล้ว
- ใส่สีตรงแถบขวามือ
- ปรับขนาดที่เราต้องการ
วิธีที่ 3 ใส่ตัวอักษร หรือใส่ข้อความที่เราต้องการ - วิธีใส่ตัวอักษร ต้องคลิกตรงวงกลมสีแดงก่อน
- นำมาลากให้เป็นช่องสี่เหลี่ยมแบบในรูป
วิธีที่ 4 เชื่อม - คลิกไปตรงแถบ Prototype ด้ายขวามือ - โยงเส้นจากปุ่มเมนู มายังอีกหน้า - เปลี่ยนจาก Navigate to เป็น open overlay - เปลี่ยนจาก open overlay ให้เป็น manual - ทำการจัดตำแหน่งเฟรมที่เป็นเมนู ให้อยู่ในตำแหน่งที่เราต้องการ - ตัว Animation ให้เลือกเป็น move in - จากนั้นลองรันดู เราจะได้สไลด์เมนูที่เราต้องการแล้ว
และนี่ก็เป็นการทำสไลด์เมนูแบบง่ายๆนะคะ ทำได้ภายใน 5 นาที และทำง่ายกว่าตัว Adobe XD อีกค่ะ โดยสิ่งที่เราสร้างจะมีความสามารถเหมือนทุกอย่างที่ คอมโพเน้นหลักมี หมายความว่าเมื่อเรามีการแก้ไขคอมโพเน้นท์หลัก ตัวลูกจะมีการเปลี่ยนแปลงตามไปด้วย ซึ่งทำให้การทำสไลด์ต่างๆรวดเร็วนั่นเอง และยังแสดงผลแบบ Moblie app อีกด้วย แต่ทั้งก็ขึ้นอยู่ที่ว่าเราจะเลือกหน้าจอแบบไหน เราจะเลือกเป็น Web app ก็สามารถทำได้
วิธีทำ Slider menu Figma จะง่ายกว่าการทำ Slider image Figma ยิ่งไปอีก เพราะเราสามรถสร้าง attribute ต่างๆ เช่น color, styles, size ไว้ใช้สำหรับการใช้งานได้ และสามารถ parent component ได้โดยการ copy จากคอมโพเน้นท์หลัก
วิธีการทำ Slider menu ของ Figma นั้นเป็นอะไรที่ง่ายมาก เราสามารถทำได้ภายใน 5 นาที มาดูวิธีทำกันค่ะ
วิธีที่ 1 สร้างเฟรม - สร้างเฟรมมา 1 ตัว โดยจะลากขนาดความยามให้เท่ากันกับเฟรมเดิมของเรา
วิธีที่ 2 ใส่สีเฟรม - คลิกตรงเฟรมที่เราสร้างขึ้นแล้ว
- ใส่สีตรงแถบขวามือ
- ปรับขนาดที่เราต้องการ
วิธีที่ 3 ใส่ตัวอักษร หรือใส่ข้อความที่เราต้องการ - วิธีใส่ตัวอักษร ต้องคลิกตรงวงกลมสีแดงก่อน
- นำมาลากให้เป็นช่องสี่เหลี่ยมแบบในรูป
วิธีที่ 4 เชื่อม - คลิกไปตรงแถบ Prototype ด้ายขวามือ - โยงเส้นจากปุ่มเมนู มายังอีกหน้า - เปลี่ยนจาก Navigate to เป็น open overlay - เปลี่ยนจาก open overlay ให้เป็น manual - ทำการจัดตำแหน่งเฟรมที่เป็นเมนู ให้อยู่ในตำแหน่งที่เราต้องการ - ตัว Animation ให้เลือกเป็น move in - จากนั้นลองรันดู เราจะได้สไลด์เมนูที่เราต้องการแล้ว
และนี่ก็เป็นการทำสไลด์เมนูแบบง่ายๆนะคะ ทำได้ภายใน 5 นาที และทำง่ายกว่าตัว Adobe XD อีกค่ะ โดยสิ่งที่เราสร้างจะมีความสามารถเหมือนทุกอย่างที่ คอมโพเน้นหลักมี หมายความว่าเมื่อเรามีการแก้ไขคอมโพเน้นท์หลัก ตัวลูกจะมีการเปลี่ยนแปลงตามไปด้วย ซึ่งทำให้การทำสไลด์ต่างๆรวดเร็วนั่นเอง และยังแสดงผลแบบ Moblie app อีกด้วย แต่ทั้งก็ขึ้นอยู่ที่ว่าเราจะเลือกหน้าจอแบบไหน เราจะเลือกเป็น Web app ก็สามารถทำได้
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีทำ Slider menu Figma
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑23/12/2020 11:56 am ชื่อเรื่องไม่สื่อถงประโยชน์ที่ผู้อ่านจะได้รับ
มีบางภาพขนาดเกิน 800 อยู่
ใช้สัญลักษณ์สีเขียวในภาพ
ลิงค์ส่วนสรุป ไม่ได้ลิงค์ไป บทความที่แนะนำให้ อ่าน
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 3 ตอบกลับ
- 2031 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 7:26 pm
-
-
โพสต์ใหม่ Banner Slider and Gallery Slider ทำแกลเลอรีแบบเลื่อนไปมาสวย ๆ ด้วย jQuery
โดย putcharaporn_tan » 05/08/2015 2:34 pm » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 1640 แสดง
-
โพสต์ล่าสุด โดย putcharaporn_tan
05/08/2015 2:34 pm
-
-
-
โพสต์ใหม่ [Extension phpBB3.1.1] Breadcrumb Menu หรือ pull down menu
โดย worachat » 03/06/2016 3:05 pm » ใน phpBB 3.1 Extension Review - 0 ตอบกลับ
- 1523 แสดง
-
โพสต์ล่าสุด โดย worachat
03/06/2016 3:05 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 81