
Qt Figma Component Generation
by TheQtCompanyRnD71d6c10da78bLicenseRef-Qt-Commercial OR BSD-3-ClauseListed Oct 8, 2026Updated Oct 8, 2026
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.
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| assets/qt-controls/BadgeLabel.qml | 4 KB | text/plain |
| assets/qt-controls/BadgeLabelStyle.qml | 3.4 KB | text/plain |
| assets/qt-controls/BadgeNotification.qml | 3.8 KB | text/plain |
| assets/qt-controls/BadgeNotificationStyle.qml | 2.7 KB | text/plain |
| assets/qt-controls/Button.qml | 5.6 KB | text/plain |
| assets/qt-controls/ButtonStyle.qml | 8.2 KB | text/plain |
| assets/qt-controls/Card.qml | 22.6 KB | text/plain |
| assets/qt-controls/CardStyle.qml | 4.4 KB | text/plain |
| assets/qt-controls/CheckBox.qml | 4.2 KB | text/plain |
| assets/qt-controls/CheckBoxStyle.qml | 5.4 KB | text/plain |
| assets/qt-controls/ComboBox.qml | 7.1 KB | text/plain |
| assets/qt-controls/ComboBoxStyle.qml | 6.8 KB | text/plain |
| assets/qt-controls/DialogButtonBox.qml | 2 KB | text/plain |
| assets/qt-controls/DialogButtonBoxStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/Dialog.qml | 4.2 KB | text/plain |
| assets/qt-controls/DialogStyle.qml | 2.1 KB | text/plain |
| assets/qt-controls/IconButton.qml | 4 KB | text/plain |
| assets/qt-controls/IconButtonStyle.qml | 4.6 KB | text/plain |
| assets/qt-controls/Indicator.qml | 2.2 KB | text/plain |
| assets/qt-controls/IndicatorStyle.qml | 1.5 KB | text/plain |
| assets/qt-controls/ItemDelegate.qml | 2.7 KB | text/plain |
| assets/qt-controls/ItemDelegateStyle.qml | 2.4 KB | text/plain |
| assets/qt-controls/Label.qml | 1.4 KB | text/plain |
| assets/qt-controls/LabelStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/LinkInline.qml | 1.9 KB | text/plain |
| assets/qt-controls/LinkInlineStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/LinkList.qml | 2.4 KB | text/plain |
| assets/qt-controls/LinkListStyle.qml | 1.7 KB | text/plain |
| assets/qt-controls/LinkStandalone.qml | 2.4 KB | text/plain |
| assets/qt-controls/LinkStandaloneStyle.qml | 1.6 KB | text/plain |
| assets/qt-controls/ListItem.qml | 6.3 KB | text/plain |
| assets/qt-controls/ListItemStyle.qml | 2.9 KB | text/plain |
| assets/qt-controls/MenuButton.qml | 4.4 KB | text/plain |
| assets/qt-controls/MenuButtonStyle.qml | 3 KB | text/plain |
| assets/qt-controls/MenuItem.qml | 2.7 KB | text/plain |
| assets/qt-controls/MenuItemStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/Menu.qml | 1.9 KB | text/plain |
| assets/qt-controls/MenuStyle.qml | 1.2 KB | text/plain |
| assets/qt-controls/PaginationDot.qml | 2.6 KB | text/plain |
| assets/qt-controls/PaginationDotStyle.qml | 2.2 KB | text/plain |
| assets/qt-controls/PaginationIndex.qml | 2.2 KB | text/plain |
| assets/qt-controls/PaginationIndexStyle.qml | 1.4 KB | text/plain |
| assets/qt-controls/PaginationNumber.qml | 10.7 KB | text/plain |
| assets/qt-controls/PaginationNumberStyle.qml | 3.5 KB | text/plain |
| assets/qt-controls/Popup.qml | 1.4 KB | text/plain |
| assets/qt-controls/PopupStyle.qml | 1 KB | text/plain |
| assets/qt-controls/ProgressBar.qml | 3.1 KB | text/plain |
| assets/qt-controls/ProgressBarStyle.qml | 1.5 KB | text/plain |
| assets/qt-controls/RadioButton.qml | 3 KB | text/plain |
| assets/qt-controls/RadioButtonStyle.qml | 3 KB | text/plain |
| assets/qt-controls/RangeSlider.qml | 5 KB | text/plain |
| assets/qt-controls/RangeSliderStyle.qml | 3.7 KB | text/plain |
| assets/qt-controls/ScrollBar.qml | 2.6 KB | text/plain |
| assets/qt-controls/ScrollBarStyle.qml | 3.3 KB | text/plain |
| assets/qt-controls/SearchField.qml | 6 KB | text/plain |
| assets/qt-controls/SearchFieldStyle.qml | 4 KB | text/plain |
| assets/qt-controls/SearchMenu.qml | 14.6 KB | text/plain |
| assets/qt-controls/SearchMenuStyle.qml | 4.7 KB | text/plain |
| assets/qt-controls/Slider.qml | 3.8 KB | text/plain |
| assets/qt-controls/SliderStyle.qml | 3.8 KB | text/plain |
| assets/qt-controls/SortFilterModel.qml | 1.6 KB | text/plain |
| assets/qt-controls/SpinBox.qml | 5.8 KB | text/plain |
| assets/qt-controls/SpinBoxStyle.qml | 3.5 KB | text/plain |
| assets/qt-controls/Switch.qml | 3.5 KB | text/plain |
| assets/qt-controls/SwitchStyle.qml | 3 KB | text/plain |
| assets/qt-controls/TabBar.qml | 2 KB | text/plain |
| assets/qt-controls/TabBarStyle.qml | 886 B | text/plain |
| assets/qt-controls/TabButton.qml | 4.3 KB | text/plain |
| assets/qt-controls/TabButtonStyle.qml | 4.2 KB | text/plain |
| assets/qt-controls/Tag.qml | 4.4 KB | text/plain |
| assets/qt-controls/TagStyle.qml | 3.1 KB | text/plain |
| assets/qt-controls/TextField.qml | 7 KB | text/plain |
| assets/qt-controls/TextFieldStyle.qml | 4.6 KB | text/plain |
| assets/qt-controls/Toolbar.qml | 1.5 KB | text/plain |
| assets/qt-controls/ToolbarStyle.qml | 1 KB | text/plain |
| assets/qt-controls/ToolTip.qml | 7.4 KB | text/plain |
| assets/qt-controls/ToolTipStyle.qml | 2.2 KB | text/plain |
| assets/qt-controls/TreeViewDelegate.qml | 4.3 KB | text/plain |
| assets/qt-controls/TreeViewDelegateStyle.qml | 2.8 KB | text/plain |
| README.md | 4.2 KB | text/markdown |
| references/Button.qml | 11.5 KB | text/plain |
| references/Checkbox.qml | 7.1 KB | text/plain |
| references/Select.qml | 9.7 KB | text/plain |
| references/TextField.qml | 7.2 KB | text/plain |
| references/Toggle.qml | 4.6 KB | text/plain |
| SKILL.md | 16.3 KB | text/markdown |
Source and attribution
Source:TheQtCompanyRnD/agent-skillsinskills/qt-figma-component-generationat commit71d6c10
License: LicenseRef-Qt-Commercial OR BSD-3-Clause
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from TheQtCompanyRnD/agent-skills

