สอนใช้ Figma AI ฉบับสมบูรณ์: จาก Make สร้างร่างถึง MCP ส่งมอบ กระบวนการออกแบบเปลี่ยนไปอย่างไรกันแน่

สิบโมงเช้า นักออกแบบของสตาร์ทอัพ SaaS แห่งหนึ่งในกรุงเทพฯ เปิด Figma เตรียมทำหน้าแพ็กเกจสมาชิกเวอร์ชันถัดไป แต่ก่อนเธอจะเปิดแคนวาสเปล่าแล้วนั่งเหม่อยี่สิบนาที ตอนนี้เธอพิมพ์ prompt ท่อนหนึ่ง เลือกดีไซน์ซิสเต็มของบริษัท สี่สิบวินาทีต่อมาบนหน้าจอก็มีทิศทางเลย์เอาต์สามแบบขึ้นมา

เธอจ้องดูสามวินาที แล้วพูดว่า "ไม่ถูกสักอัน แต่ฉันรู้แล้วว่าต้องแก้ไปทางไหน"

ประโยคนี้แหละคือคุณค่าที่แท้จริงของ Figma AI ในปี 2026 มันไม่ได้ช่วยคุณทำดีไซน์ที่ถูกออกมา แต่มันทำให้คุณเห็น "สิ่งที่ไม่ถูก" หน้าตาเป็นอย่างไรได้เร็วมาก และสำหรับงานออกแบบ คุณค่าของเรื่องนี้ถูกประเมินต่ำไปมาก

AI ของ Figma ตอนนี้มีอะไรบ้าง

กางแผนที่ก่อน ฟังก์ชัน AI ของ Figma ในปี 2026 ครอบคลุมทั้งการสร้างเนื้อหา การแก้ไขภาพ การค้นหาอัจฉริยะ การร่าง UI การส่งมอบโค้ด ไปจนถึงการสร้างทั้งเว็บ ส่วนหลัก ๆ มีดังนี้:

ดีไซน์เอเจนต์บนแคนวาส: สร้าง UI บนแคนวาสของคุณโดยตรง แทนที่จะโยนภาพให้คุณ

Make: แปลง prompt เป็นโค้ด จากคำอธิบายท่อนหนึ่งผลิตทิศทางที่ทำงานได้จริง

First Draft: สร้างร่างเลย์เอาต์ UI อย่างรวดเร็ว

การสร้างภาพและแทนที่เนื้อหา: สร้างภาพ และเปลี่ยนข้อความหลอกในดีไซน์ให้เป็นเนื้อหาที่ดูเข้าท่า

คำแนะนำ Auto layout: ตัดสินโครงสร้างการจัดวางอัตโนมัติ

MCP Server: สำหรับ coding agent ใช้ ให้เครื่องมือ AI เขียนโปรแกรมอ่านไฟล์ดีไซน์ของคุณเข้าใจ

Skills: ปรับแต่งคำสั่งของเอเจนต์ เท่ากับสอนวิธีทำงานของทีมคุณให้มัน

Sites: เผยแพร่เว็บไซต์

Draw: วาดภาพประกอบด้วยความช่วยเหลือของ AI

Buzz: ผลิตคอนเทนต์แบรนด์

รายการยาว แต่ในทางปฏิบัติที่ใช้ทุกวันจริง ๆ มีแค่สามถึงสี่ตัว ต่อไปนี้คือกระบวนการจริงที่ผมแนะนำ

ขั้นที่หนึ่ง: ช่วงระดมความคิดใช้ Make หรือ First Draft สร้างสามถึงสี่ทิศทาง

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

การใช้ที่ถูกคือผลิตทิศทางเป็นจำนวนมาก วิธีทำจริง:

