Figma MCP X Claude - Part 2
🤖✨ This is all built with Figma MCP x Claude AI [Part 2] 🤩
.
The POC admin uses MCP to make Claude two design systems.
.
👉 1.Document on Figma
Structure the Design System for the team to visualize, read guidelines and review collaborative tasks.
.
👉 2.Web Page for Deliver Work for Dev
It is more convenient to convert the Design System into a form that the development team views, references, and implements.
.
I can say that the results were "not bad."
It's interesting to do, and you can see the AI to help with the design line more clearly, and most importantly, it only takes a few minutes.
.
But that doesn't mean it works right away.
Because you finally have to sit down and read, check the details and check them out again.
.
AI makes it more sensitive to start work.
But if the design system basics aren't tight,
It's right to confuse what it generates, too.
.
🚨 P.S. You have to understand the basics first, even if AI makes it faster. * For novices, don't jump to the basics first!
.
.
🔥 Read UXUI version 48 details# SOLDOUT[Interested in the next version IB now]
/
.
.
📥 for organizations or companies interested in training seminars on-site / online or Consult Project.
You can contact it by IB: https://m.me/uxuistudio9.
.
# Unlock Skill UX / UI - Because we understand what "newbies" want.
# uxui # uxuidesign # uxdesign # uidesign# Figma # uxuidesigner # graphicdesign # uxuiworkshop # uiworkshop # UXUI # WebDesign # ProductDesign # uxuistudio
ถ้าใครค้นหาเรื่อง “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 และโครงสร้างระบบยังไม่แน่น จะยิ่งต้องใช้เวลาตรวจแก้เยอะ แนะนำให้ใช้เป็นผู้ช่วยเร่งสปีด แล้วให้มนุษย์คุมคุณภาพครับ
