Figma Chrome Extension — เซฟเว็บเป็นเลเยอร์แก้ได้
Figma เพิ่งปล่อย Chrome Extension ใหม่ที่เซฟเว็บไซต์เป็น "เลเยอร์แก้ได้" ใน Figma เลย ทุกคน
ปกติเวลาเราเจอเว็บสวยๆ แล้วอยากเอามาดูโครงสร้าง หรืออยาก redesign ต่อ เราก็ทำได้แค่แคปหน้าจอมาเป็นภาพนิ่ง แล้วก็นั่งวาดใหม่เองทีละชิ้น เสียเวลาสุดๆ
ตัวนี้มันต่างออกไป — มันคือ Chrome Extension ชื่อ Figma (หัวข้อ "Capture web pages to layers") ที่เพิ่งเปิดตัวเมื่อวันที่ 11 มิ.ย. ที่ผ่านมา
วิธีใช้ก็ตรงไปตรงมา
- ติดตั้งจาก Chrome Web Store แล้ว sign in ด้วยบัญชี Figma
- เปิดเว็บที่อยากได้ → คลิกไอคอน Figma → เลือก capture ทั้งหน้า หรือเจาะเอาแค่ element เดียว (เช่น การ์ด ปุ่ม section)
- เปิดไฟล์ Figma หรือ FigJam แล้วกด Cmd/Ctrl+V
ที่เด็ดคือมันไม่ได้วางมาเป็นภาพนิ่ง แต่วางมาเป็น layer จริงๆ — frame, text, image, shape แยกชั้นให้ ขยับได้ แก้สีได้ แก้ font ได้เหมือน design ที่เราทำเอง เอาไป riff ต่อ ทำ moodboard หรือเริ่ม prototype ใน Figma Make ได้เลย
ฝั่งกระแสก็แรงพอตัว ใน Chrome Store ตอนนี้ได้ 4.7/5 (จาก 29 รีวิว) มีคนใช้แล้วแตะ 100,000 users คอมเมนต์สาย designer หลายคนบอกว่า "ไม่ต้องมานั่งวาด section เว็บใหม่อีกแล้ว" บางคนถึงขั้นบอกว่า Figma กำลังจะกลายเป็น universal editor
แต่ผมขอพูดตรงๆ ตามจริงด้วย เพราะมันยังเป็น beta
- ตอน beta นี้ "ฟีเจอร์ capture ต้องมีแผน Pro ขึ้นไป" ถึงจะใช้ได้ (ของฟรีใช้ไม่ได้นะทุกคน)
- เว็บที่ซับซ้อนมากๆ (JS หนัก, canvas, virtual list ยาวๆ) มัน capture มาไม่ครบ 100% — Figma เองแนะนำให้เลือก capture แค่ element จะชัวร์กว่า
- font กับรูปบางตัวอาจมาไม่เป๊ะ
- ใช้กับหน้า chrome:// หรือหน้า system ไม่ได้
- แล้วก็ยังไม่ได้ map เข้า design system ของเราอัตโนมัติ (อันนี้ Figma บอกว่า coming soon)
มีอีกประเด็นที่คนถกกันคือเรื่องจริยธรรม — "เอาเว็บคนอื่นมาก็อปแบบนี้ไม่ผิดเหรอ" ซึ่ง Figma ก็ออกมาบอกว่าตั้งใจให้ใช้เพื่อ inspiration กับ redesign งานของตัวเอง ไม่ใช่ก็อปไปขาย อันนี้ก็แล้วแต่วิจารณญาณคนใช้ครับ
โดยรวมผมว่าเป็นของที่ designer กับคนทำเว็บน่าลองมาก ถ้ามีแผน Pro อยู่แล้ว ลองดูได้เลย แต่ถ้าหวังเอามา clone เว็บเป๊ะๆ 100% อาจต้องทำใจนิดนึงในช่วง beta นี้
ใครได้ลองแล้วเป็นไงมาเล่าให้ฟังกันได้นะครับ
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac