ออกแบบด้านกราฟิก · GPC-34

Modern Web Design with Figma and Bootstrap 5

หลักสูตร Modern Web Design with Figma and Bootstrap 5 เป็นการอบรมออกแบบหน้าเว็บใน Figma ด้วย Layout Grid, Components และ Prototype ให้ตรงกับ Bootstrap แล้วสร้างเป็นเว็บจริงด้วย Bootstrap 5.3 พร้อมโหมดมืด เหมาะกับ UX/UI Designer, Front-end Developer และผู้ดูแลเว็บ จบแล้วได้ Landing Page ที่ Responsive

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 3,150 บาท / ท่าน 3,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา6 ชั่วโมง · 1 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

เว็บไซต์ยุคนี้ต้องดูดีบนทุกขนาดหน้าจอ โหลดเร็ว และใช้งานได้กับทุกคน แต่หลายทีมยังออกแบบหน้าเว็บแบบภาพนิ่งแล้วส่งให้นักพัฒนาไปเดาเอง ระยะห่าง สี และขนาดตัวอักษรจึงไม่ตรงกับที่ออกแบบ หน้าเว็บพังเมื่อเปิดบนมือถือ และต้องแก้ไปมาหลายรอบ การออกแบบใน Figma โดยวางโครงให้ตรงกับระบบ Grid และ Components ของ Bootstrap ตั้งแต่ต้น ช่วยให้งานออกแบบกับโค้ดพูดภาษาเดียวกัน

