figma-implement-designbởi figma
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions…
npx skills add https://github.com/figma/dev-mode-mcp-server-guide --skill figma-implement-designThêm skills từ figma
figma-code-connect
by figma
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…
figma-create-design-system-rules
by figma
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design…
figma-create-new-file
by figma
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma.…
figma-generate-design
by figma
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…
figma-generate-diagram
by figma
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…
figma-generate-library
by figma
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set…
figma-use
by figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…
figma-use-figjam
by figma
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the…