← All skills
figma-connect
82 / 100 · Low risk
Fine to try.
By anton-abyzov/vskill (GitHub) · design · 47 stars · scanned at commit 5b88d6c
Figma-to-code bridge combining Figma MCP server tools with the Code Connect CLI for end-to-end design implementation workflows. Use this skill when implementing UI components from Figma design URLs, publishing Code Connect mappings to Figma Dev Mode, extracting design tokens from Figma variables, setting up Figma Code Connect in a project, or running the full design-to-code roundtrip pipeline. Activate when the user shares a Figma design URL and wants code implementation, says 'implement from F…
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 22 places.
Show 17 more
- plugins/frontend/skills/figma-connect/SKILL.md, line 209
npx figma connect parse --label React - plugins/frontend/skills/figma-connect/SKILL.md, line 216
npx figma connect publish --dry-run - plugins/frontend/skills/figma-connect/SKILL.md, line 219
npx figma connect publish - plugins/frontend/skills/figma-connect/SKILL.md, line 302
5. **Verify**: Call `get_design_context` again with the same fileKey/nodeId. When Code Connect mappings are registered, the response includes Code Connect snipp - plugins/frontend/skills/figma-connect/SKILL.md, line 337
| `npx figma connect` not found | CLI not installed | `npm install -D @figma/code-connect` | - plugins/frontend/skills/figma-connect/evals/benchmark.json, line 29
"reasoning": "The LLM output explicitly mentions that `@figma/code-connect` ^1.4.2 is already installed, which constitutes verifying its availability as part of - plugins/frontend/skills/figma-connect/evals/benchmark.json, line 134
"reasoning": "The response explicitly includes 'npx figma connect parse → validate' as step 3 in the publish flow, which is a validation step before 'npx figma - plugins/frontend/skills/figma-connect/evals/benchmark.json, line 140
"reasoning": "The output explicitly describes publishing the Code Connect mapping via CLI in Step 4 of the publish flow: '`npx figma connect publish` → push to - plugins/frontend/skills/figma-connect/evals/benchmark.json, line 146
"reasoning": "The LLM output describes steps needed before publishing (creating component, installing CLI, setting auth token) but does not include any verifica - plugins/frontend/skills/figma-connect/evals/benchmark.json, line 161
"reasoning": "The output explicitly mentions `--dry-run` flag in the command `npx figma connect publish --dry-run`" - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 10
npm install -g @figma/code-connect - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 19
npx figma connect [--token TOKEN] - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 26
npx figma connect create <figma-node-url> [--token TOKEN] [-o outFile] [-o outDir] - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 32
npx figma connect publish [--token TOKEN] [--dry-run] [--skip-validation] [-l label] [-b batch-size] [--exit-on-unreadable-files] - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 42
npx figma connect unpublish [--node URL] [-l label] [--token TOKEN] - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 48
npx figma connect parse [-l label] [--outFile file] - plugins/frontend/skills/figma-connect/references/code-connect-cli-reference.md, line 54
npx figma connect migrate [--outDir dir] [--javascript] [--typescript] [--include-props]
and 2 more places
Runs commands on your computer
This is disclosed by the author in the skill's SKILL.md or README.
Found in 3 places.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'figma-connect' ] || [ -L ~/.agents/skills/'figma-connect' ]; then echo 'A skill folder named figma-connect already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/anton-abyzov/vskill' "$d" && git -C "$d" checkout --quiet '5b88d6c775780e8f31c43cbbbb91b6fcf6bbe8dd' -- 'plugins/frontend/skills/figma-connect' && mkdir -p ~/.agents/skills && cp -R "$d"/'plugins/frontend/skills/figma-connect' ~/.agents/skills/'figma-connect' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'figma-connect' ~/.claude/skills/'figma-connect' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for anton-abyzov/vskill shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/anton-abyzov/vskill/)
Score history
| Date | Version | Score |
|---|
| 2026-11-11 | 5b88d6c | 82 |
| 2026-11-08 | 1b83d04 | 82 |
| 2026-11-06 | 1b83d04 | 82 |