skillfed

Qt Figma Component Generation

This skill transforms Figma components into idiomatic Qt Quick Controls by extracting design metadata via MCP and mapping variants, states, and tokens to QML. It works with two implementation patterns—inline self-contained components or style singletons for multi-theme support—and requires the design-tokens.json output from the token-extraction skill.

Qt Figma Component Generation automates QML control creation from Figma design systems using MCP extraction and token mapping.

AI-generated summary based on this skill's SKILL.md

322 34 NOASSERTION updated by TheQtCompanyRnD

Install

TheQtCompanyRnD/agent-skills/qt-figma-component-generation · repository language: QML

CLI (skillfed)coming soon
git clone https://github.com/TheQtCompanyRnD/agent-skills
cp -r agent-skills ~/.claude/skills/qt-figma-component-generation

generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How does Qt Figma Component Generation convert Figma mockups to Qt?

Qt Figma Component Generation transforms Figma components into idiomatic Qt Quick Controls by extracting design metadata via MCP and mapping variants, states, and tokens to QML. The skill supports two implementation patterns: inline self-contained components or style singletons for multi-theme support, and requires the design-tokens.json output from the token-extraction skill.

Can I generate Qt components automatically from Figma designs?

Yes. Qt Figma Component Generation automates the creation of Qt components directly from your Figma designs. It extracts design metadata, maps component variants and states to QML, and generates idiomatic Qt Quick Controls code ready for integration into your application.

What is a Figma to Qt code generator and how does it work?

Qt Figma Component Generation is a Figma-to-Qt code generator that streamlines designer-to-developer handoff. It extracts design tokens and component metadata from Figma, then automatically generates QML code that maps to Qt Quick Controls, supporting both single-component and multi-theme singleton patterns.

Can Qt Figma Component Generation export Qt UI code directly from Figma?

Yes. Qt Figma Component Generation enables direct export of Qt UI code from Figma designs. It uses MCP to extract design metadata and generates QML that maps variants, states, and design tokens to Qt Quick Controls, supporting inline components or style singletons for theme management.

What implementation patterns does Qt Figma Component Generation support?

Qt Figma Component Generation works with two patterns: inline self-contained components for single-use cases, and style singletons for multi-theme support. Both patterns map Figma design tokens, variants, and states to idiomatic Qt Quick Controls code.

What dependencies does Qt Figma Component Generation require?

Qt Figma Component Generation requires the design-tokens.json output from the token-extraction skill. This file provides the design tokens that the skill maps to QML, ensuring consistent styling across your generated Qt components.

Related skills

Tags

design-to-code ui-automation cross-platform-dev figma-integration code-generation component-library rapid-prototyping designer-developer-workflow