skills.rest
TheQtCompanyRnD
TheQtCompanyRnDOFFICIAL
Explore all skills by this author →
GitHub

qt-figma-component-generation

Convert Figma design components into QML control files for Qt Quick applications.

351|38|Updated Mar 26, 2026
Search Tags:#UI development#component generation#Figma#QML#Qt Quick
One-click install
npx skills add https://github.com/TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qt-figma-component-generation
Source: https://github.com/TheQtCompanyRnD/agent-skills/tree/main/skills/qt-figma-component-generation
Command: npx skills add https://github.com/TheQtCompanyRnD/agent-skills --skill qt-figma-component-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Figma MCP, design-tokens.json, QML design system singletons, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of converting Figma design components into production-ready QML control files, reducing manual design-to-code translation and speeding up UI development.

Core Features & Use Cases

  • Figma Component Extraction: Inspects Figma components and extracts design details like variants, states, and token references.
  • QML Control Generation: Maps Figma components to QML control files, supporting two implementation patterns (inline and style singleton).
  • Use Case: For a project with a Figma design system, use this Skill to generate QML files for UI components, significantly speeding up the development process.

Quick Start

Generate QML components from your Figma design by using the 'qt-figma-component-generation' skill.

Frequently Asked Questions about qt-figma-component-generation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma design components to QML files for Qt Quick?▼

You can convert Figma components to QML by using this Skill to extract design variants and token references via Figma MCP, automatically mapping them into production-ready QML control files for Qt Quick applications.

What is the best way to automate UI component generation from Figma for Qt Quick?▼

Automating UI component generation from Figma for Qt Quick is best handled by extracting Figma component details and mapping them to QML control files. This supports both inline and style singleton implementation patterns to accelerate UI development.

Do I need design-tokens.json and QML design system singletons to generate QML from Figma?▼

Yes, generating QML from Figma requires design-tokens.json and QML design system singletons. These dependencies establish the foundational design tokens and styling structures needed to accurately map Figma components to QML control files.

Can I use Figma MCP to extract component variants for QML control generation?▼

Yes, you can use Figma MCP to extract component variants for QML control generation. The Skill inspects Figma components to retrieve variants, states, and token references, translating them into QML control files using inline or style singleton patterns.

What are the inline and style singleton patterns when mapping Figma components to QML?▼

The inline and style singleton patterns are two supported implementation methods for mapping Figma components to QML. Inline embeds styling directly within QML control files, while style singleton patterns reference centralized QML design system singletons for property management.

Related Skills

Explore More Software Engineering Skills→
TheQtCompanyRnDTheQtCompanyRnD
351

qt-figma-token-extraction

Extract Figma design tokens and generate QML singleton files for Qt 6 projects.

Official
Advanced
TheQtCompanyRnDTheQtCompanyRnD
351

qt-qml-profiler

Profile QML/Qt Quick applications for CPU, memory, and rendering performance.

Official
Advanced
TheQtCompanyRnDTheQtCompanyRnD
351

qt-qml-test

Generate Qt Quick Test cases for QML components using TestCase and SignalSpy.

Official
Intermediate
iressiress
1

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

Official
Intermediate