# qt-figma-token-extraction

Reads variables, text styles and tokens out of a Figma file, then writes design-tokens.json and working QML singletons built around one Theme.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 432 installs · ★ 507
- Author: qt-ai-skills
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-figma-token-extraction/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/qt-figma-token-extraction

## What it does

The skill walks your agent through a fixed sequence. It first asks which Qt project should receive the design system, then whether the Figma file has more than one variable mode, and only after that requests the file links. Variables or plain Styles are detected on its own, so you don't have to know which one your file uses.

Inside the skill folder are a type-mapping reference for Figma-to-QML conversion and five singleton templates: `Primitives.qml`, `Theme.qml`, `FontInterface.qml`, `Spacing.qml`, `Typography.qml`. They follow Qt Design Studio naming, which makes the output easier to drop into an existing codebase. Singleton registration in `CMakeLists.txt` happens at the end, once every file name is settled. For an empty project the skill also lays down `main.cpp` with `QGuiApplication` and a `Main.qml` stub.

On Qt 6 the module path matters. `loadFromModule()` resolves `Main.qml` under `qrc:/qt/qml/<URI>/`, while the Qt 5-style `qrc:/<URI>/` path fails without a clear error. With several variable modes and no terminal at hand, the agent falls back to MCP with manual mode switching. Your agent still needs Figma access, otherwise extraction never starts.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/qt-figma-token-extraction/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/qt-figma-token-extraction/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/qt-figma-token-extraction/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/qt-figma-token-extraction/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install TheQtCompanyRnD/agent-skills qt-figma-token-extraction
```

2. **Manually: put the files in place**
- File: `.github/skills/qt-figma-token-extraction/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/TheQtCompanyRnD/agent-skills --path skills/qt-figma-token-extraction
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/qt-figma-token-extraction/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add TheQtCompanyRnD/agent-skills --skill qt-figma-token-extraction -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/TheQtCompanyRnD/agent-skills/tree/HEAD/skills/qt-figma-token-extraction/SKILL.md

## When to use it
- pull a color palette and type scale from Figma
- produce a JSON file of design tokens
- generate QML singletons that match Qt Design Studio
- split light and dark themes across variable modes
- bootstrap a Qt Quick project from nothing

## Example prompts
- Export the design tokens from our Figma file and generate `design-tokens.json` with QML singletons
- Re-extract tokens from Figma and update the colors in this project
- Map the Figma variables to QML and register the singletons in `CMakeLists.txt`

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [theqtcompanyrnd/agent-skills](https://affpapa.org/en/nevibecode/by/theqtcompanyrnd/agent-skills.md) — 12 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md