Figma Make คืออะไร?
Figma Make คือเครื่องมือสร้างแอปด้วย AI ที่ฝังอยู่โดยตรงในแพลตฟอร์มของ Figma ซึ่งรับข้อความที่คุณพิมพ์เป็นพรอมต์แล้วสร้างแอปพลิเคชันฝั่งหน้าเว็บที่ใช้งานได้จริงและรองรับโค้ด โดยไม่ต้องออกจากพื้นที่ทำงานของ Figma หรือไปตั้งค่าเครื่องมือแยกต่างหาก
มันสร้างแอปพลิเคชัน React พร้อมเข้าถึงซอร์สโค้ดเต็มรูปแบบ มีประวัติเวอร์ชันอัตโนมัติ และมี URL สำหรับพรีวิวแบบสด และมันแตกต่างจากเครื่องมือสร้างด้วย AI อื่น ๆ ตรงที่ให้คุณเลือกโมเดลพื้นฐานที่ทำงานอยู่ได้เอง: Claude Sonnet 4.6, Gemini 3 Flash, Gemini 3.1 Pro หรือ GPT-5.5 แทนที่จะถูกล็อกไว้กับโมเดลเดียวโดยไม่เห็นว่าเบื้องหลังใช้อะไรอยู่
ผลลัพธ์ไม่ใช่เพียงโมกอัปหรือไฟล์ดีไซน์ แต่เป็นโค้ดจริงที่แก้ไขได้ ตรวจสอบได้ ปรับแต่งได้ และส่งไปยัง GitHub ได้
Figma Make เหมาะกับใคร?
- นักออกแบบผลิตภัณฑ์ที่ใช้งาน Figma อยู่แล้ว Make อยู่ในเครื่องมือที่คุณใช้อยู่แล้ว จึงไม่ต้องเรียนรู้แพลตฟอร์มใหม่หรือจ่ายค่าสมาชิกรายการเพิ่มจากที่คุณจ่ายอยู่แล้ว
- ผู้ก่อตั้งที่ไม่ถนัดเทคนิคแต่ต้องการเดโมเร็ว แอปหลายหน้าจอที่ซับซ้อนพร้อมการเข้าถึงตามบทบาทและข้อมูลสมจริงสามารถสร้างได้ภายในไม่ถึง 10 นาที ซึ่งเร็วพอสำหรับนำไปคุยกับนักลงทุนรอบแรก
- ผู้จัดการผลิตภัณฑ์ที่ต้องการแสดงให้เห็น ไม่ใช่แค่บอกเล่า Figma Make สร้างสิ่งที่คุณสามารถยื่นให้ผู้มีส่วนได้ส่วนเสียและพาเดินชมได้จริง แทนที่จะเป็น PDF ของหน้าจอ
- นักพัฒนาที่ต้องการโครงเริ่มต้นที่ใช้งานได้จริง โค้ดที่สร้างออกมาเป็น React พร้อม TypeScript ที่สะอาด และซอร์สโค้ดเต็มรูปแบบเข้าถึงได้บนแผนฟรี ทำให้มันเป็นจุดเริ่มต้นจริง ไม่ใช่ต้นแบบที่ทิ้งได้
ข้อดีและข้อเสียของ Figma Make
- สร้างแอปหลายหน้าจอที่ซับซ้อนจากพรอมต์เดียว
- แผนฟรีรวมการเข้าถึงซอร์สโค้ดเต็มรูปแบบ
- เลือกโมเดล AI ได้: Claude, Gemini หรือ GPT
- ประวัติเวอร์ชันอัตโนมัติบันทึกทุกการวนซ้ำของการสร้าง
- การยืนยันตัวตนแบบกำหนดบทบาทถูกสร้างขึ้นโดยอัตโนมัติโดยไม่ต้องสั่งเพิ่ม
- มีการเชื่อมต่อ GitHub และ Supabase ในตัวแบบเนทีฟ
- มีตัวแก้ไขแบบภาพและตัวแก้ไขโค้ดอยู่ในพื้นที่ทำงานเดียวกัน
- การสร้างครั้งแรกมาพร้อมคำเตือนของโค้ด
- โควตาเครดิตฟรีรายเดือนหมดเร็ว
- โดเมนแบบกำหนดเองต้องใช้แผน Figma แบบชำระเงิน
การประเมินคะแนน
คะแนนด้านล่างสะท้อนสิ่งที่ Figma Make ส่งมอบได้ในตอนนี้ ซึ่งยังอยู่ในเวอร์ชันเบตาสาธารณะ สำหรับผลิตภัณฑ์ในระยะนี้ คุณภาพของผลลัพธ์ดีกว่าที่ฉันคาดไว้มาก และสำหรับทีมที่อยู่บนแผน Figma แบบชำระเงินอยู่แล้ว เรื่องความคุ้มค่าถือว่าเถียงได้ยาก เพราะไม่มีค่าใช้จ่ายเพิ่ม
| ฟีเจอร์ | คะแนน (เต็ม 10) | เหตุผลของคะแนน |
|---|---|---|
| ความง่ายในการใช้งาน | 9.5 | ไม่ต้องตั้งค่า เริ่มจากพรอมต์เป็นหลัก มีเส้นทางการแก้ไขสองแบบ และรอบการสร้าง 8 นาที ทำให้เป็นหนึ่งใน AI builder ที่เริ่มใช้งานได้ง่ายที่สุด |
| ฟีเจอร์และฟังก์ชันการทำงาน | 9.8 | การยืนยันตัวตนตามบทบาท, UI การชำระเงินด้วย Stripe, รายงานหลายกราฟ, แดชบอร์ดผู้ดูแลระบบ, การเลือกโมเดล และเอกสารอ้างอิง REST API เต็มรูปแบบ ถูกสร้างมาจากพรอมต์เดียว |
| ดีไซน์และการปรับแต่ง | 9.4 | ผลลัพธ์ด้านภาพเริ่มต้นดูสะอาดและเป็นมืออาชีพ พร้อมทั้งมีทั้งตัวแก้ไขแบบคลิกเลือกองค์ประกอบและการเข้าถึงซอร์สโค้ดเต็มรูปแบบ แม้แต่ในแผนฟรี |
| ความคุ้มค่าคุ้มราคา | 9.4 | การเข้าถึงโค้ดเต็มรูปแบบในระดับฟรีถือว่าหาได้ยากจริง ๆ และผู้ใช้แผนชำระเงินได้ Make รวมอยู่ในสมาชิก Figma เดิมแทนที่จะเป็นค่าใช้จ่ายแยกต่างหาก |
| ประสิทธิภาพและความน่าเชื่อถือ | 9.9 | ใช้เวลาแปดนาทีเพื่อสร้างแอปหลายหน้าจอที่รู้จักบทบาทผู้ใช้ พร้อม UI ของ Stripe และแดชบอร์ดผู้ดูแลระบบ ถือเป็นอัตราส่วนระหว่างเวลา build กับผลลัพธ์ที่ใช้ได้จริงที่เร็วที่สุดที่ฉันทดสอบมา |
| โดยรวม | 9.6 | ผลิตภัณฑ์เบต้าที่โดดเด่นและทำได้ดีกว่า AI app builder จำนวนมากที่อยู่ในตลาดมานาน ทั้งด้านคุณภาพผลลัพธ์และความลึกของฟีเจอร์ |
ฟีเจอร์ของ Figma Make
- สร้างจากพรอมต์เป็นแอปภายในเวลาไม่ถึง 10 นาที
- เลือกหลายโมเดลได้ รวมถึง Claude, Gemini และ GPT
- สร้างการยืนยันตัวตนผู้ใช้ตามบทบาทโดยอัตโนมัติ
- ตัวแก้ไขแบบภาพที่คลิกเลือกองค์ประกอบได้พร้อมตัวควบคุมสไตล์แบบอินไลน์
- ซอร์สโค้ด React เต็มรูปแบบแก้ไขได้บนแผนฟรี
- การเชื่อมต่อ GitHub และ Supabase มีให้ใช้งานโดยไม่ต้องตั้งค่าเพิ่มเติม
- เผยแพร่ได้ด้วยคลิกเดียวไปยังซับโดเมน figma.site
รีวิว Figma Make ของฉันแบบตรงไปตรงมา: สิ่งที่พบหลังจากทดสอบ
หน้าจอเริ่มต้นไม่เกะกะสายตาทันที
หน้าจอแลนดิ้งเป็นกล่องพรอมต์เดี่ยว ๆ พร้อมคำโปรยสั้น ๆ: “ทำให้ไอเดียของคุณเป็นจริงด้วย AI เริ่มจากดีไซน์และพิมพ์พรอมต์ไปสู่ต้นแบบที่ใช้งานได้จริงอย่างรวดเร็ว” ใต้ช่องป้อนข้อมูลมีข้อเสนอเริ่มต้นสามรายการ:
- โฟลว์การออนบอร์ด
- แดชบอร์ดข้อมูล
- แกลเลอรีไล่เฉดสี
คุณสามารถไม่สนใจทั้งสามอย่างและพิมพ์อะไรก็ได้ที่คุณต้องการ
ฉันส่งพรอมต์นี้ไปแบบเต็ม ๆ:
“สร้างแพลตฟอร์มบริหารจัดการอสังหาริมทรัพย์สำหรับเจ้าของบ้านและผู้เช่า รวมการยืนยันตัวตนผู้ใช้ รายการทรัพย์สิน การจัดการสัญญาเช่า การชำระค่าเช่า คำขอซ่อมบำรุง การอัปโหลดเอกสาร การส่งข้อความ การแจ้งเตือน แดชบอร์ดผู้ดูแลระบบ การรายงาน การเชื่อมต่อ Stripe ฐานข้อมูล PostgreSQL REST API ดีไซน์แบบตอบสนอง และคำแนะนำการนำไปใช้งาน แอปพลิเคชันควรพร้อมใช้งานจริงและปรับขยายได้”

