หลายคนที่ออกแบบเว็บไซต์ มักจะเคยเจอปัญหานี้ ออกแบบเสร็จ แต่พอจะเพิ่ม Interactivity, Animation หรือเชื่อมข้อมูลจริงเข้าไป มันทำไม่ได้ เพราะไม่ใช่ Developer Figma จึงปล่อยฟีเจอร์ใหม่มาช่วยเรื่องนี้โดยตรง
12 มิถุนายน 2568 บริษัท Figma ปล่อยฟีเจอร์ใหม่ที่เรียกว่า Code layers เป็น Layer พิเศษที่ให้คุณเขียนโค้ดหรือพูดคุยกับ AI เพื่อสร้าง Element เว็บที่ใช้งานได้จริงบน Figma
ทำไมน่าสนใจ?
– ไม่ต้องสลับไปแอปอื่น ออกแบบ-เขียนโค้ด-ทดลองเล่นได้ในหน้าเดียว
ฟีเจอร์
- สามารถสร้างและแก้ไข Code Layers ได้ภายใน Figma Sites
- เลือกเขียนโค้ดเองด้วย React, TypeScript และ Tailwind CSS ได้
- พูดคุยกับ AI เพื่อให้ช่วยเขียนหรือปรับแต่งโค้ด
- แปลงการออกแบบเดิมให้กลายเป็น Code Layer ได้
- สร้าง Component ที่สามารถนำไปใช้ซ้ำและปรับแต่งผ่าน Properties Panel
- กำหนด Custom Properties เช่น String, Number, Boolean และ Component Reference
- รองรับการปรับ Responsive โดยใช้ Auto Layout
- ใช้งาน useBreakpoint Hook ปรับการแสดงผลตาม Breakpoint ต่างๆ
- บันทึกการสนทนาและย้อนกลับไปใช้เวอร์ชันก่อนหน้าได้
- ไม่สามารถแชร์ข้อมูลระหว่าง Code Layers ได้ในตอนนี้
- ไม่รองรับการอ้างอิง Styles จาก Design System ขณะนี้
- ไม่สามารถ Publish Code Layers เข้า Library ได้
- สามารถผูก Custom Properties กับ Variables ได้
- แสดงผล Preview ของ Code Layer แบบเรียลไทม์ขณะทำงาน
- มีโหมด Full Screen สำหรับดู Code Components และ Layers ทั้งหมดในไฟล์
ประโยชน์
- เพิ่มความเคลื่อนไหวและปฏิสัมพันธ์ให้เว็บได้โดยตรง
- สร้าง Component ที่ปรับแต่งผ่าน Panel ได้ (ไม่ต้องแก้โค้ดทุกครั้ง)
- ดึงข้อมูลจากภายนอกมาแสดงผลจริง เช่น ราคาหุ้น, ยอดขาย, ข่าวสด
- ปรับ Responsiveness ตาม Breakpoint ได้ละเอียด
ราคาและการใช้งาน?
- เปิดให้เฉพาะคนที่อยู่ในแผนเสียรายเดือน และมี Full access
- ต้องมีสิทธิ์แก้ไขไฟล์เว็บไซต์
- ต้องเปิด AI features ไว้ถ้าอยากใช้ AI ช่วยเขียนโค้ด
ข้อสรุป:
Code Layers คือการเปลี่ยน Figma จากเครื่องมือออกแบบ เป็นแพลตฟอร์มสำหรับ ทดลอง และ สร้าง Prototype ที่ทำงานได้จริง