เปิด Figma Make สร้างตัวเลือกเลย์เอาต์หลายแบบสำหรับฟังก์ชันใหม่ ใน prompt ต้องเขียนสองเรื่องให้ชัด คือความต้องการของผู้ใช้คืออะไร และเลือกดีไซน์ซิสเต็มของคุณ เรื่องที่สองหลายคนลืม แต่มันตัดสินว่าผลลัพธ์ใช้ได้หรือไม่ ไม่ระบุดีไซน์ซิสเต็ม AI จะให้ชุดสีและองค์ประกอบที่แปลกหน้าไปหมด ดูสวยแต่ไม่เกี่ยวกับผลิตภัณฑ์ของคุณเลย

สร้างเสร็จอย่ารีบเลือกอันที่สวยที่สุด เลือก "อันที่โครงสร้างใกล้สิ่งที่คุณต้องการที่สุด" ภาพแก้ทีหลังได้ โครงสร้างผิดต้องเริ่มใหม่ทั้งหมด

นิสัยของผมเองคือสร้างสี่อัน แล้วถามตัวเองว่า ถ้าเก็บได้อันเดียว ฉันจะเก็บอันไหน เก็บแล้วถามต่อว่า ทำไมฉันถึงเก็บมัน คำตอบของคำถามที่สองมักคือความต้องการที่แท้จริงของงานออกแบบครั้งนี้

ขั้นที่สอง: ย้ายเฟรมที่สร้างเข้าไฟล์งาน จัดระเบียบเลเยอร์ก่อน

ขั้นนี้น่าเบื่อที่สุด และคนข้ามมากที่สุด แล้วก็ไปจ่ายราคาตอนส่งมอบ

หลังลากเฟรมที่สร้างเข้าไฟล์งานของคุณแล้ว รันเครื่องมือ Rename layers ให้นักพัฒนาอ่านไฟล์ของคุณเข้าใจ ชื่อเลเยอร์ที่ AI สร้างมักเป็นอะไรอย่าง Frame 427, Group 88 วิศวกรเปิดมาแล้วมีแต่อยากร้องไห้

เรื่องนี้ในปี 2026 สำคัญกว่าเมื่อก่อน เพราะ MCP เมื่อ coding agent อ่านไฟล์ดีไซน์ของคุณโดยตรง การตั้งชื่อเลเยอร์ก็ไม่ใช่แค่เรื่องมารยาทอีกต่อไป มันคือเรื่องคุณภาพของอินพุต ตั้งชื่อมั่วซั่ว โค้ดที่ AI สร้างออกมาโครงสร้างก็จะมั่วตาม

ขั้นที่สาม: ใช้ Replace content เปลี่ยนข้อความหลอก

คลิก Replace content เปลี่ยนข้อความ placeholder ที่เหลือให้เป็นข้อมูลจริงที่ดูเข้าท่า

คุณค่าของขั้นนี้ไม่ได้อยู่ที่ประหยัดเวลา แต่อยู่ที่เผยปัญหา ข้อความหลอก (Lorem ipsum หรือ "ข้อความหัวเรื่อง") ทำให้ดีไซน์ทุกอันดูสมบูรณ์แบบ เพราะความยาวของทุกฟิลด์พอดีเป๊ะ เปลี่ยนเป็นข้อมูลจริงแล้วคุณถึงจะพบว่า "หัวเรื่องภาษาไทยนี้สองบรรทัดก็ล้นแล้ว" "ฟิลด์ราคานี้ใส่เลขสี่หลักบวกสกุลเงินไม่พอ"

นักออกแบบไทยยิ่งต้องระวังจุดนี้เป็นพิเศษ ความกว้างตัวอักษรไทยกับอังกฤษต่างกันมาก เลย์เอาต์ที่จัดด้วยข้อความหลอกภาษาอังกฤษ เปลี่ยนเป็นภาษาไทยมักพังทั้งหน้า ยิ่งพบเร็วยิ่งดี

ขั้นที่สี่: ตอนส่งมอบต่อ MCP เข้าไป

หากทีมของคุณใช้เครื่องมือ AI เขียนโปรแกรมอยู่ MCP Server ของ Figma คุ้มที่จะตั้งค่า มันให้ coding agent ได้ข้อมูลที่มีโครงสร้างของไฟล์ดีไซน์ ทั้งระยะห่าง สี ลำดับชั้นองค์ประกอบ แทนที่จะได้แค่ภาพสกรีนช็อตให้เดา