Qt Ui Design
TheQtCompanyRnD
Guides UI and UX design or audits for Qt/QML, web, and embedded targets using design principles and WCAG checks.

Qt Qml Test
TheQtCompanyRnD
Generates Qt Quick Test QML unit test files for QML components.

Qt Qml Profiler
TheQtCompanyRnD
Use when the user is investigating QML / Qt Quick performance — both vague complaints ("the UI feels laggy", "this is slow", "frames are dropping", "the app stutters") and explicit asks to profile, find hotspots, or optimize bindings, signals, or rendering. Runs qmlprofiler on a 2D QML application, parses the .qtd trace, and analyzes hotspots against the source with frame-time, memory, and pixmap-cache summaries. Does NOT cover Qt Quick 3D.

Qt Qml Docs
TheQtCompanyRnD
Generates standalone Markdown reference documentation for QML components and applications. Use this skill whenever you want to document QML files, create API reference docs for a QML component or module, document a Qt Quick application, or produce developer-facing documentation from .qml source code. Triggers on: "document this QML", "write docs for my QML", "create reference docs", "document QML component", "QML API docs", "document my Qt Quick component", "document my Qt app", or any time one or more .qml files are provided and documentation is needed. Works with single files, pasted code, or entire project folders. DO NOT use if the user asks for QDoc format output.

Qt Qml
TheQtCompanyRnD
Applies QML best practices when producing or working with QML source code. Use whenever QML code is the primary subject: writing, reviewing, fixing, refactoring, optimizing, or debugging QML files, components, or bindings. Do NOT trigger for purely conversational QML questions where no code is produced or examined (e.g. "explain how anchors work").

Qt Figma Token Extraction
TheQtCompanyRnD
Extracts design tokens from Figma and generates a design-tokens.json plus QML singleton files for a Qt project.
More in Design & Creative

Theme Factory
anthropics
Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Slack Gif Creator
anthropics
Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Frontend Design
anthropics
Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Canvas Design
anthropics
Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Brand Guidelines
anthropics
Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Frontend Design
anthropics
Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.