Integrate Figma Designs into AI Programming Workflows with OpenAI's Official Figma Skill
This article introduces the Figma Skill curated by OpenAI: how it cooperates with Figma MCP (mcp.figma.com) to obtain design context, screenshots, variables and resources, and converts design nodes into project code through a fixed workflow. It verifies the installation methods ($skill-installer / directory copy), the MCP configuration of Codex (FIGMA_OAUTH_TOKEN, RMCP client), the mandatory toolchain (get_design_context → get_metadata → get_screenshot), and the link-driven prompt writing method, which is suitable for developers who carry out design-to-code collaboration in Codex, Cursor and Claude Code.
Read More# Figma-Create-Design-System-Rules: Develop Project-Specific Design System Rules for Agents
This is an introduction to `figma-create-design-system-rules` in the openai/skills curated catalog: On the premise of connecting Figma MCP, it analyzes the codebase and generates project-level design system rules, constraining component paths, Design Tokens, styling solutions and the Figma-to-code workflow, and writes them into `CLAUDE.md`, `AGENTS.md` or `.cursor/rules/figma-design-system.mdc` respectively, to alleviate problems such as random use of spacing, hard-coded colors, and repeated creation of components when AI implements UI. The article verifies the installation method, five-step workflow and precautions.
Read MoreUse figma-generate-design to reverse-generate pages from code into Figma
This article introduces the `figma-generate-design` Skill in the OpenAI curated and Figma MCP ecosystems: on the premise that Figma MCP is connected and the target file has a design system, it writes application pages or multi-block layouts into Figma in the form of component instances and Tokens, and forcibly cooperates with `figma-use`. The article verifies official processes including plugin installation (Cursor / Claude Code / Codex), npx skills installation method, block assembly and parallel calibration of `generate_figma_design`, as well as the boundaries between adjacent Skills such as `figma-implement-design` and Code Connect.
Read More