Graphic Design · GPC-34

ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5

6 hours 1 days

Last updated 25 Sep 2026

ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 is a 6-hour training course by IT Genius Institute. การออกแบบเว็บสมัยใหม่ ไม่ได้แค่ต้องการความสวยงามเพียงอย่างเดียวอีกต่อไป แต่การออกแบบที่ดียังต้องคำนึงถึงหลายเหตุปัจจัยประกอบด้วย…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 การออกแบบเว็บสมัยใหม่ ไม่ได้แค่ต้องการความสวยงามเพียงอย่างเดียวอีกต่อไป แต่การออกแบบที่ดียังต้องคำนึงถึงหลายเหตุปัจจัยประกอบด้วย ไม่ว่าจะเป็นเรื่องของการแสดงผลอุปกรณ์พกพา (mobile, tablet) โดยต้องออกแบบให้มีลักษณะเป็น Responsive web

เรื่องของความเร็วก็เป็นอีกองค์ประกอบสำคัญไม่แพ้กัน เว็บสวยแต่เข้าใช้งานได้ช้า ก็อาจถูกทอดทิ้งไว้ข้างหลังได้ นอกจากการเลือกใช้แนวทางในการออกแบบเว็บ นักพัฒนาและนักออกแบบจึงต้องใส่ใจในเรื่องความเร็วของเว็บในการเรียกใช้งานด้วย

เริ่มต้นจากเล่าแนวคิดในการออกแบบ แล้วพาใช้ Figma เครื่องมือออกแบบที่เหล่า UX/ UI Designerใช้มากที่สุดเป็นอันดับ 1 ในปี 2022 จากนั้นนำสิ่งที่ออกแบบเสร็จแล้วไปขึ้นโครงเว็บกันจริงๆ ด้วย Bootstrap 5 ซึ่งเป็นเวอร์ชั่นล่าสุดที่เน้นความเบา และเร็วขึ้นกว่าเดิมเยอะ

Objectives

เข้าใจแนวทางการออกแบบเว็บสมัยใหม่
สามารถทำ Prototype เชื่อมโยงหน้าเว็บเพจใน Figma ได้
สามารถจัดวาง layout แบบต่างๆ ใน Figma ได้
สามารถเขียน CSS ทำการ custom หน้าตาของ bootstrap ตามต้องการ

Who this course is for

ผู้ที่ต้องการออกแบบเว็บด้วยการใช้โปรแกรม Figma
UX/UI designer
Developers
กลุ่มผู้สนใจทั่วไป

Prerequisites

สามารถใช้งานระบบคอมพิวเตอร์และอินเทอร์เน็ตได้

Curriculum

แนวทางการออกแบบเว็บและการใช้โปรแกรม Figma

แนวทางการออกแบบเว็บสมัยใหม่
รู้จักการออกแบบ wireframe ก่อนเริ่มออกแบบจริง
แนะนำโปรแกรม Figma สำหรับการออกแบบเว็บ
เครื่องมือพื้นฐานที่ทุกคนควรรู้จักใน Figma
เรียนรู้การจัดวาง layout แบบต่างๆ ใน Figma
การสร้างชุดเมนู เส้นโค้ง จัดกลุ่มวัตถุ และการทำ masking เพื่อรวมรูปต่างๆ
การทำ Prototype เชื่อมโยงหน้าเว็บเพจใน Figma
การใส่ Animation และ Transition ต่างๆ ในการเปลี่ยนหน้า
การสร้างชุด Assets ไว้ใช้งานปรับคุณสมบัติให้วัตถุครั้งเดียวได้ทั้งหมด
การ Export ไฟล์ออกแบบไปใช้งานใน Bootstrap 5 กันต่อไป

การออกแบบเว็บสมัยใหม่ด้วย Bootstrap 5

ความเปลี่ยนแปลงใหม่ใน Bootstrap 5
เริ่มต้นใช้งานอย่างง่าย
เรียนรู้การวาง layout อย่างง่ายใน Bootstrap 5
การออกแบบเว็บด้วย flex box ใน Bootstrap 5
การสร้างเมนูนำทางอย่างรวดเร็ว
การสร้าง Slide ภาพแบบไม่ต้องมี jQuery
การทำงานกับแบบฟอร์ม
การทำงานกับตาราง
การทำงานกับ popup modal แบบใหม่ ไม่ต้องใช้ jQuery
การใช้งาน Components พื้นฐาน เช่น Alert, Badge, Button, Card, List, Tooltips เป็นต้น
การเขียน CSS ทำการ custom หน้าตาของ bootstrap ตามต้องการ
การทดสอบและปรับแต่งความเร็วในการใช้งานของเว็บที่ออกแบบมาให้เหมาะสมกับการนำไปใช้งานจริง
เรียนรู้การนำ Bootstrap ไปใช้งานกับ Framework อื่นๆ เช่น React JS และ Angular, Vue ต่อไป

Frequently asked questions

Who is ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 for, and what background is needed?

Built for ผู้ที่ต้องการออกแบบเว็บด้วยการใช้โปรแกรม Figma · UX/UI designer · Developers Background you should have: สามารถใช้งานระบบคอมพิวเตอร์และอินเทอร์เน็ตได้ Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does ออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 cost and how long does it run?

THB 3,500 (currently THB 3,150 on promotion). The course runs 6 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.