From Claude Code to Figma เอา “โค้ดที่ AI เขียน” กลับมาเป็น Figma…
From Claude Code to Figma เอา “โค้ดที่ AI เขียน” กลับมาเป็น Figma ที่แก้เลเยอร์ได้เลยในคลิกเดียวครับ
ภาพที่ Figma เล่นมุกไว้โคตรชัดครับ เมื่อก่อนเราชอบเถียงกันว่า “จะเริ่มจากโค้ด หรือเริ่มจากแคนวาสดี” แต่รอบนี้เขาบอกเลยว่า เอาให้จบ “โค้ด AND แคนวาส” ไปพร้อมกันครับ
แกนของฟีเจอร์คือ Workflow แบบสองทางในชีวิตจริงของทีมโปรดักต์ครับ ฝั่ง dev หรือฝั่งที่ใช้ Claude Code สร้าง UI ด้วย AI แล้วโยนเข้ามาใน Figma ให้กลายเป็นงานบนแคนวาสที่ทีมดีไซน์แก้ต่อได้จริง แทนที่จะเป็นแค่ภาพนิ่งหรือไฟล์ที่ต้องมานั่งวาดใหม่ครับ
ถ้าเล่าแบบเห็นภาพนะครับ ปกติเวลาคนใช้ AI เขียนหน้าเว็บ มักจบที่ “ได้โค้ด” แล้วดีไซน์ต้องมารับช่วงต่อแบบเหนื่อยๆ เพราะใน Figma มันยังไม่มีเลเยอร์ที่แก้ได้ตามดีไซน์ซิสเต็มจริง แต่ Code to Canvas ตั้งใจอุดรูนี้ ให้โค้ดที่ได้จาก AI กลายเป็นวัตถุที่ทำงานแบบ Figma ต่อได้ เช่น ปรับเลย์เอาต์ ปรับองค์ประกอบ จัดหลายเวอร์ชัน แล้วคุยร่วมกันในไฟล์เดียวครับ
เบื้องหลังที่ทำให้มันไม่ใช่แค่แปลงรูป คือแนวคิด MCP ที่ Figma ทำเป็นเซิร์ฟเวอร์ให้เครื่องมืออย่าง Claude Code, VS Code หรือ Cursor เข้ามาอ่านบริบทดีไซน์ได้ตรงๆ เช่น โครงสร้างไฟล์ สี ฟอนต์ ระยะห่าง ไม่ต้องให้ AI มองจากสกรีนช็อตแล้วเดาเองครับ
เรื่องราคาอยู่ในโลกของ Figma แบบเสียเงินและระบบ AI credits ครับ แผน Professional ประมาณ 16 ดอลลาร์ต่อเดือนต่อที่นั่ง ได้ 3,000 เครดิตต่อเดือน แผน Organization และ Enterprise จะได้เครดิตมากขึ้น ส่วนแผนฟรีจะได้เครดิตจำกัด และตั้งแต่ปี 2026 มีการเริ่มจำกัดเครดิตกับที่นั่งแบบจ่ายเงินด้วย ใครใช้หนักต้องวางแผนดีๆ ครับ
เสียงรีวิวที่เห็นในคอมมูนิตี้มีสองทางชัดๆ ครับ ฝั่งหนึ่งตื่นเต้นมาก เพราะมันลดความปวดหัวเรื่อง handoff ระหว่างดีไซน์กับโค้ด ทีมไม่ต้องแปลงงานกันไปมาเยอะเหมือนเดิม
อีกฝั่งบอกว่าอยากได้ “ทางกลับกัน” มากกว่า คือออกแบบใน Figma แล้วให้ AI เขียนโค้ด production ให้เลย รวมถึงฝั่ง backend และ deployment ด้วย บางคนก็รู้สึกว่าตลาดเริ่มขยับไปสู่การออกแบบในโค้ดโดยตรงแล้ว ฟีเจอร์นี้เลยดูเหมือนมาช้าไปหน่อย
ถ้าเทียบกับตัวท็อปอื่นในตลาด อย่าง Canva หรือ Adobe จุดแข็งของ Figma ไม่ใช่ความสวยเชิงภาพหรือการทำคอนเทนต์ แต่คือการเป็นศูนย์กลางของทีมโปรดักต์ และพยายามเชื่อมโค้ดกับดีไซน์ในระดับโครงสร้างจริงๆ ส่วนพวกเครื่องมือทำเว็บอย่าง Framer หรือ Webflow จะเน้นสร้างเว็บจบในตัวมากกว่า ไม่ได้โฟกัสการดึงโค้ด AI กลับมาแก้ในแคนวาสแบบนี้ครับ
ถ้า Code to Canvas ทำให้ผลลัพธ์ที่แปลงออกมาตรงพอ และตั้งค่าใช้งานง่ายสำหรับทีมทั่วไป มันจะเป็นตัวเปลี่ยนเกมเรื่องการทำงานร่วมกันระหว่าง dev กับ designer เลย แต่ถ้าผลลัพธ์ยังต้องเก็บงานมือเยอะ หรือเครดิตหมดเร็ว มันอาจกลายเป็นฟีเจอร์ที่คนลองเล่นแต่ไม่ได้ใช้ทุกวันครับ
เวิร์กโฟลว์ที่คิดว่าใช่ในอนาคตควรเป็นแบบไหน ระหว่าง “ออกแบบก่อนแล้วให้ AI เขียนโค้ด” กับ “ให้ AI เขียนโค้ดก่อนแล้วดึงกลับมาแก้ใน Figma” และเพราะอะไรครับ
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac