figma/mcp-server-guide
These skills were imported into SkillJury from the public skills ecosystem.
code-connect-components
Establish bidirectional links between Figma design components and code implementations using Code Connect.
figma-code-connect
Create Code Connect template files ( .figma.ts ) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.
implement-design
Translates Figma designs into production-ready code with pixel-perfect visual fidelity.
figma-implement-design
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
figma-use
Use the use_figma tool to execute JavaScript in Figma files via the Plugin API. All detailed reference docs live in references/ .
create-design-system-rules
Custom design system rules for consistent Figma-to-code implementation across your project.
figma-create-design-system-rules
This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed...
figma-create-new-file
Use the create_new_file MCP tool to create a new blank Figma file in the user's drafts folder. This is typically used before use_figma when you need a fresh file to work with.
figma-generate-design
Use this skill to create or update screens, views, and multi-section UI containers in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. This includes full pages, modals, dialogs, drawers, sidebars, panels, and any composed view with...
figma-generate-library
Build professional-grade design systems in Figma that match code. This skill orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing quality patterns from real-world design systems (Material 3, Polaris, Figma UI3, Simple DS).