เครื่องมือนี้รับพรอมต์ได้โดยไม่มีอุปสรรคและเริ่มสร้างทันที ไม่มีตัวเลือกประเภทโปรเจ็กต์ ไม่มีแกลเลอรีเทมเพลต ไม่มีการตั้งค่าสถาปัตยกรรมล่วงหน้าใด ๆ ทั้งสิ้น
คำตัดสิน: จุดเริ่มต้นใกล้เคียงกับการไม่มีแรงเสียดทานมากที่สุดเท่าที่ฉันเคยทดสอบใน AI builder ตัวหนึ่ง ข้อแลกเปลี่ยนคือหากพรอมต์คลุมเครือ ผลลัพธ์ก็จะคลุมเครือเช่นกัน ขีดจำกัดของสิ่งที่คุณได้ขึ้นอยู่กับสิ่งที่คุณใส่เข้าไปทั้งหมด
การสมัครเร็วและไม่วางกำแพงจ่ายเงินขวางระหว่างคุณกับผลลัพธ์
การคลิกปุ่มลูกศรก่อนเข้าสู่ระบบจะเปิดโมดัล “ยินดีต้อนรับสู่ Figma” ตัวเลือกสองแบบคือ:
- ดำเนินการต่อด้วย Google (คลิกเดียว ใช้เวลาต่ำกว่า 10 วินาที)
- ดำเนินการต่อด้วยอีเมล (กรอกอีเมล ยืนยัน รวมเวลาน้อยกว่า 30 วินาที)

