code-connect-components

Establish bidirectional links between Figma design components and code implementations using Code Connect. Requires Figma MCP server connection and published components on Organization or Enterprise plans Automatically identifies unmapped components in Figma selections, then scans your codebase for matching code components by name, structure, and props Presents matched components to you for review before creating mappings, allowing selective acceptance or rejection Supports multiple...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Download ZIP GitHub

More skills from figma

video-interaction-mapper

This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video…

figma-code-connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…

create-design-system-rules

Custom design system rules for consistent Figma-to-code implementation across your project. Generates project-specific conventions for component organization, styling, design tokens, and asset handling that guide AI agents to produce consistent code Supports three rule file formats: CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and .cursor/rules/figma-design-system.mdc for Cursor Requires Figma MCP server connection and codebase analysis to discover existing patterns before rule...

figma-implement-motion

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions…

SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into…

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…

figma-use-slides

This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the…

figma-use-figjam

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…