# qt-figma-component-generation

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

Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether they say "generate components from Figma", "create QML controls based on a design system", "convert Figma components to QML", "build the component library", "extract button/input/checkbox from Figma", or anything similar. Requires design-tokens.json and QML design system singletons to already exist (from the token extraction skill). Uses Figma MCP to inspect components one at a time and maps variants, states, sizing, and token usage to idiomatic Qt Quick Controls 2 patterns. Trigger this skill at the component generation step of any QML design-system workflow.

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-component-generation ~/.claude/skills/qt-figma-component-generation
```

## From README

Figma Component Generation Skill This skill reads component definitions from a Figma file via MCP and generates production-ready QML control files that consume the design-system singletons produced by the token-extraction skill. --- Prerequisites Before generating any components, confirm all of the following exist in the project: design-tokens.json — the merged token file from the token-extraction skill QML design system singletons — Primitives.qml, Theme.qml, Spacing.qml, FontInterface.qml in a design-system/ folder If either is missing, stop and run the token-extraction skill first (qt-figma-token-extraction). Verify Figma MCP is connected — confirm that getmetadata and getdesigncontext are available in the tool list. If not, tell the user: "The Figma MCP connector isn't connected yet. Connect it via your MCP configuration, then come back and we can start." Do not proceed until the connection is confirmed.

## Links

- HTML page: https://omgskills.com/library/theqtcompanyrnd/agent-skills/skills/qt-figma-component-generation/
- 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