ทั้งสองเส้นทางจะพาคุณเข้าสู่พื้นที่ทำงานของ Figma Make โดยมีงาน build ของคุณถูกคิวไว้แล้ว ไม่มีหน้าจอเลือกแผน ไม่มีหน้าจอขอข้อมูลบัตรเครดิต และไม่มีประตูอัปเกรดในขั้นตอนนี้ แผน Starter ฟรีจะเปิดใช้งานโดยอัตโนมัติ
ถ้าคุณมีบัญชี Figma อยู่แล้ว โมดัลนี้จะไม่ปรากฏ และคุณจะเข้าสู่ตัวสร้างโดยตรง
การสร้างใช้เวลา 8 นาที และบอกคุณชัดเจนว่ากำลังทำอะไรอยู่
พื้นที่ทำงานแบ่งเป็นคอลัมน์แชตทางซ้ายและพรีวิวสดทางขวา พรีวิวแสดงพื้นที่ว่างพร้อมข้อความ “กำลังสร้างไอเดียของคุณ…” ตามด้วย “กำลังไล่รายละเอียด…” ขณะที่เครื่องมือทำงานไป

สิ่งที่ทำให้มันแตกต่างจากหน้าจอโหลดทั่วไปคือแผง reasoning ในคอลัมน์แชต ซึ่งบันทึกความคิดของเครื่องมือแบบเรียลไทม์
ระหว่างการสร้างของฉัน แผง reasoning แสดงว่า:
- เครื่องมือเรียกใช้ theme tool ก่อนเขียนโค้ดแม้แต่บรรทัดเดียว
- มันบันทึกว่า “ทำงานกับ 3 ไฟล์” ระหว่างประมวลผลพรอมต์
- บันทึก reasoning อธิบายแนวทางทั้งหมดของมัน: มันวางแผนฟีเจอร์ที่เหลืออยู่ (การกรองทรัพย์สิน การจัดการสัญญาเช่า ประวัติการชำระเงิน คำขอซ่อมบำรุง การส่งข้อความ การแจ้งเตือน และแดชบอร์ดผู้ดูแลระบบ) ระบุว่าจะจัดโครงสร้างคอมโพเนนต์ React ด้วย type definitions ก่อน จากนั้นค่อยสร้าง mock data ที่มีรายละเอียดสมจริง แล้วค่อยจัดการการนำทางและการจัดการสถานะสำหรับมุมมองตามบทบาทในทุกส่วน
- มีข้อความสถานะปรากฏใต้ reasoning: “กำลังเขียนโครงสร้างคอมโพเนนต์…”

ลำดับนั้นสำคัญ เครื่องมือวางแผน type definitions ก่อนที่จะเขียน UI ใด ๆ แล้วค่อยเพิ่ม mock data ที่สมจริง จากนั้นจึงสร้างการนำทางรอบ ๆ สิ่งนั้น
ไทม์ไลน์การสร้าง: 3:58 PM ถึง 4:06 PM แปดนาที
ตัวเลือกโมเดลที่ด้านล่างของแผงแชตให้คุณเลือก AI ที่จะใช้สร้างก่อนเริ่ม หรือสลับระหว่างงานสร้างได้:
| โมเดล | คำอธิบาย |
|---|---|
| Default | แนะนำโดย Figma (ไม่ได้เปิดเผยโมเดลเฉพาะ) |
| Claude Sonnet 4.6 | สมดุล มีประสิทธิภาพ |
| Gemini 3 Flash | เร็ว ทำงานแบบวนซ้ำได้ดี |
| Gemini 3.1 Pro | ลึกซึ้ง สร้างสรรค์ |
| GPT-5.5 | มีความสามารถ รวดเร็ว |
การสลับจากโมเดลที่ทำงานเร็วแบบวนซ้ำไปเป็นโมเดลที่ลงลึกกว่าโดยไม่ต้องออกจากเครื่องมือหรือสร้างใหม่ตั้งแต่ต้น เป็นข้อได้เปรียบด้านเวิร์กโฟลว์ที่มีนัยสำคัญ

นอกเหนือจากตัวเลือกโมเดลแล้ว ยังมีตัวสลับโหมด Build/Plan:
| โหมด | สิ่งที่ทำ |
|---|---|
| Build | สร้างและปรับแก้ไปตามทาง |
| Plan | ปรับให้สอดคล้องกับงานที่ซับซ้อนและวางแผนสถาปัตยกรรมก่อนเขียนโค้ด |
สำหรับพรอมต์ที่ละเอียดอย่างของฉัน โหมด Plan น่าจะให้ผลลัพธ์การสร้างครั้งแรกที่สะอาดกว่าและมีคำเตือนน้อยกว่า ฉันใช้โหมด Build และจัดการคำเตือนในรอบที่สอง

