# qt-figma-token-extraction

> Claude/Codex skill by [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars · Updated 2026-10-20

Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull their design system out of Figma — whether they say "export tokens from Figma", "get design tokens", "set up my design system", "read our Figma design system", "get Figma variables into QML", "pull our color palette from Figma", "import design tokens", "extract colors/typography/spacing from Figma", or similar. Trigger this skill at the start of any design-system workflow that involves a Figma source.

Tags: ai-skills, claude-code, codex, github-copilot, qml, qt

## Install

```sh
git clone https://github.com/TheQtCompanyRnD/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/qt-figma-token-extraction ~/.claude/skills/qt-figma-token-extraction
```

## From README

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: 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. --- Step 0 — Check Qt Project Always call the AskUserQuestion tool — even if a project appears to be open. Never assume the currently open project is the intended target. Before calling, read the context to personalise the question: If a project is already open (files visible, CMakeLists.txt present), name it in the first option so the user can confirm or redirect.

## Links

- HTML page: https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-figma-token-extraction/
- GitHub: https://github.com/TheQtCompanyRnD/agent-skills
- Author: [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md)

## More from this repo

- [qt-canvas2d](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-canvas2d/index.md) — Applies Qt Canvas2D (QtCanvas2D / Qt Canvas Painter, Qt 6.12+) best practices when producing or working with Canvas2D...
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars
- [qt-cmake-project](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-cmake-project/index.md) — Use to generate or update Qt 6 CMake projects or edit CMakeLists.txt, add sources/resources or define targets...
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars
- [qt-cpp-docs](https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-cpp-docs/index.md) — Generates standalone Markdown reference documentation for any Qt/C++ source files — Qt Widgets classes, Qt Quick...
   - [@theqtcompanyrnd](https://omgskills.com/library/theqtcompanyrnd/index.md) · 498 stars