หลักสูตรนี้พาผู้เรียนออกแบบหน้าเว็บใน Figma ตั้งแต่ Wireframe, Layout Grid 12 คอลัมน์, Styles, Variables, Components และ Prototype ที่เชื่อมหน้าเว็บ จากนั้นนำงานไปสร้างเป็นเว็บจริงด้วย Bootstrap 5.3 บน Vite ใช้ Grid, Utilities และ Components อย่าง Navbar, Card, Modal และฟอร์ม ปรับธีมด้วย Sass และ CSS Variables พร้อมโหมดมืด แล้วปิดท้ายด้วย Workshop แปลง Landing Page จาก Figma เป็นหน้าเว็บที่ Responsive และตรวจคุณภาพด้วย Lighthouse (อบรม 1 วัน 6 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เข้าใจแนวทางออกแบบเว็บสมัยใหม่แบบ Mobile-first ความเร็ว และ Accessibility
วาง Wireframe และ Layout Grid ใน Figma ให้ตรงกับ Grid และ Breakpoint ของ Bootstrap
สร้าง Styles, Variables, Components และ Prototype เชื่อมหน้าเว็บใน Figma ได้
สร้างโปรเจกต์ Bootstrap 5.3 และจัด Layout ด้วย Grid และ Utilities ได้
ใช้ Components ของ Bootstrap และปรับธีมด้วย Sass, CSS Variables และโหมดมืดได้
แปลงงานออกแบบจาก Figma เป็นหน้าเว็บ Responsive และตรวจคุณภาพด้วย Lighthouse ได้

หลักสูตรนี้เหมาะสำหรับ

UX/UI Designer ที่ต้องการออกแบบใน Figma ให้นักพัฒนานำไปทำเว็บได้ตรงแบบ
Front-end Developer ที่ต้องแปลงงานออกแบบเป็นหน้าเว็บด้วย Bootstrap
ผู้ดูแลเว็บไซต์ขององค์กรและฟรีแลนซ์ที่ทำเว็บไซต์ให้ลูกค้า
ผู้สนใจทั่วไปที่มีพื้นฐาน HTML และ CSS และอยากออกแบบเว็บได้เอง

พื้นฐานของผู้เข้าอบรม

เขียน HTML และ CSS เบื้องต้นได้ เช่น Tag พื้นฐาน Class และ Selector
ใช้คอมพิวเตอร์ เว็บเบราว์เซอร์ และจัดการไฟล์กับโฟลเดอร์ได้คล่อง
มีบัญชี Figma (แผน Starter แบบฟรีเพียงพอ) และเข้าใช้งานได้ก่อนวันอบรม
โน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตรออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 อบรม 1 วัน 6 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner เนื้อหาอัปเดตเป็น Bootstrap 5.3 ที่ใช้ CSS Variables และรองรับโหมดมืด ตั้งค่าโปรเจกต์ด้วย Vite และ Sass และปรับฝั่ง Figma ให้ใช้ Auto Layout, Variables และ

Components ตามหน้าจอปัจจุบัน โดยวาง Layout Grid ให้ตรงกับ Grid ของ Bootstrap ตั้งแต่ต้น ผู้เรียนใช้บัญชี Figma ของตนเอง แผน Starter แบบฟรีเพียงพอสำหรับ Lab ส่วน Dev Mode ต้องใช้แผนแบบเสียค่าใช้จ่ายจึงสาธิตเป็นภาพรวม ผู้เรียนจะได้เอกสารประกอบการอบรม ไฟล์ Figma ตัวอย่าง และโค้ดเฉลยทุก Lab กลับไปใช้งานต่อ

Day 1: จาก Figma สู่หน้าเว็บจริงด้วย Bootstrap 5.3

Section 1 แนวทางออกแบบเว็บสมัยใหม่

Mobile-first และ Responsive Design บนหน้าจอหลายขนาด
ความเร็วของเว็บและตัวชี้วัด Core Web Vitals ที่นักออกแบบควรรู้
Accessibility เบื้องต้น: Contrast ขนาดตัวอักษร และพื้นที่กด
วาง Wireframe ก่อนออกแบบจริงเพื่อตกลงโครงสร้างกับทีม

Section 2 Lab: Layout Grid ใน Figma ที่ตรงกับ Bootstrap

สร้าง Frame สำหรับมือถือ แท็บเล็ต และเดสก์ท็อปตาม Breakpoint ของ Bootstrap
ตั้ง Layout Grid 12 คอลัมน์ พร้อม Gutter และ Container ให้ตรงกับโค้ด
จัดส่วน Header, Hero, Feature และ Footer ด้วย Auto Layout
Lab: วาง Wireframe ของ Landing Page ทั้งสามขนาดหน้าจอ

Section 3 Lab: Styles, Variables และ Components

กำหนดสีหลักให้ตรงกับ Theme Color อย่าง Primary, Secondary และ Danger
Text Styles และระยะห่างที่สอดคล้องกับ Spacing Scale ของ Bootstrap
สร้าง Components ของปุ่ม การ์ด และ Navbar พร้อม Variants
ใช้ Variables ทำชุดสี Light และ Dark สำหรับโหมดมืด

Section 4 Lab: Prototype เชื่อมหน้าเว็บ

เชื่อมเมนูและปุ่มไปยังหน้าอื่นด้วย Connection และ Trigger
Overlay สำหรับเมนูมือถือและหน้าต่าง Modal
Transition แบบ Smart Animate และการเลื่อนไปยังส่วนต่าง ๆ ของหน้า
ทดสอบด้วย Present และแชร์ลิงก์ให้ทีมคอมเมนต์

Section 5 ส่งต่องานจาก Figma ไปเขียนโค้ด

Export ไอคอนเป็น SVG และภาพเป็น PNG หรือ JPG หลายขนาด
ดูค่าสี ฟอนต์ และระยะห่างจาก Properties Panel เพื่อนำไปเขียน CSS
ภาพรวม Dev Mode สำหรับส่งต่อให้นักพัฒนา และข้อจำกัดตามแผนที่ใช้
ใช้ AI ช่วยร่างโค้ดจากงานออกแบบอย่างระมัดระวังและตรวจผลทุกครั้ง

Section 6 Lab: เริ่มต้น Bootstrap 5.3

ของใหม่ใน Bootstrap 5.3: CSS Variables, Color Modes และคลาสสีแบบ Subtle กับ Emphasis
ติดตั้งผ่าน CDN และสร้างโปรเจกต์ด้วย npm, Vite และ Sass
นำเข้า JavaScript เฉพาะ Plugin ที่ใช้เพื่อลดขนาดไฟล์
Lab: หน้าเว็บแรกจาก Starter Template บน Vite

Section 7 Lab: Grid, Flex และ Utilities

Container, Row และ Column พร้อม Breakpoint sm, md, lg, xl และ xxl
จัดตำแหน่งด้วย Flex Utilities, Gap และ Order
Spacing, Typography, Display และ Utilities สำหรับซ่อนหรือแสดงตามหน้าจอ
Lab: แปลง Layout Grid จาก Figma เป็น Grid ของ Bootstrap

Section 8 Lab: Components ของ Bootstrap

Navbar ที่ยุบเป็นเมนูบนมือถือ และ Offcanvas
Card, Accordion, Carousel และ Modal
ฟอร์มพร้อม Floating Labels และการตรวจข้อมูลฝั่งเบราว์เซอร์
เปิดใช้ Tooltip และ Popover ด้วย JavaScript อย่างถูกวิธี

Section 9 Lab: ปรับธีมด้วย Sass, CSS Variables และโหมดมืด

เปลี่ยนสีหลักและฟอนต์ด้วยการ Override ตัวแปร Sass
ปรับเฉพาะจุดด้วย CSS Variables ของ Component
เปิดโหมดมืดด้วย data-bs-theme และปุ่มสลับธีม
ใช้ Bootstrap Icons และเลือกนำเข้าเฉพาะส่วนที่ใช้

Section 10 Workshop: แปลง Landing Page จาก Figma เป็นเว็บจริง

สร้าง Landing Page ตามแบบใน Figma ทั้ง Header, Hero, Feature, ฟอร์ม และ Footer
ทดสอบ Responsive บนหลายขนาดหน้าจอด้วย DevTools
ตรวจความเร็วและ Accessibility ด้วย Lighthouse แล้วปรับปรุง
Build ไฟล์สำหรับขึ้นเว็บจริง และภาพรวมสิ่งที่กำลังมาใน Bootstrap 6

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Wireframe คืออะไร ทำไมควรทำก่อนออกแบบหน้าเว็บจริง

Wireframe คือภาพร่างโครงหน้าเว็บแบบเรียบง่าย ใช้กล่องและเส้นแทนเนื้อหา เพื่อกำหนดว่าแต่ละส่วนอยู่ตรงไหนและผู้ใช้จะไล่สายตาอย่างไร โดยยังไม่ใส่สี รูปภาพ หรือฟอนต์จริง ในหลักสูตรนี้ทำ Wireframe ใน Figma บน Layout Grid 12 คอลัมน์ที่ตรงกับ Bootstrap ทีมจึงตกลงเรื่องโครงสร้างได้เร็ว และนักพัฒนานำไปทำเป็นโค้ดได้ตรงแบบตั้งแต่แรก

ทำ Prototype เชื่อมหน้าเว็บใน Figma ทำอย่างไร

เริ่มจากออกแบบแต่ละหน้าเป็น Frame แยกกัน จากนั้นสลับไปที่แท็บ Prototype เลือกปุ่มหรือเมนูที่ต้องการ แล้วลากเส้นเชื่อมไปยัง Frame ปลายทาง กำหนด Trigger เช่น On click และ Action เช่น Navigate to หรือ Open overlay สำหรับเมนูมือถือและ Modal เลือก Transition อย่าง Smart Animate แล้วกด Present เพื่อทดลองคลิกเหมือนเว็บจริงและแชร์ลิงก์ให้ทีมคอมเมนต์ได้

หลักสูตรนี้ใช้ Bootstrap รุ่นไหน ต่างจาก Bootstrap 5 รุ่นแรกอย่างไร

หลักสูตรใช้ Bootstrap 5.3 ซึ่งเป็นรุ่นเสถียรปัจจุบัน จุดเปลี่ยนสำคัญจาก Bootstrap 5 รุ่นแรกคือใช้ CSS Variables มากขึ้นทำให้ปรับธีมได้โดยไม่ต้อง Compile ใหม่ทุกครั้ง รองรับโหมดมืดด้วย data-bs-theme และเพิ่มคลาสสีแบบ Subtle และ Emphasis ส่วนแนวคิด Grid 12 คอลัมน์และการไม่พึ่ง jQuery ยังเหมือนเดิม Bootstrap 6 ยังอยู่ระหว่างพัฒนา จึงสรุปให้เห็นเพียงภาพรวม

หลักสูตรออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับ UX/UI Designer ที่อยากให้งานออกแบบนำไปทำเว็บได้ตรงแบบ, Front-end Developer ที่ต้องแปลงงานออกแบบเป็นหน้าเว็บ ผู้ดูแลเว็บไซต์ขององค์กร และฟรีแลนซ์ ผู้เรียนควรเขียน HTML และ CSS เบื้องต้นได้ มีบัญชี Figma ซึ่งใช้แผน Starter แบบฟรีได้ และนำโน้ตบุ๊กที่ติดตั้ง Node.js กับ VS Code ได้มาเรียน

เรียนจบหลักสูตรออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 แล้วทำอะไรได้บ้าง

ผู้เรียนจะออกแบบหน้าเว็บใน Figma ให้ตรงกับ Grid และ Components ของ Bootstrap ทำ Prototype เชื่อมหน้าเว็บ ส่งต่อไฟล์ให้นักพัฒนา สร้างโปรเจกต์ Bootstrap 5.3 ด้วย Vite ใช้ Grid, Utilities และ Components ปรับธีมด้วย Sass และ CSS Variables พร้อมโหมดมืด และได้ Landing Page ที่ Responsive จาก Workshop พร้อมผลตรวจ Lighthouse

จัดอบรมหลักสูตรออกแบบเว็บสมัยใหม่ด้วย Figma ร่วมกับ Bootstrap 5 ให้ทีมในองค์กรได้ไหม

ได้ สถาบันไอทีจีเนียสรับจัดอบรมแบบ In-house ให้ทีมออกแบบและทีมพัฒนาเว็บขององค์กร ปรับตัวอย่างและ Workshop ให้ใกล้กับเว็บไซต์หรือ Design System ที่องค์กรใช้อยู่ได้ และจัดได้ทั้งแบบ Onsite และ Online สอบถามรายละเอียดและขอใบเสนอราคาได้ทางช่องทางติดต่อของสถาบัน