ผลลัพธ์ที่สร้างเสร็จชื่อ PropVault และดูมั่นใจสมชื่อ
แอปพลิเคชันที่สร้างเสร็จ ซึ่งเครื่องมือเรียกว่า PropVault โดยไม่ได้ถูกสั่งให้ทำ เป็นแพลตฟอร์มบริหารจัดการอสังหาริมทรัพย์หลายหน้าจอที่มีอัตลักษณ์ภาพสอดคล้องกัน แถบด้านข้างสีน้ำเงินกรมท่า ตัวพิมพ์ที่สะอาด และ social proof ตามบริบทบนหน้าล็อกอิน หน้าล็อกอินแสดง:
- แผงซ้ายสีเข้มพร้อมโลโก้ PropVault คำโปรย (“การจัดการอสังหาริมทรัพย์ที่ง่ายขึ้น”) และสถิติตัวอย่างสามรายการ: 86 properties managed, 1,240 active tenants, $2.1M collected monthly
- แผงขวาพร้อมแท็บ Sign In / Create Account อีเมลและรหัสผ่านที่กรอกไว้ล่วงหน้า (marcus@propvault.io) และปุ่มเลือกบทบาทสามปุ่ม: Landlord, Tenant, Admin
- หมายเหตุส่วนท้าย: “เดโม: คลิกบทบาทด้านบน แล้วลงชื่อเข้าใช้”

ทุกหน้าจอในเมนูนำทางด้านซ้ายเปิดเป็นหน้าจอที่ใช้งานได้จริงและมีข้อมูลใส่มาแล้ว นี่คือสิ่งที่ถูกสร้างขึ้นในแอปพลิเคชันทั้งหมด:
| หน้าจอ | สิ่งที่ถูกสร้าง |
|---|---|
| Dashboard | การ์ด KPI สี่ใบ (รายได้รายเดือน, อัตราการอยู่อาศัย, คำขอที่เปิดอยู่, จำนวนทรัพย์สินทั้งหมด), กราฟเส้นรายได้เทียบค่าใช้จ่าย 12 เดือนพร้อมป้าย “Live”, ฟีดกิจกรรมล่าสุด, แถบแจ้งเตือนการชำระเงินค้างพร้อมปุ่ม Send Reminders, สัญญาเช่าที่ใกล้หมดอายุพร้อมปุ่ม Renew รายการละปุ่ม |
| Properties | รายการทรัพย์สินพร้อมการกรอง |
| Leases | การจัดการสัญญาเช่าพร้อมการติดตามสถานะ |
| Payments | ตารางประวัติการชำระเงินพร้อมป้ายสถานะ, โมดัลการชำระเงินที่ปลอดภัยขับเคลื่อนด้วย Stripe |
| Maintenance | บอร์ดคัมบัง (Open / In Progress / Completed) พร้อมป้ายความสำคัญและการมอบหมายผู้รับเหมา; ฟอร์มส่งคำขอของผู้เช่า |
| Messages | UI แชตแบบสองพาเนลพร้อมเธรดการสนทนาสมจริงและรองรับการส่งด้วย Enter |
| Documents | พื้นที่อัปโหลดแบบลากและวาง, ปุ่มตัวกรองหมวดหมู่, กริดไฟล์พร้อมแอ็กชันเมื่อเอาเมาส์ชี้ |
| Reports | กราฟแท่ง, กราฟแนวนอนของการอยู่อาศัย, กราฟพายของงานซ่อมบำรุง, ตารางเมตริก KPI, ตัวสลับช่วงวันที่ (3m / 6m / 12m) |
| Admin Console | ตารางจัดการผู้ใช้, แผงสุขภาพระบบและอินทิเกรชัน, เอกสารอ้างอิง REST API เต็มรูปแบบ, คำแนะนำการนำไปใช้งาน (PostgreSQL, Docker, Vercel, การตั้งค่า Stripe webhook) |
ข้อมูลในทุกหน้าจอเป็นแบบจำลอง การเชื่อมต่อแบ็กเอนด์ต้องมีการกำหนดค่าเพิ่มเติมก่อนที่จะบันทึกหรือดึงข้อมูลจริงได้ สิ่งที่คุณมีหลังจากแปดนาทีคือโครงสร้างฝั่งหน้าบ้านคุณภาพระดับโปรดักชันพร้อมความครอบคลุมหน้าจอและความหนาแน่นของข้อมูลมากพอสำหรับใช้เดินอธิบายในฐานะเดโมที่ใช้งานได้
ทั้งสามบทบาทผู้ใช้ถูกแบ่งขอบเขตได้ถูกต้อง และรายละเอียดของแต่ละบทบาทก็น่าประทับใจ
การควบคุมการเข้าถึงตามบทบาทเป็นจุดที่ AI builder มักตัดมุม Figma Make ไม่ได้ทำเช่นนั้น แต่ละบทบาทจะล็อกอินเข้าสู่ประสบการณ์ที่แตกต่างกันโดยสิ้นเชิง มีการนำทางของตัวเอง มีมุมมองข้อมูลของตัวเอง และมีขอบเขตของตัวเอง
| บทบาท | รายการนำทาง | โฟกัสของแดชบอร์ด |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | เมตริกทั้งแพลตฟอร์มครอบคลุมทุกทรัพย์สินและผู้เช่า |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | เมตริกส่วนตัวสำหรับผู้เช่ารายนี้เท่านั้น |
| Admin (Cassandra Voss) | ทุกรายการของ Landlord รวม Admin | เหมือนแดชบอร์ดของ Landlord แต่เข้าถึง Admin Console ได้ |
รายละเอียดของแดชบอร์ด Landlord:
- Monthly Revenue: $41,900 (Apr 2024, +2.8% vs last month)
- Occupancy Rate: 88% (76/86 units, +1.2% vs last month)
- Open Requests: 5 maintenance tickets
- Total Properties: 6 properties, 86 total units
- กราฟ Revenue vs. Expenses ครอบคลุม May ถึง April (12 months)
- ฟีดกิจกรรมล่าสุด: รับค่าเช่าแล้ว, การชำระเงินล่าช้า, คำขอซ่อมบำรุงใหม่, สัญญาเช่าที่ใกล้หมดอายุ, ข้อความจากผู้เช่า
- แถบแจ้งเตือน: “2 overdue payments require attention” พร้อมระบุชื่อ Tomás Reyes ($2,100) และ Fatima Al-Sayed ($2,650) และมีปุ่ม Send Reminders

