Skills Figma

mcp-server-guide/skills/code-connect-components

สร้างการเชื่อมโยงแบบสองทิศทางระหว่างคอมโพเนนต์การออกแบบใน Figma และการใช้งานในโค้ดโดยใช้ Code Connect ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP และคอมโพเนนต์ที่เผยแพร่บนแผน Organization หรือ Enterprise โดยอัตโนมัติจะระบุคอมโพเนนต์ที่ไม่มีการแมปในการเลือกใน Figma จากนั้นสแกนโค้ดเบสของคุณเพื่อหาคอมโพเนนต์โค้ดที่ตรงกันตามชื่อ โครงสร้าง และพร็อพส์ นำเสนอคอมโพเนนต์ที่ตรงกันให้คุณตรวจสอบก่อนสร้างการแมป เพื่อให้สามารถยอมรับหรือปฏิเสธแบบเลือกได้ รองรับหลาย...

mcp-server-guide/skills/create-design-system-rules

กฎระบบการออกแบบที่กำหนดเองสำหรับการนำ Figma ไปใช้เป็นโค้ดอย่างสม่ำเสมอทั่วทั้งโปรเจกต์ของคุณ สร้างข้อกำหนดเฉพาะของโปรเจกต์สำหรับการจัดระเบียบคอมโพเนนต์ การจัดรูปแบบสไตล์ โทเค็นการออกแบบ และการจัดการแอสเซ็ตที่ช่วยแนะนำเอเจนต์ AI ในการสร้างโค้ดที่สอดคล้องกัน รองรับรูปแบบไฟล์กฎสามแบบ: CLAUDE.md สำหรับ Claude Code, AGENTS.md สำหรับ Codex CLI และ .cursor/rules/figma-design-system.mdc สำหรับ Cursor ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP และการวิเคราะห์โค้ดเบสเพื่อค้นหารูปแบบที่มีอยู่ก่อนสร้างกฎ...

mcp-server-guide/skills/figma-code-connect

สร้างและดูแลไฟล์เทมเพลต Figma Code Connect ที่แมปส่วนประกอบของ Figma กับโค้ดสั้นๆ ใช้เมื่อผู้ใช้พูดถึง Code Connect, ส่วนประกอบของ Figma…

mcp-server-guide/skills/figma-code-connect-components

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-create-design-system-rules

สร้างกฎระบบดีไซน์ที่กำหนดเองสำหรับโค้ดเบสของผู้ใช้ ใช้เมื่อผู้ใช้พูดว่า "สร้างกฎระบบดีไซน์" "สร้างกฎสำหรับโปรเจกต์ของฉัน" "ตั้งค่ากฎการออกแบบ" "ปรับแต่งแนวทางระบบดีไซน์" หรือต้องการกำหนดข้อกำหนดเฉพาะโปรเจกต์สำหรับเวิร์กโฟลว์จาก Figma สู่โค้ด ต้องมีการเชื่อมต่อเซิร์ฟเวอร์ Figma MCP

mcp-server-guide/skills/figma-create-new-file

สร้างไฟล์ Figma เปล่าใหม่ ใช้เมื่อผู้ใช้ต้องการสร้างไฟล์ออกแบบ Figma หรือไฟล์ FigJam ใหม่ หรือเมื่อคุณต้องการไฟล์ใหม่ก่อนเรียกใช้ use_figma จัดการการแก้ไขแผนผ่าน whoami หากจำเป็น การใช้งาน — /figma-create-new-file [editorType] [fileName] (เช่น /figma-create-new-file figjam My Whiteboard)

mcp-server-guide/skills/figma-design-to-code

ใช้ทักษะนี้เมื่อต้องการนำดีไซน์จาก Figma ไปใช้เป็นโค้ด (ดีไซน์ → โค้ด) — ในทิศทางที่อ่านจาก Figma ทริกเกอร์: 'implement this Figma design', 'build this…

mcp-server-guide/skills/figma-generate-design

ใช้สกิลนี้ควบคู่กับ figma-use เมื่อภารกิจเกี่ยวข้องกับการแปลหน้าแอปพลิเคชัน มุมมอง หรือเค้าโครงหลายส่วนลงใน Figma ทริกเกอร์: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code' นี่คือสกิลเวิร์กโฟลว์ที่ต้องการเมื่อผู้ใช้ต้องการสร้างหรืออัปเดตหน้าเต็ม หน้าจอ หรือมุมมองใน Figma จากโค้ดหรือคำอธิบาย ค้นหาคอมโพเนนต์ ตัวแปร และสไตล์ของระบบดีไซน์ผ่าน search_design_system นำเข้า และประกอบหน้าจอทีละส่วนโดยใช้โทเค็นของระบบดีไซน์แทนค่าที่เขียนตายตัว

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

