เสก Design ใน Figma ให้เป็น Website จริงแบบเป๊ะๆ
เอฟ 
ถ้าอยากนำดีไซน์ที่ออกแบบไว้ใน Figma ไปแปลงเป็น Code และ Deploy ใช้งานจริง ถ้าไม่เขียนโค้ดเองก็ Vibe coding กันใช่มั้ยครับ ซึ่งการเขียนโค้ดเอง ข้อดีก็คือเราจะได้โค้ดเหมือนที่ออกแบบเป๊ะ ๆ แต่ใช้เวลาเยอะ ส่วนการ Vibe coding เร็วแต่ดีไซน์เพี้ยน
เพราะงั้นช่วงนี้ถ้าใครอยู่ในวงการออกแบบเว็บ ก็คงจะได้ยินชื่อ Figma mcp เป็นเหมือนช่อง USB ที่ทำให้ Ai Agent สามารถเข้าไปอ่านดีไซน์ ของเราใน Figma ได้
มันเป็นเรื่องที่เจ๋งมาก ๆ สำหรับคนชอบออกแบบแต่ขี้เกียจเขียนโค้ด แต่ปัญหามันก็เกิดอีกเพราะสายฟรี ใช้ได้แค่ 6 ครั้งต่อเดือน แต่จะให้มาเสียเงินเพิ่มอีกเดือนละ 20 ดอล ช่วงนี้เอฟก็ไม่ไหวเหมือนกัน ไปสมัคร AI ไว้เล่นหลายตัวเกิน เพราะงั้นเอฟเลยเอาสูตรโกง ในการแปลงดีไซน์ Figma ให้เป็น code โดยใช้งบ 0 บาท มาฝากครับ
แต่บอกก่อนนะครับว่าเอฟไม่ได้โกง หรือใช้บัญชีทดลองอะไรเลย แค่หาเครื่องมือที่มันฟรีแต่ใช้งานได้ดีเหมือนกัน ซึ่งเครื่องมือที่จะมาช่วยเราวันนี้ก็คือ Penpot เครื่องมือออกแบบ UI/UX ที่กำลังมาแรงมาก เพราะมันใช้ฟรีแต่ฟีเจอร์เพียบ ที่สำคัญคือฟีเจอร์แปลงดีไซน์เป็น Code ทั้ง HTML/CSS เหมือน mode dev ใน Figma แต่อันนี้ใช้ได้ฟรี 100%
วิธีดึง Design จาก Figma มาใส่ Penpot ก็ง่ายนิดเดียว:
1. ไปโหลด Plugin ใน Figma ที่ชื่อ Penpot Exporter
2. กด Start Plugin
เลือกว่าจะ Export แค่หน้าที่เปิดอยู่ หรือเอามาทั้งโปรเจกต์
3. สลับไปที่เว็บ Penpot
กด New Project แล้ว Import ไฟล์ที่เพิ่งดึงมาได้เลย
ทีนี้พอเราเปิดโปรเจกต์ใน Penpot เราก็สามารถก๊อปปี้ Code HTML/CSS ออกมาได้แบบฟรี ๆ แล้ว แต่อ่านมาถึงตรงนี้หลายคนน่าจะสงสัยว่ามันไปเกี่ยวอะไร กับ AI Agent ที่เล่าไปตอนแรก? ความสนุกมันเริ่มที่ตรงนี้ครับ 555
ตอนแรกเราต้องเสียเงินให้ Ai agent ของเราเข้าถึง Figma ผ่านทาง MCP ซึ่งเสียเงิน แต่พอเรามีโค้ดดีไซน์ที่ได้มา โยนให้ Gemini CLI ใน VS Code แทน แล้วบอกให้ว่า:
"นี่คือโค้ด HTML/CSS ที่ Export มาจาก Penpot ช่วยแปลงเป็นโปรเจกต์ Astro ให้หน่อย โดยให้ทำ 2 อย่างนี้: 1. ช่วยแบ่งโค้ดออกเป็น Component ย่อยๆ (.astro) ให้เหมาะสม และ 2. คลีนโค้ด CSS ที่ซ้ำซ้อนออกให้ด้วย"
แค่นี้เราก็ได้เว็บไซต์ที่ตรงปกตาม Design ใน Figma แถมเร็วสุด ๆ pagespeed เต็ม 100 โดยไม่ใช้เงินสักบาทเดียว
ส่วนขั้นตอน Deploy เอาขึ้นระบบจริง เอฟแนะนำให้ใช้ Netlify ครับ ฟรีและติดตั้งง่ายมาก แต่อาจจะต้องมีความรู้เรื่อง GitHub ติดตัวไว้นิดนึง ใครอยากให้เอฟทำ Content สอนแบบจับมือทำ พิมพ์คอมเมนต์บอกไว้ได้เลย ถ้ายอดสนใจเยอะ เดี๋ยวเอฟมาสอนให้ค้าบ
สรุปแบบหล่อเท่
อยากได้เว็บเป๊ะเหมือนดีไซน์ที่ทำไว้ใน Figma แต่ไม่อยากจ่ายรายเดือนแพง ๆ แค่ใช้ Penpot เป็นสะพานดึงโค้ดออกมาฟรี ๆ แล้วส่งไม้ต่อให้ Gemini CLI สวมบทเป็น AI Agent ส่วนตัวช่วยประกอบร่าง แค่นี้ก็ได้เว็บสไตล์ Vibe coding ที่หน้าตาตรงปก 100% ในงบ 0 บาทแล้วครับ