figma-code-workflows
Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standalone Code (also known as Make), and repair imported previews. Use only when the user explicitly names editable Design layers, a runnable Code Layer, or a standalone Code/Make file, or supplies a Figma file key/link as the import destination. Generic code or code-component requests need output clarification before using this workflow.
Install
With your agent
Install OMGSkills skill "figma/mcp-server-guide:skills/figma-code-workflows" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide && ln -s /tmp/mcp-server-guide/skills/figma-code-workflows ~/.claude/skills/figma-code-workflowsFrom README
Import a project into Figma Only use this workflow for an explicitly requested Figma output (standalone Code/Make, runnable Code Layer, or editable Design layers), or a Figma file key/link given as its destination. Generic “make a code project” or “create a code component” requests, and Figma Code/Make names alone, do not specify that output. If output intent is unclear, ask whether the user wants local code or a Figma output, then wait before starting this workflow. Preserve the user's project. Use each tool's current description and schema for prerequisites and parameters. Keep the user updated at the main stages: preparing and validating the project, uploading the archive, and completing the import in Figma. Report pending imports, recovery work and blockers as they occur; do not describe an unconfirmed stage as complete. Choose the output and destination Identify the user's intended output, then load the appropriate skill according to the table below.
More from this repo
figma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section...
figma-use
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
figma-generative-plugins
**MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`.