qt-figma-component-generation

Official

Automate QML component generation from Figma designs.

AuthorTheQtCompanyRnD
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

Figma MCPdesign-tokens.jsonQML design system singletons

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: qt-figma-component-generation
Download link: https://github.com/TheQtCompanyRnD/agent-skills/archive/main.zip#qt-figma-component-generation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.