# Figma Code Workflows

Import or upload local HTML or project files into Figma, choose editable Design frames...

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-code-workflows -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-code-workflows -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-code-workflows -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-code-workflows -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

## 1. Choose the output and destination

Identify the user's intended output, then load the appropriate skill according to the table below. If the output is unclear, ask the user before proceeding.

| Input | User's requested output | Next action |
| --- | --- | --- |
| Running app or static HTML | Unspecified, just put/import it in Figma | Ask **"Editable design layers or a code layer?" and end your turn.** Wait for the answer. |
| Running app | Editable Design layers | Load `figma-generate-design`, then call `generate_figma_design` in a Design file. |
| Static HTML | Editable Design layers | Call `html_to_figma` in a Design file. |
| Running app | Runnable Code Layer or standalone Code/Make | Continue with this skill and call `send_code_to_figma`. |
| Static HTML | Runnable Code Layer or standalone Code/Make | Continue with this skill and call `send_code_to_figma`. |

An HTML project with working buttons is still ambiguous when the user has not chosen the output. A Design link only chooses the destination, not the output.

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills/figma-code-workflows/SKILL.md