รายละเอียดของแดชบอร์ด Tenant (Priya Nair):
- Next Payment: $1,850, due April 1, 2024
- Lease Status: Active, ends August 31, 2024
- Open Requests: 1 (HVAC repair pending)
- Messages: 2 unread
- ประวัติการชำระเงินแสดง Maple Grove #4B, $1,850, Paid
- คำขอซ่อมบำรุงแสดง “HVAC not cooling,” ป้าย In Progress, วันที่ March 28, 2024

หน้าจอ Payments ในบทบาท Tenant จะเปิดโมดัลที่มีแบรนด์ Stripe เมื่อคลิก “Pay Now”:
- หัวข้อ: “Secure Payment. Powered by Stripe.”
- รายการชำระเงิน: April Rent, Maple Grove #4B, $1,850.00
- ช่อง Card Number (จัดรูปแบบไว้ล่วงหน้า)
- ช่อง Expiry (MM/YY) และ CVC
- ปุ่ม Pay ที่ติดป้ายไว้ล่วงหน้า: “Pay $1,850.00”
- ส่วนท้าย: “256-bit SSL encryption · PCI DSS compliant”

Admin Console (Cassandra Voss):
Admin Console มีสี่แท็บ (Users, System, API Docs, Deployment) และเปิดมาที่ตาราง User Management

แต่ละแถวมีปุ่มแก้ไขและลบปัจจัย Invite User อยู่มุมขวาบนของตาราง Tomás Reyes ถูกระบุอย่างถูกต้องว่า Delinquent สอดคล้องกับแถบแจ้งเตือนการชำระเงินค้างในแดชบอร์ดของ Landlord
การแก้ไขใช้สองเครื่องมือคู่ขนานและทั้งคู่เข้าถึงได้ฟรี
หลังจากสร้างเสร็จ มีเส้นทางการแก้ไขสองแบบพร้อมกัน และไม่มีแบบใดถูกล็อกไว้หลังแผนชำระเงิน
เส้นทางที่ 1: ตัวแก้ไขแบบภาพ
- คลิกองค์ประกอบใดก็ได้ในพรีวิวสดเพื่อเลือกมันและเปิดแถบแก้ไขลอย
- แถบแก้ไขมี: ตัวเลือก font family, font size (พร้อมปุ่มลบและบวก), ตัวหนา, ตัวเอียง, การจัดแนวข้อความ, ตัวควบคุมความกว้าง, ระยะห่าง และการลบองค์ประกอบ
- องค์ประกอบที่เลือกจะถูกเพิ่มเข้าไปในช่องป้อนแชตพร้อมกัน ดังนั้นการคลิกองค์ประกอบแล้วพิมพ์ในแชตจะส่งคำขอเปลี่ยนแปลงโดยมีองค์ประกอบนั้นอยู่ในบริบทแล้ว
- การเลือกคอนเทนเนอร์จะแสดงประเภทคอมโพเนนต์และการซ้อนกันที่แน่นอน (เช่น “div x 4”) เหนือทูลบาร์ ให้บริบทของเลย์เอาต์อย่างแม่นยำโดยไม่ต้องเปิดโค้ด

การเชื่อมระหว่างตัวเลือกแบบภาพกับช่องป้อนแชตเป็นส่วนที่ใช้งานได้จริงที่สุดของเวิร์กโฟลว์การแก้ไขนี้
คุณไม่จำเป็นต้องเลือกอย่างใดอย่างหนึ่ง คุณคลิกเพื่อระบุองค์ประกอบ จากนั้นพิมพ์ในแชตเพื่ออธิบายสิ่งที่คุณต้องการเปลี่ยน และ AI จะนำไปใช้โดยเข้าใจเต็มที่ว่าคุณเลือกคอมโพเนนต์ใดอยู่
เส้นทางที่ 2: ตัวแก้ไขโค้ด
การคลิกไอคอนโค้ดที่ด้านบนของพื้นที่ทำงานจะเปิดซอร์ส React เต็มรูปแบบ โครงสร้างไฟล์:
src/
app/
components/
App.tsx (1,300+ lines)
styles/
fonts.css
globals.css
index.css
tailwind.css
theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx ถูกจัดเป็นฟังก์ชันมุมมองที่มีชื่อ (DashboardView, ReportsView, MaintenanceView และอื่น ๆ) พร้อมคอมเมนต์แบ่งส่วนสำหรับแต่ละหน้าจอ
โค้ดอ่านง่าย มีโครงสร้างดี และแก้ไขได้โดยตรงในเบราว์เซอร์ ไม่ต้องดาวน์โหลดหรือเปิด IDE ภายนอก การเข้าถึงซอร์สโค้ดเต็มรูปแบบนี้มีให้บนแผนฟรี
การเปลี่ยนแปลงที่ทำผ่านตัวแก้ไขแบบภาพ แชต หรือโค้ด ล้วนไหลเข้าสู่พรีวิวสดเดียวกันและสะท้อนทันที
คำเตือนมากกว่า 10 รายการใน build ครั้งแรก ถูกแก้ได้ถูกต้องในคลิกเดียว
หลังจาก build แรกเสร็จ แบนเนอร์ปรากฏที่ด้านล่างของแผงแชต: “10+ warnings” พร้อมปุ่ม “Fix for me” และไอคอนปิด

