Domaqonix UI Component Tool

Domaqonix UI Component Tool helps you keep your Figma component library consistent with the Domaqonix design system conventions — and turns validated components straight into code. Select any component or component set and instantly inspect its structure: part names, part groups, variable bindings, and variant consistency — all without leaving Figma.

Features:

Naming validation — checks Group/Name and Group/Name/Component-Mode conventionsParts inspection — lists all _part and _part|group nodes, including the implicit rootVariable bindings — shows which variables are bound per part and property, aggregated across all variants, with the resolved value and any applied typography stylesRule-based validation — runs checks on naming, part structure, part matrix consistency, and variable binding conventionsComponent browser — browse all components grouped by design system groupPart matrix — visualize part consistency across all variants of a component set; intentional part absences can be marked as accepted so they don't count as inconsistenciesReference view — built-in cheat sheet for Domaqonix naming and variable conventionsDeveloper Mode — a second, code-first view of the same component. Generates the CSS-variants configuration (Tailwind classes via css-variants), color/size mapping files, a TypeScript props interface, and an initial Vue component skeleton directly from the component's part hierarchy and variable bindings, plus a base color/size token export — each with one-click copy, ready to drop into your component libraryThis plugin is in early access and actively being developed. New validation rules, additional checks, and further quality-of-life improvements are planned. Feedback is welcome.