สร้างหรืออัปเดตระบบดีไซน์ระดับมืออาชีพใน Figma จากโค้ดเบส ใช้เมื่อผู้ใช้ต้องการสร้างตัวแปร/โทเค็น สร้างไลบรารีคอมโ

mcp-server-guide/skills/figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-implement-motion

แปลการเคลื่อนไหวและแอนิเมชันจาก Figma เป็นโค้ดแอปพลิเคชันที่พร้อมใช้งานจริง ใช้เมื่อต้องการนำแอนิเมชัน/การเคลื่อนไหวจากดีไซน์ Figma ไปใช้งาน — ผู้ใช้กล่าวถึง…

mcp-server-guide/skills/figma-swiftui

การแปล SwiftUI ↔ Figma ใช้เมื่อผู้ใช้กล่าวถึง Swift, SwiftUI, iOS, iPhone หรือ iPad — ไม่ว่าทิศทางใด — แปลการออกแบบ Figma เป็น…

mcp-server-guide/skills/figma-use

We need to translate the given English text into Thai. The instruction says to preserve product names, protocol names, URLs, numbers, technical terms. The name "figma-use" is not in the text, so we don't include it. The text is a description of a prerequisite for using a skill. We must translate naturally while keeping terms like "use_figma", "JavaScript", "Figma", "auto-layout", "fills", "variables", "tokens", "components", "variants" as is. Also preserve "MANDATORY prerequisite" as is? Probably translate but keep the emphasis. The instruction says "preserve product names, protocol names, URLs, numbers, and technical terms." So "Figma" is a product name, "JavaScript" is a technical term, "use_figma" is a function name, "auto-layout", "fills", "variables", "tokens", "components", "variants" are technical terms. We should keep them in English. Also "MANDATORY prerequisite" might be kept as is

mcp-server-guide/skills/figma-use-figjam

ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของ FigJam สามารถใช้ควบคู่กับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…

mcp-server-guide/skills/figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

mcp-server-guide/skills/figma-use-slides

ทักษะนี้ช่วยให้เอเจนต์ใช้เครื่องมือ MCP use_figma ของ Figma ในบริบทของสไลด์ สามารถใช้ร่วมกับ figma-use ซึ่งมีบริบทพื้นฐานสำหรับการใช้…

mcp-server-guide/workflow-skills/generate-project-plan

สร้างบอร์ดแผนโครงการ FigJam จาก PRD และบริบทของโค้ดเบส โฟลว์แบบโต้ตอบ: ค้นคว้า → เสนอส่วนต่างๆ → ค้นคว้าเชิงลึกในแต่ละส่วน → แต่ละส่วน…

mcp-server-guide/skills/implement-design

แปลการออกแบบจาก Figma เป็นโค้ดที่พร้อมใช้งานจริงด้วยความเที่ยงตรงของภาพในระดับพิกเซล ต้องมีการเชื่อมต่อกับเซิร์ฟเวอร์ Figma MCP และ URL ของ Figma ที่มีคีย์ไฟล์และ ID โหนดเพื่อดึงบริบทการออกแบบ ภาพหน้าจอ และทรัพยากร ขั้นตอนการทำงานแบบมีโครงสร้างเจ็ดขั้นตอน: แยกวิเคราะห์ URL ดึงบริบทการออกแบบ จับภาพอ้างอิง ดาวน์โหลดทรัพยากร แปลงเป็นรูปแบบของโปรเจกต์ ทำให้เท่ากัน 1:1 และตรวจสอบกับ Figma ให้ความสำคัญกับการนำระบบการออกแบบกลับมาใช้ใหม่มากกว่าการทำซ้ำ แมปโทเค็นของ Figma กับการออกแบบของโปรเจกต์...

mcp-server-guide/workflow-skills/video-interaction-mapper

ทักษะนี้ควรใช้เมื่อผู้ใช้ขอให้วิเคราะห์การบันทึกหน้าจอ UI และแมปสถานะการโต้ตอบลงใน Figma เรียกใช้สำหรับคำขอเช่น "put video…