การเปิดคอนโซลเบราว์เซอร์ (เข้าถึงได้ผ่านไอคอนคอนโซลในพื้นที่ทำงาน) แสดงสาเหตุ: duplicate SVG gradient IDs ในไลบรารี Recharts
สาเหตุ: ส่วน Dashboard และ Reports ทั้งคู่ลงทะเบียนชื่อ gradient ทั่วไปเดียวกัน (revGrad, expGrad) เป็น SVG elements Recharts ลงทะเบียน gradients ด้วย ID เข้าไปใน namespace ของ SVG ดังนั้นชื่อทั่วไปจากหลายอินสแตนซ์ของกราฟจึงชนกันในเอกสารเดียวกัน คอนโซลแสดงรายการอ้างอิง JavaScript ที่ถูกย่อจำนวนมาก ซึ่งไล่ย้อนกลับไปยังความขัดแย้งนี้ทั้งหมด
การคลิก “Fix for me” จะทริกเกอร์การสร้างอีกรอบ เครื่องมือระบุปัญหาเฉพาะสามข้อและแก้ไขแบบเจาะจง:
- Dashboard AreaChart: เปลี่ยนชื่อ gradient ID จาก revGrad / expGrad ที่เป็นชื่อทั่วไปเป็น dash-area-rev / dash-area-exp ที่ไม่ซ้ำกัน เพื่อป้องกันการชนกันของ namespace
- Occupancy BarChart: เปลี่ยน cell keys จากตัวเลขดัชนี (key={i}) เป็น stable string keys โดยใช้ชื่อ property (key={\occ-${entry.property}`}) เพื่อให้แต่ละ cell มีคีย์ที่เสถียรและไม่ซ้ำกัน
- Maintenance PieChart: ใช้การแก้คีย์แบบเดียวกันโดยใช้ชื่อรายการ (key={\pie-${entry.name}`})

การสร้างครั้งนี้ถูกบันทึกอัตโนมัติเป็น Version 2 แผงประวัติเวอร์ชัน (เข้าถึงได้โดยคลิกป้ายเวอร์ชันที่ด้านบนของพื้นที่ทำงาน) แสดงบันทึกที่ชัดเจน:
| เวอร์ชัน | ป้ายกำกับ | เวลา |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
หลังจากรอบที่สอง คอนโซลแสดงเพียงข้อความ hot-reload ของ vite ที่สะอาด และแถบคำเตือนก็หายไป การย้อนกลับไปยัง Version 1 ทำได้ด้วยคลิกเดียวจากแผงประวัติเวอร์ชัน

รอบแก้ไขทั้งหมดตั้งแต่ build แรกจนถึงคอนโซลสะอาดใช้เวลา 13 นาที โดยไม่ต้องแก้โค้ดด้วยมือเลย
แผงการตั้งค่ามีความลึกมากกว่าที่คาดจากเครื่องมือเบตา
แผงการตั้งค่าเข้าถึงได้ผ่านไอคอนเฟืองที่มุมขวาบนของพื้นที่ทำงาน เมนูแบบดรอปดาวน์จัดตัวเลือกออกเป็นสองกลุ่ม:
การตั้งค่า Make:
- General
- Domains
- Fonts
- Chat preferences
- Audio

Integrations:
- GitHub
- Supabase
- Adjust guidelines
General settings ครอบคลุมสถานะการเผยแพร่และการตั้งค่า SEO:
| การตั้งค่า | รายละเอียด |
|---|---|
| Status | ยังไม่ได้เผยแพร่ (มีปุ่ม Publish ให้ใช้งานได้แบบอินไลน์) |
| Title | ชื่อโปรเจ็กต์ที่แก้ไขได้ |
| Meta description | เติมให้อัตโนมัติตามบริบทของการสร้าง |
| Language | ช่องรหัสภาษา ISO |
| Google Analytics ID | เชื่อมต่อพร็อพเพอร์ตี GA4 เพื่อการติดตามทราฟฟิก |
| Exclude from search engine results | เช็กบ็อกซ์ ถูกติ๊กไว้เป็นค่าเริ่มต้นในแผนฟรี |
| Clear chat context | ล้างความจำการสนทนาของ Make อย่างถาวร; ประวัติแชตยังคงมองเห็นได้ |
ตัวเลือก Clear chat context ควรทำความเข้าใจ มันจะล้างความจำของ AI เกี่ยวกับบทสนทนาการสร้างโดยไม่ลบบันทึกแชตที่มองเห็นได้ วิธีนี้มีประโยชน์เมื่อเธรดการสร้างที่ยาวกำลังทำให้ AI ยึดติดกับบริบทเก่าในการร้องขอเปลี่ยนแปลงใหม่

