Figma Code Connect
figma-code-connectDesignCreates and maintains Figma Code Connect template files that map Figma components to code snippets.
Skills bundled in Figma's plugin in OpenAI's official Codex marketplace (openai/plugins). Written and maintained by Figma.
As documented by the publisher; see the install steps below.
figma-code-connectDesignCreates and maintains Figma Code Connect template files that map Figma components to code snippets.
figma-create-new-fileDesignMANDATORY prerequisite — you MUST invoke this skill BEFORE every create_new_file tool call.
figma-design-to-codeDesignMANDATORY prerequisite — you MUST invoke this skill BEFORE calling the get_design_context Figma MCP tool.
figma-generate-designDesignUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma.
figma-generate-diagramDesignMANDATORY prerequisite — load this skill BEFORE every generate_diagram tool call.
figma-generate-libraryDesignBuild or update a professional-grade design system in Figma from a codebase.
figma-implement-motionDesignTranslates Figma motion and animations into production-ready application code.
figma-swiftuiDesignSwiftUI ↔ Figma translation.
figma-useDesignMANDATORY prerequisite — you MUST invoke this skill BEFORE every use_figma tool call.
figma-use-figjamDesignThis skill helps agents use Figma's use_figma MCP tool in the FigJam context.
figma-use-motionDesignMotion / animation context for the use_figma MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration.
figma-use-slidesDesignThis skill helps agents use Figma's use_figma MCP tool in the Slides context.
Open the Plugins tab (or the plugin browser in the Codex CLI), install the Figma plugin, and start a new session to use its skills.
From the publisher's official instructions, checked 27 Sept 2026. Skills can run code, so review a skill's SKILL.md before installing it.