Figma MCP X Claude - Part 2

ถ้าใครค้นหาเรื่อง “Figma MCP x Claude” เพราะอยากรู้ว่าเอาไปใช้จริงในงาน Design System ได้แค่ไหน จากที่ลองทำ POC ของผม บอกเลยว่ามันช่วย “เริ่มต้น” ได้ไวมาก โดยเฉพาะตอนทีมยังไม่มีโครงหรือยังไม่รู้จะจัด Documentation ยังไง แต่เพื่อให้ผลลัพธ์ออกมาดีและไม่หลงทาง ผมแนะนำให้วางขั้นตอนทำงานไว้ประมาณนี้ 1) เตรียมโครง Design System ก่อนสั่ง AI ก่อนใช้ MCP ไปสั่ง Claude ผมจะลิสต์สิ่งที่ต้องมีให้ชัด เช่น Color palettes, Typography scale, Spacing, Radius, Shadow, Grid และสถานะคอมโพเนนต์ (default/hover/pressed/disabled) เพราะถ้าโจทย์กว้างเกิน AI มัก generate ออกมาครึ่ง ๆ กลาง ๆ หรือไม่สอดคล้องกับบริบทสินค้า 2) ใช้ Variables และ Variable Collections ให้เป็น จาก OCR ในภาพจะเห็นคำอย่าง “Variables”, “Variable Collections”, “Light + Dark”, “Color Palettes” ซึ่งเป็นหัวใจมาก ๆ ของการทำให้ Design System ใช้ต่อได้จริง ผมจะตั้ง Variable Collections แยกเป็น Light/Dark และกำหนด semantic tokens เช่น color/background, color/text, color/border แทนการผูกกับสีดิบ (raw color) อย่างเดียว วิธีนี้ทำให้ตอน Dev implement หรือเวลาปรับธีม ลดงานแก้ยาว ๆ ได้เยอะ 3) แยก Tokens กับ Components ให้ชัด อีกจุดที่ AI ชอบทำปนกัน คือเอา tokens ไปผูกกับคอมโพเนนต์แบบตรง ๆ จนแก้ลำบาก ผมจะแยกเป็น - Foundations/Tokens: สี ตัวอักษร spacing radius elevation - Components: ปุ่ม ฟอร์ม การ์ด นำ tokens ไปใช้ เช่น “Button tokens” ควรระบุว่า padding, height, radius, font, color state ต่าง ๆ อ้างจาก tokens อะไร เพื่อให้ทีมเห็นความสัมพันธ์และ reuse ได้ 4) ทำ Documentation บน Figma ให้อ่านง่าย ถ้าจะทำแบบ Document บน Figma ให้ทีม review ง่าย ผมจะจัดหน้าเป็นลำดับ: Overview → Principles → Foundations → Components → Patterns → Do/Don’t พร้อมตัวอย่างใช้งานจริงสั้น ๆ และใส่หมายเหตุ decision ที่สำคัญ เช่น ทำไมเลือกคอนทราสต์แบบนี้ หรือรองรับ accessibility ระดับไหน 5) ทำ Web Page ส่ง Dev: เน้น “ค้นหาเร็ว + คัดลอกง่าย” เว็บสำหรับ Deliver ให้ Dev ควรมี - ตาราง tokens (ชื่อ token, ค่า Light/Dark, ตัวอย่างสี) - Spec ของ components (states, anatomy, spacing) - ตัวอย่างโค้ด/สเปคที่ Dev เอาไปเทียบได้ทันที แม้ Claude จะ generate โครงเว็บได้ดี แต่ผมจะตรวจศัพท์ให้ตรงกับทีม เช่น naming convention (kebab/camel/snake) และเช็กความครบของ states ทุกครั้ง 6) เช็กลิสต์ก่อนใช้งานจริง สุดท้ายอย่าเชื่อ AI 100% ผมจะเช็กอย่างน้อย 4 เรื่อง: ความสอดคล้องของชื่อ token, คอนทราสต์สี (โดยเฉพาะ text บนพื้น), ความครบของ component states, และความเป็นไปได้ในการ implement (เช่น spacing/size ไม่หลุดจากระบบ) สรุปคือ Figma MCP x Claude ช่วยทำ “ร่างแรก” ของ Design System ได้เร็วมาก ทั้ง Documentation และ Web Page แต่ถ้าพื้นฐานเรื่อง tokens/variables และโครงสร้างระบบยังไม่แน่น จะยิ่งต้องใช้เวลาตรวจแก้เยอะ แนะนำให้ใช้เป็นผู้ช่วยเร่งสปีด แล้วให้มนุษย์คุมคุณภาพครับ