Domains settings แสดง:
- Base domain: example.figma.site (ซับโดเมนฟรี จะเปิดใช้งานเมื่อเผยแพร่)
- Connected domains: ตัวเลือกในการเพิ่มโดเมนแบบกำหนดเองจากผู้ให้บริการภายนอก (ต้องใช้แผนชำระเงิน)
Integrations:
- GitHub: ส่งออกโค้ดและซิงก์กับรีโพซิทอรี
- Supabase: เชื่อมต่อแบ็กเอนด์และฐานข้อมูลจริงเพื่อแทนที่เลเยอร์ข้อมูลแบบจำลอง
- Adjust guidelines: ตั้งคำสั่งกำหนดเองที่ AI จะทำตามเมื่อแก้ไข ครอบคลุมสิ่งต่าง ๆ เช่น มาตรฐาน component library, แนวทางการตั้งชื่อ หรือข้อจำกัดด้านดีไซน์ที่คุณต้องการให้รักษาไว้ในทุกการสร้างและการปรับแก้
ตัวเลือก Adjust guidelines เป็นส่วนเสริมที่มีความหมาย ซึ่งส่วนอื่นของเครื่องมือไม่ได้แสดงไว้อย่างเด่นชัด มันให้คุณกำหนดว่า AI ควรทำงานอย่างไรก่อนเริ่ม build แทนที่จะต้องไปแก้แพทเทิร์นที่ไม่ต้องการทีหลัง
การเผยแพร่ใช้คลิกเดียว และ URL ของแผนฟรีดูเหมือนแอปเดี่ยวจริง
การคลิกปุ่ม Publish ที่มุมขวาบนจะเปิดแผงที่ครอบคลุมทุกอย่างที่ต้องใช้เพื่อไปออนไลน์:
| ฟิลด์ | รายละเอียด |
|---|---|
| Title | ชื่อโปรเจ็กต์ที่แก้ไขได้ |
| URL | example.figma.site |
| Status | ยังไม่ได้เผยแพร่ |
| Feature on Community | ตัวสลับเพื่อแสดงแอปในแกลเลอรี Figma Community |
ตัวสลับ Feature on Community จะขยายส่วนพรีวิวที่แสดงให้เห็นว่าแอปจะปรากฏอย่างไรใน Figma Community เมื่อเทียบกับแอปที่เผยแพร่อื่น ๆ

