แนะนำการใช้งานโปรแกรม Figma สำหรับออกแบบหน้าจอเว็บ พร้อมใส่การเชื่อมโยงหน้าจอให้สามารถกดไปมาได้ รวมถึงการจัดการ event ของปุ่ม

รูปภาพที่ใช้ใน clip:
https://melivecode.com/file/?f=zip/fi...

สนับสนุนช่อง:
   / @melivecode  

พื้นที่โฆษณา
link สำหรับซื้อของใน shopee: https://shope.ee/30HCTjoOEV

00:00:00 เริ่มต้น
00:01:00 เข้าใช้งาน Figma
00:01:42 สร้างหน้าจอเปล่าๆ (Frame) สำหรับหน้า landing page
00:02:20 การ zoom in/out และเลื่อนหน้าจอด้วยล้อเมาส์
00:02:57 สร้างแถบ navigation bar (สอนใช้ Mask ตัดภาพเฉพาะส่วนให้มาอยู่ในกรอบ)
00:07:52 การใส่ข้อความและปุ่ม menu ใน navigation bar
00:13:08 การติดตั้ง plugin เพิ่ม (ลองใช้ iconify เพื่อใส่ icon ในหน้าจอ)
00:15:46 สร้างแถบ footer
00:17:04 สร้าง Component การ์ดข้อมูล เพื่อเป็นตัวต้นแบบเพื่อ copy มาใช้ต่อไป
00:25:13 สร้างหน้า detail page
00:28:47 สร้างการเชื่อมต่อระหว่างหน้าเพื่อให้ click ไปมาได้
00:31:54 ออกแบบให้ปุ่มมีการ animate เมื่อนำ mouse ไปวาง

อ.ผศ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต (https://it.rsu.ac.th/th/)

Follow Me
Youtube: ‪@melivecode‬
Facebook Page :   / melivecodepage  
Medium:   / karnyong  
Free API : https://www.melivecode.com/
Facebook :   / karnyong  
Instagram:   / melivecode  
Email : [email protected]

Music by Lesfm from Pixabay

#melivecode #figma #webdesign