Qt Figma Token Extraction

Bridges the gap between Figma design systems and Qt Quick apps by extracting color palettes, typography scales, spacing values, and other design tokens, then generating QML singletons you can drop straight into your project. Handles both the modern Variables API and legacy Styles, supports light/dark mode switching, and gives you two extraction paths depending on whether you want to use Figma MCP or run a curl command with your own access token. The generated files follow Qt Design Studio conventions with a Theme singleton that references a Primitives palette. Useful when your designers work in Figma but your UI is built in QML and you're tired of manually syncing token values or copy-pasting hex codes.

skills.sh installs: 508
GitHub stars: 534
last updated: Jun 10, 2026

View on GitHub

Install

$ npx -y skills add theqtcompanyrnd/agent-skills --skill qt-figma-token-extraction --agent claude-code

Installs into .claude/skills of the current project.

Files

Figma Token Extraction Skill

This skill extracts design tokens from a Figma file, maps them to QML types, and generates a ready-to-use QML design system with a unified Theme singleton.

Skill Structure

Supporting files are loaded alongside this SKILL.md:

qt-figma-token-extraction/
├── SKILL.md                        # this file — entry point
├── references/
│   └── token-mapping.md            # Figma variable type → QML type mapping rules
└── examples/
    ├── Primitives.qml      # primitive color palette template
    ├── Theme.qml           # semantic token template (references Primitives)
    ├── FontInterface.qml   # font loaders + icon index template
    ├── Spacing.qml         # spacing and radii template
    └── Typography.qml      # typography scale template

When reaching Step 4 (type mapping), read references/token-mapping.md before generating any QML. When generating QML files in Step 6, use the files in examples/ as structural templates — they reflect the real Qt Design Studio naming and organisation patterns.