จากตรงนี้:
- คุณสามารถเลือกแท็กได้สูงสุดห้ารายการเพื่อจัดหมวดหมู่แอป (ตัวเลือกมี Apps, Dashboards และอื่น ๆ ผ่าน “Show more”)
- เช็กบ็อกซ์ “Show chat history” ควบคุมว่าผู้ชมในชุมชนจะเห็นบทสนทนาการสร้างหรือไม่
- มีบันทึกยืนยันว่า: “By publishing to Community, you agree to Figma’s Creator Agreement”
เมื่อเผยแพร่แล้ว URL figma.site จะเปิดแอปพลิเคชันในมุมมองเบราว์เซอร์แบบเดี่ยว ไม่มีโครมของตัวแก้ไข Figma ไม่มีลายน้ำ และไม่มีป้าย “built with Figma Make” ปรากฏรอบ ๆ แอป มันโหลดและทำงานเหมือนแอปเว็บจริงแบบเดี่ยว ไม่ใช่พรีวิวที่ฝังอยู่ในกรอบ
การเผยแพร่ในแผนฟรีรวมถึง:
- URL ซับโดเมน figma.site ที่แชร์ได้
- มุมมองแอปแบบเดี่ยวที่ไม่มีแบรนด์ Figma แสดงอยู่
- ความสามารถในการนำแอปไปแสดงใน Figma Community
การเผยแพร่ในแผนชำระเงินเพิ่ม:
- โดเมนแบบกำหนดเองจากผู้ให้บริการภายนอก
- AI credits เพิ่มสำหรับงานสร้างและการปรับแก้เพิ่มเติม
ราคาและแพ็กเกจของ Figma Make
Figma Make ไม่ได้ขายเป็นผลิตภัณฑ์เดี่ยว การเข้าถึงมาพร้อมกับแผน Figma Full seat และ AI credits จะถูกแชร์ร่วมกันกับทุกฟีเจอร์ AI ของ Figma ไม่ใช่แค่ Make เท่านั้น การสร้างใน Figma Make จะดึงจากพูลรายเดือนเดียวกันกับเครื่องมือ AI ของ Figma Design, การแก้ไขภาพ และการกระทำใด ๆ ที่ขับเคลื่อนด้วย AI อื่น ๆ ภายในแพลตฟอร์ม
แผนฟรี Starter มี Figma Make รวมอยู่ด้วย แต่เพดานเครดิตรายเดือนต่ำพอที่การสร้างงานซับซ้อนเพียงครั้งเดียวจะใช้ไปส่วนใหญ่ของโควตา แผน Starter เหมาะสำหรับการประเมินเครื่องมือและการทดสอบแบบครั้งคราว ไม่ใช่สำหรับทีมที่ใช้ Make เป็นส่วนหนึ่งของกระบวนการสร้างงานเป็นประจำ
แผนแบบชำระเงินถูกจัดโครงสร้างตามประเภทที่นั่ง Full seats ในระดับ Professional, Organization และ Enterprise แต่ละระดับมี AI credits รายเดือนมากขึ้นอย่างมีนัยสำคัญ โดยแต่ละระดับจะเพิ่มปริมาณเครดิตรายเดือนขึ้นไปอีก หากคุณอยู่บนแผน Figma แบบชำระเงินเพื่อใช้งาน Design เป็นหลัก Make ก็พร้อมใช้งานอยู่แล้วโดยไม่มีค่าใช้จ่ายเพิ่มภายในพูลเครดิตเดิมของคุณ
สามารถซื้อ AI credits เพิ่มเติมเป็นส่วนเสริมได้ในทุกแผนชำระเงิน ซึ่งควรพิจารณาหากทีมของคุณสร้างด้วย Make หลายครั้งต่อสัปดาห์ควบคู่กับการใช้งาน AI ของ Figma ตามปกติ
ไม่มีทดลองใช้ฟรีแยกต่างหากจากแผน Starter และไม่มีการระบุการรับประกันคืนเงินในเงื่อนไขที่ Figma เผยแพร่ไว้ การยกเลิกแผนรายปีจะไม่ได้รับเงินคืนสำหรับระยะเวลาที่เหลือ การยกเลิกแผน Professional ทำได้จาก Admin Dashboard; การยกเลิกแผน Organization และ Enterprise ต้องติดต่อทีมขายโดยตรง
สำหรับการเลือกแผนอย่างใช้งานได้จริง: แผน Starter ครอบคลุมการประเมินและการใช้งานเป็นครั้งคราว Full seat ระดับ Professional เป็นจุดเริ่มต้นขั้นต่ำที่สมเหตุสมผลสำหรับทีมที่ต้องการใช้ Make มากกว่าหนึ่งหรือสองครั้งต่อเดือนโดยไม่ชนเพดานเครดิตกลางทาง
ทางเลือกแทน Figma Make
คู่แข่งโดยตรงที่สุดของ Figma Make ในตอนนี้คือ Lovable โดย Figma Make สร้างแอปพลิเคชันฝั่งหน้าเว็บภายในพื้นที่ทำงานของ Figma ส่วน Lovable เป็นเครื่องมือสร้างแอปด้วย AI ที่ออกแบบมาเพื่อสแต็กทั้งหมด: front-end, back-end, database, authentication และการ deploy ด้วยคลิกเดียว จากแพลตฟอร์มแบบเดี่ยวที่มีผู้ใช้รายงานมากกว่า 8 ล้านคน
สำหรับใครก็ตามที่ยังไม่ได้อยู่บนแผน Figma แบบชำระเงินอยู่แล้ว หรือผู้ที่ต้องการแอปพลิเคชันเชื่อมต่อโปรดักชันจริงแทนที่จะเป็นต้นแบบที่สวยงาม Lovable จะพาคุณไปถึงแอปที่ deploy และเชื่อมต่อข้อมูลได้เร็วกว่า และต้องตั้งค่าน้อยกว่า
| ฟีเจอร์ | Figma Make | Lovable |
|---|---|---|
| ความง่ายในการใช้งาน | เริ่มจากพรอมต์โดยไม่ต้องตั้งค่า | เริ่มจากพรอมต์โดยไม่ต้องตั้งค่า |
| เหมาะที่สุดสำหรับ | นักออกแบบและทีมที่อยู่บนแผน Figma แบบชำระเงินแล้ว | ผู้ก่อตั้งที่ไม่ถนัดเทคนิคและกำลังสร้าง MVP |
| Backend และ Data | เฉพาะ front-end; มี Supabase เป็นอินทิเกรชัน | มี Supabase backend ในตัวตั้งแต่เริ่มต้น |
| ความยืดหยุ่นด้านดีไซน์ | มีตัวแก้ไขแบบภาพ การแก้ผ่านแชต และการเข้าถึงซอร์สโค้ดเต็มรูปแบบ | แก้ไขผ่านแชตเป็นหลัก พร้อมส่งออกโค้ดได้ |
| รูปแบบราคา | รวมอยู่ใน Full seat ของ Figma; ใช้พูล AI credit ร่วมกัน | สมาชิกแบบเดี่ยวพร้อมระบบเครดิตของตัวเอง |
บทสรุปสุดท้าย: Figma Make คุ้มค่าหรือไม่?
สำหรับใครก็ตามที่จ่ายค่า Figma Full seat อยู่แล้ว คำตอบตรงไปตรงมาคือ คุ้ม และคุ้มอย่างมาก
พรอมต์เดียวสร้างแพลตฟอร์มบริหารจัดการอสังหาริมทรัพย์หลายหน้าจอที่รู้จักบทบาทผู้ใช้ พร้อมโมดัลชำระเงิน Stripe แดชบอร์ดวิเคราะห์แบบสด บอร์ดคัมบังสำหรับงานซ่อมบำรุง UI แชตสองพาเนล และคอนโซลผู้ดูแลระบบเต็มรูปแบบพร้อมตารางจัดการผู้ใช้ เอกสาร REST API และคำแนะนำการนำไปใช้งาน ทั้งหมดนี้ในเวลาแปดนาที พร้อมการเข้าถึงซอร์สโค้ดเต็มรูปแบบบนแผนฟรี และ URL ที่เผยแพร่แบบเดี่ยวและสะอาด ไม่มีอะไรธรรมดาเลยสำหรับผลิตภัณฑ์เบตา
สำหรับทีมที่ยังไม่ได้อยู่บน Figma การตัดสินใจต้องมองอย่างตรงไปตรงมาว่าคุณต้องการอะไรจริง ๆ การได้สิทธิ์เครดิตที่มีความหมายสำหรับ Figma Make ต้องใช้ Full seat ในแผน Figma แบบชำระเงิน ซึ่งเป็นการลงทุนในแพลตฟอร์มที่กว้างกว่าเครื่องมือ AI แบบเดี่ยว ๆ ถ้าเป้าหมายหลักคือการส่งมอบเว็บแอปที่ใช้งานได้จริงพร้อมฐานข้อมูลสดและผู้ใช้จริง Lovable จะไปถึงจุดนั้นได้ด้วยการตั้งค่าน้อยกว่า และไม่ต้องพึ่งสมาชิกแพลตฟอร์มออกแบบ
กลุ่มที่ได้ประโยชน์จาก Figma Make มากที่สุดในตอนนี้คือ นักออกแบบและทีมผลิตภัณฑ์ที่ต้องการปิดช่องว่างระหว่าง prototype แบบคงที่ใน Figma กับงานที่โต้ตอบได้และรองรับโค้ด โดยไม่ต้องเปลี่ยนเครื่องมือหรือรอให้นักพัฒนามาทำให้ สำหรับกรณีใช้งานเฉพาะแบบนั้น Figma Make คือทางเลือกที่ดีที่สุดที่มีอยู่ในตอนนี้

