Tools
Claude Code to Figma — เอา UI จากโค้ดไปเป็น frame แก้ได้ใน Figma
Figma เปิดฟีเจอร์ใหม่ให้เอา workflow จาก Claude Code เข้ามาใน canvas ได้โดยตรง คือจับ UI จริงที่รันอยู่บน browser — จะเป็น production, staging หรือ localhost ก็ได้ — แล้วแปลงเป็น frame ใน Figma แก้ได้ ไม่ต้องส่ง screenshot หรือบอกให้เพื่อนรัน build เองอีกแล้ว โค้ดกับ canvas เชื่อมกันได้จริง
ไว้ทำอะไร
Claude Code to Figma ให้ dev, designer หรือคนทำ side project จับ หน้าเดียว หลาย state หรือทั้ง flow จากแอปที่รันอยู่ แล้ว paste ลงไฟล์ Figma ไหนก็ได้ แต่ละครั้งที่จับจะกลายเป็น Figma frame ที่จัดกลุ่ม ซ้ำ แก้ และแชร์กับทีมได้ แม้แต่จับหลายหน้าต่อกันใน session เดียวก็ได้ เพื่อให้ flow ทั้งก้อนยังอยู่บน canvas ความคิดคือ โค้ดเหมาะกับช่วง converge (หนึ่ง build หนึ่ง state) ส่วน canvas เหมาะกับช่วง diverge (เห็นภาพรวม เปรียบเทียบทางเลือก กำหนดทิศทางร่วมกัน) ฟีเจอร์นี้คือสะพานให้ทีมสลับระหว่างสองโหมดได้ไม่สะดุด
ทำไมต้องสนใจ
- เห็นระบบทั้งหมดในมุมมองเดียว — เอามาวางเทียบกันบน canvas จะเห็น pattern ช่องว่าง หรือความไม่สอดคล้องชัดขึ้น โดยเฉพาะ flow หลายขั้น
- ลอง variation โดยไม่ต้องเขียนโค้ดใหม่ — ซ้ำ frame สลับลำดับ step ทดลองโครงสร้างได้โดยไม่ต้อง refactor แค่เพื่อลองไอเดีย
- ตัดสินใจร่วมกันเร็วขึ้น — designer, engineer, PM ดู artifact ชิ้นเดียวกันความละเอียดเดียวกัน คำถามโผล่ตอนที่ยังปรับทิศทางได้ง่าย
- ส่งกลับไปโค้ดได้ — ใช้คู่กับ Figma MCP server ได้ เอา frame จาก Figma กลับเข้า coding environment ด้วย prompt + link ให้ LLM generate โค้ดตาม design ได้
จะเริ่มจาก prompt ใน Figma Make หรือจากโค้ดใน Claude Code เป้าหมายเดียวกัน คือให้ได้ของจับต้องได้ก่อน แล้วค่อยลงลึก Claude Code to Figma ใช้แนวคิด “copy ขึ้น canvas” แบบเดียวกันกับ workflow ที่เริ่มจากโค้ด จุดเริ่มต่างกัน ผลลัพธ์เดียวกัน
ใช้ได้ที่ไหน / ลองได้ยังไง
ใช้ Claude Code จับหน้าจอ แล้วส่งหรือ copy ไปที่ clipboard แล้ว paste ลงไฟล์ Figma ใดก็ได้ เรื่อง setup และ client ที่รองรับ ดูได้ที่ Figma MCP server guide และ developer docs สำหรับ MCP tools รวม Claude Code to Figma
ลองได้ที่: Introducing Claude Code to Figma — อ่านโพสต์เต็มแล้วลองจับจาก session ถัดไปใน Claude Code มาวางบน Figma ได้เลย