เรื่องนี้มีความหมายเป็นพิเศษกับทีมเล็กที่พบบ่อยในไทย สตาร์ทอัพไทยส่วนใหญ่ไม่มีฟรอนต์เอนด์ประจำ หลังส่งมอบดีไซน์มักเป็นวิศวกรฟูลสแตกค้นไปสร้างไป ช่องว่างเกิดตรงนี้เอง ต่อ MCP เข้าไป อย่างน้อยให้ AI ได้โครงสร้างแทนพิกเซล

ใช้ร่วมกับ Cursor หรือเครื่องมือ AI เขียนโปรแกรมอื่น เวิร์กโฟลว์จะกลายเป็น ออกแบบใน Figma จนสรุป → MCP ให้โครงสร้าง → coding agent ผลิตโค้ดเวอร์ชันแรก → วิศวกรแก้ ช่วงกลางที่ "ดูรูปแล้วค่อย ๆ สร้าง" จะสั้นลงชัดเจน

เทคนิคขั้นสูง: ใช้ Skills สอนกฎของทีมคุณให้มัน

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

สิ่งที่เขียนใส่ได้จริง เช่น ปุ่มของเราใช้มุมโค้ง 8 เสมอ เราไม่ใช้ดำสนิทเป็นสีข้อความ ข้อความ error ของฟอร์มวางใต้ฟิลด์เสมอ ระยะห่างใช้ทวีคูณของ 4 เท่านั้น

เขียนระเบียบการออกแบบของทีมเป็น Skills เท่ากับให้ทุกการสร้างปฏิบัติตามอัตโนมัติ เร็วกว่าไล่แก้ทีละอันทีหลังมาก และทำให้ผลผลิตของนักออกแบบระดับจูเนียร์มีคุณภาพเสถียรขึ้น

ข้อควรระวัง: สามเรื่องที่ Figma AI ยังทำไม่ได้ตอนนี้

หนึ่ง มันไม่เข้าใจผู้ใช้ของคุณ อินเทอร์เฟซที่ AI สร้างคือ "อินเทอร์เฟซที่ดูสมเหตุสมผล" ไม่ใช่ "อินเทอร์เฟซที่ผู้ใช้ของคุณต้องการ" มันไม่เคยเห็นใบงานบริการลูกค้าของคุณ ไม่เคยอ่านบทสัมภาษณ์ผู้ใช้ของคุณ ส่วนนี้ไม่มีทางลัด

สอง การออกแบบเพื่อการเข้าถึง (accessibility) ยังต้องคนตรวจ ความต่างของสี ลำดับการใช้คีย์บอร์ด ป้ายกำกับสำหรับ screen reader สิ่งที่ AI สร้างมักผ่านการตรวจไม่ได้ โปรเจกต์ภาครัฐของไทยมีข้อกำหนดเรื่องการเข้าถึง ส่วนนี้อย่าเชื่อค่าเริ่มต้นของ AI เด็ดขาด

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

ยังมีอีกเรื่อง ก่อนใช้เชิงพาณิชย์ต้องยืนยันการเป็นเจ้าของสิทธิ์ของเนื้อหาที่สร้างและแหล่งที่มาของวัสดุ วิธีที่ปลอดภัยกว่าคือใช้ผลผลิตของ AI เป็นร่างโครงสร้าง ส่วนองค์ประกอบภาพยังใช้วัสดุของตัวเองหรือที่มีสิทธิ์ชัดเจน

คำแนะนำเชิงปฏิบัติสำหรับนักออกแบบไทย

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

นักออกแบบฟรีแลนซ์ รู้สึกได้มากที่สุดในช่วงเสนองาน แต่ก่อนให้ลูกค้าดูสามทิศทางต้องใช้เวลาสองวัน ตอนนี้ครึ่งวันสร้างได้หกอัน แล้วเอาเวลาที่ประหยัดไปทำเวอร์ชันที่จะถูกจดจำจริง ๆ แต่ระวังกับดักหนึ่ง ลูกค้าจะคาดหวังว่าคุณ "ยังไงก็เร็ว" ราคาและกำหนดเวลาต้องเจรจาใหม่ ไม่งั้นคุณก็แค่ยกกำไรของตัวเองให้เขา

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

ส่วนเรื่อง "AI จะแทนนักออกแบบไหม" มุมมองของผมง่ายมาก มันแทนการกระทำ "วาดสิ่งที่คิดไว้แล้วในหัวออกมา" ซึ่งเป็นส่วนที่ไม่มีค่าที่สุดในงานออกแบบอยู่แล้ว นักออกแบบที่คิดไม่ออกว่าจะทำอะไร ใช้ AI ก็แค่ผลิตของไร้ประโยชน์ออกมาเร็วขึ้นและมากขึ้น

หากคุณอยากเริ่มจากพื้นฐานกว่านี้ ดู เครื่องมือสร้างภาพด้วย AI ก่อนได้ หรือไปที่ เทมเพลตพรอมป์ หา prompt ประเภทออกแบบที่นำไปใช้ได้เลย อยากนำ AI เข้าเวิร์กโฟลว์เต็มรูปแบบ คู่มืองาน มีวิธีที่จัดตามสถานการณ์

ความเห็นจาก TheAI Academy

การอัปเดตรอบนี้ของ Figma ทิศทางค่อนข้างสอดคล้องกัน มันไม่ได้คิดจะแทนวิจารณญาณของนักออกแบบ แต่กำจัดแรงเสียดทานช่วง "จากศูนย์เป็นหนึ่ง" ออกไป พร้อมกับอุดรอยแยกระหว่างดีไซน์กับโค้ด ส่วน MCP คือสิ่งที่ผมคิดว่าถูกประเมินต่ำที่สุด เมื่อ AI เริ่มอ่านไฟล์ดีไซน์โดยตรง คุณภาพของไฟล์ดีไซน์ก็กลายเป็นต้นน้ำของคุณภาพงานวิศวกรรม

ความเห็น: Figma AI ทำให้ "วาดเร็ว" กลายเป็นมาตรฐาน ดังนั้น "คิดถูก" จึงกลายเป็นความแตกต่างเพียงอย่างเดียว สิ่งที่นักออกแบบไทยควรกังวลไม่ใช่ถูก AI แทน แต่คือการวางตัวเองเป็น "ผู้ปฏิบัติงาน" ต่อไป ตำแหน่งนั้นกำลังหายไปจริง ๆ

คำแนะนำที่เป็นรูปธรรมสำหรับผู้อ่านในไทย สัปดาห์นี้เลือกงานจริงหนึ่งงาน บังคับตัวเองใช้ Make สร้างสี่ทิศทาง แล้วใช้เวลาเขียนว่า "ทำไมถึงไม่ถูกทั้งหมด" คุณจะพบว่ารายการนี้มีค่ามากกว่าดีไซน์สี่อันนั้นมาก เพราะมันคือวิจารณญาณการออกแบบของคุณ และนั่นคือสิ่งที่ AI ก็อปไม่ได้เลยในตอนนี้ อีกอย่าง ใช้เวลายี่สิบนาทีเขียนระเบียบการออกแบบของทีมเป็น Skills นี่คือการลงทุนครั้งเดียวที่ให้ผลตอบแทนสูงที่สุด

แหล่งข้อมูล

• Use AI tools in Figma Design – Figma Learn Help Center
• Figma AI Design Generator (หน้าผลิตภัณฑ์ทางการ)
• Figma AI in 2026: Everything it can do — and what it still can't (LogRocket)

เรียบเรียงจากข้อมูลสาธารณะ อ้างอิงตามคำอธิบายทางการ ฟังก์ชันและเนื้อหาแพ็กเกจอาจปรับตามการอัปเดตเวอร์ชัน อ้างอิงตามประกาศทางการของ Figma เป็นหลัก