หลักสูตร Figma to HTML & CSS Workshop เป็นการอบรมแบบเวิร์กชอปแปลงงานออกแบบใน Figma เป็นหน้าเว็บจริงด้วย HTML เชิงความหมายและ CSS สมัยใหม่ ทั้ง Flexbox, Grid และ Responsive พร้อมใช้ Bootstrap 5.3 เมื่อต้องการความเร็ว เหมาะกับ Developer และผู้มีพื้นฐานออกแบบเว็บ จบแล้วแปลงไฟล์ Figma เป็นเว็บไซต์ได้เอง
ทีมพัฒนาเว็บส่วนใหญ่ได้รับงานออกแบบมาเป็นไฟล์ Figma แต่การแปลงดีไซน์ให้เป็นหน้าเว็บที่ตรงแบบ แสดงผลดีทุกขนาดจอ และแก้ไขต่อได้ง่าย ต้องอาศัยทั้งการอ่านไฟล์ออกแบบเป็นและความเข้าใจ HTML กับ CSS สมัยใหม่ หากเขียนโค้ดโดยไม่วางแผน หรือพึ่ง Framework โดยไม่เข้าใจพื้นฐาน มักได้หน้าเว็บที่ใกล้เคียงแบบแต่ปรับแก้ยากเมื่อดีไซน์เปลี่ยน
เวิร์กชอปนี้ฝึกแปลงงานจาก Figma เป็นหน้าเว็บจริงทีละขั้น เริ่มจากอ่านไฟล์ Figma ส่งออกรูปภาพและไอคอน แปลง Variables และ Styles เป็น CSS Custom Properties เขียน HTML เชิงความหมาย จัด Layout ด้วย Flexbox และ Grid ให้ตรงกับ Auto Layout ทำ Responsive แบบ Mobile-first สร้างปุ่ม การ์ด และฟอร์ม รู้ว่าเมื่อไรควรใช้ Bootstrap 5.3 แล้วปิดท้ายด้วย Workshop แปลงเว็บไซต์ 3 หน้า ตรวจคุณภาพ และเผยแพร่ขึ้นใช้งานจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner to Intermediate)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Figma to HTML&CSS workshop อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบเวิร์กชอปลงมือทำ ระดับ Beginner to Intermediate ฉบับนี้เปลี่ยนจากการเรียน Tag และ Component ของ Bootstrap เป็นหลัก มาเน้น HTML เชิงความหมายและ CSS สมัยใหม่ ทั้ง Custom Properties, Flexbox, Grid, clamp() และ Container Query แปลงค่าจาก Variables ใน Figma ใช้ Bootstrap 5.3
เป็นทางเลือกเมื่อต้องการความเร็ว และเพิ่มการตรวจคุณภาพด้วย Lighthouse กับการเผยแพร่ ยังคง Workshop แปลงไฟล์ Figma เป็นเว็บไซต์ทีละขั้นตั้งแต่ Starter File จนขึ้นใช้งานจริง หลักสูตรนี้เน้นฝั่งนักพัฒนาที่รับไฟล์ Figma มาเขียนโค้ด ต่างจาก Modern Web Design with Figma and Bootstrap 5 ที่เน้นการออกแบบใน Figma ผู้เรียนใช้บัญชี Figma และ GitHub ของตนเอง และได้ Lab Guide ไฟล์ Figma ตั้งต้น และซอร์สโค้ดเฉลยกลับไปใช้งานต่อ
Section 1: Lab: เตรียมเครื่องมือและอ่านไฟล์ Figma
Section 2: วางแผนก่อนเขียนโค้ด
Section 3: Lab: HTML เชิงความหมาย
Section 4: CSS ที่ต้องใช้แปลงดีไซน์
Section 5: Lab: Layout ด้วย Flexbox และ Grid
Section 6: Responsive แบบ Mobile-first
Section 7: Lab: ปุ่ม การ์ด ฟอร์ม และ Interaction
Section 8: Bootstrap 5.3 เมื่อต้องการความเร็ว
Section 9: Workshop: แปลงเว็บไซต์ 3 หน้าจาก Figma
Section 10: Workshop: ตรวจคุณภาพและเผยแพร่
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
เริ่มจากศึกษาดีไซน์ทั้งหน้าแล้วแบ่งเป็นส่วน เช่น Header เนื้อหา และ Footer จากนั้นส่งออกรูปภาพและไอคอนจาก Figma แล้วกำหนดค่าส่วนกลางอย่างสี ฟอนต์ และระยะห่างเป็น CSS Custom Properties ก่อน แล้วจึงเขียน HTML เชิงความหมายทีละส่วน จัด Layout ด้วย Flexbox หรือ Grid ให้ตรงกับ Auto Layout ทำ Responsive แบบ Mobile-first และตรวจการแสดงผลบนหลายขนาดจอ หลักสูตรนี้ฝึกทุกขั้นตั้งแต่ Starter File จนเผยแพร่
คลิกเลือกวัตถุที่ต้องการแล้วดูแผงด้านขวา ซึ่งบอกขนาด สี ฟอนต์ น้ำหนักตัวอักษร และระยะบรรทัด ส่วนระยะห่างระหว่างวัตถุให้เลือกวัตถุหนึ่งแล้วกด Alt บน Windows หรือ Option บน Mac ค้างไว้ขณะชี้อีกวัตถุ Figma จะแสดงระยะเป็นพิกเซล ถ้าดีไซน์ใช้ Variables หรือ Styles ให้นำชื่อและค่าเหล่านั้นมาตั้งเป็น CSS Custom Properties ส่วน Dev Mode แสดงค่าเป็นโค้ดได้สะดวกกว่าแต่ต้องใช้แผนแบบเสียค่าใช้จ่าย
Auto Layout ใน Figma ทำงานใกล้เคียงกับ Flexbox ใน CSS มาก ทิศทางแนวนอนหรือแนวตั้งตรงกับ flex-direction ระยะระหว่างชิ้นตรงกับ gap ระยะขอบด้านในตรงกับ padding และการจัดตำแหน่งตรงกับ justify-content และ align-items ส่วนการตั้งค่า Fill container หรือ Hug contents เทียบได้กับการให้ชิ้นยืดเต็มพื้นที่หรือกว้างเท่าเนื้อหา สำหรับ Layout แบบตารางหลายแถวหลายคอลัมน์ CSS Grid จะเหมาะกว่า
ถ้าดีไซน์มีเอกลักษณ์เฉพาะ ต้องการให้ตรงแบบทุกพิกเซล และไฟล์เบา การเขียน CSS เองด้วย Flexbox, Grid และ Custom Properties มักง่ายและควบคุมได้ดีกว่า ส่วน Bootstrap 5.3 เหมาะเมื่อดีไซน์ใช้ Grid และ Component มาตรฐาน ต้องการทำงานเร็ว หรือทีมใช้ Bootstrap อยู่แล้ว โดยปรับสีและฟอนต์ผ่าน CSS Variables ของ Bootstrap ได้ หลักสูตรนี้สอนทั้งสองแนวทางและให้ฝึกเลือกตามโจทย์
เหมาะกับผู้ที่ต้องการแปลงงาน Figma เป็นหน้าเว็บ Developer ที่รับงานดีไซน์จากทีม UX/UI นักออกแบบเว็บที่อยากเขียนโค้ดเอง และผู้สนใจทั่วไปที่มีพื้นฐานการออกแบบเว็บ ควรใช้คอมพิวเตอร์ Windows หรือ macOS ได้ และมีพื้นฐานการออกแบบเว็บมาบ้าง ถ้าเคยเขียน HTML หรือ CSS มาก่อนจะเรียนได้เร็วขึ้น และควรมีบัญชี Figma ของตนเอง ซึ่งแผนฟรีเพียงพอสำหรับ Lab
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ใช้ไฟล์ Figma ของโครงการจริงหรือ Design System ขององค์กรเป็นโจทย์ใน Workshop ขอข้อเสนอการจัดอบรมได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449
ภาพถ่ายที่ดีเป็นหัวใจของงานประชาสัมพันธ์ ภาพสินค้า และภาพบุคคลบนเว็บไซต์กับโซเชียล แต่ภาพจากกล้องหรือมือถือมักมีปัญหาทั้งแสงไม่พอ สีเพี้ยน มีสิ่งรบกวนในฉาก หรือผิวและรายละเอียดที่ต้องเก็บ…
HTML และ CSS ในปัจจุบันทำได้มากกว่าการจัดหน้าเว็บ หลายงานที่เคยต้องใช้ไลบรารี JavaScript ขนาดใหญ่ เช่น Tooltip ที่เกาะตำแหน่งปุ่ม Animation ตามการเลื่อนหน้า การเปลี่ยนหน้าแบบนุ่มนวล หรือ Component ที่นำกลับมาใช้ซ้ำได้ ทำได้ด้วยความสามารถของเบราว์เซอร์เองแล้ว…
HTML และ CSS เป็นพื้นฐานของทุกหน้าเว็บ HTML5 ทำให้สร้างฟอร์ม ใส่เสียงและวิดีโอ และวางโครงสร้างหน้าเว็บได้โดยไม่ต้องพึ่งปลั๊กอินอย่าง Flash อีกต่อไป ส่วน CSS สมัยใหม่มี Flexbox, Grid และ Media Queries ที่ทำเว็บให้แสดงผลดีทุกขนาดจอ เมื่อเพิ่ม JavaScript และ…
