Appearance
Component Parity
Vue Library ↔ Figma Design System alignment
37
Vue Components
3 Figma-only gaps
88%
Figma Migration
23 of 26 Figma sections covered
81%
Token Compliant
30 of 37 have no hardcoded hex values
64%
Avg Prop Coverage
Figma axes mapped to Vue props
| Component | Figma Name | Status | Figma Props | Prop Coverage | Hardcoded |
|---|---|---|---|---|---|
FTAlert | alert | Both | 14 | 46% | 0 |
FTBreadcrumb | Breadcrumb | Both | 16 | 17% | 0 |
FTButton | button-btn | Both | 15 | 88% | 0 |
FTCheckbox | Checkbox | Both | 11 | 100% | 0 |
FTDatePicker | Date picker with input | Both | 4 | 100% | 3 |
FTFlag | Flag | Both | 1 | 100% | 0 |
FTHeader | Header | Both | — | — | 0 |
FTInput | Input Fields | Both | 24 | 47% | 5 |
FTLogo | Logo | Both | — | — | 0 |
FTModal | Modal | Both | 8 | 17% | 0 |
FTOptionsSelector | Block Selector | Both | 11 | 25% | 0 |
FTPaging | pagination | Both | 6 | 100% | 0 |
FTPanel | Standard Panel | Both | 4 | 33% | 0 |
FTRadio | Radio | Both | 5 | 100% | 0 |
FTSelect | Input Fields | Both | 10 | 50% | 23 |
FTSelectableChip | FTSelectableChip | Both | 11 | 89% | 0 |
FTSideMenu | side menu | Both | 10 | 0% | 0 |
FTSpinner | Placeholder | Both | 10 | 17% | 0 |
FTTable | Row | Both | 14 | 67% | 0 |
FTTabs | tab | Both | 13 | 57% | 18 |
FTTag | Tag | Both | 16 | 90% | 0 |
FTToggle | Toggle | Both | 7 | 100% | 0 |
FTTooltip | tooltip | Both | 12 | 100% | 8 |
FTButtonAdd | — | Vue Only | — | — | 0 |
FTConfirm | — | Vue Only | — | — | 0 |
FTDataTable | — | Vue Only | — | — | 0 |
FTFloatingLabel | — | Vue Only | — | — | 1 |
FTIcon | — | Vue Only | — | — | 0 |
FTMarkdownText | — | Vue Only | — | — | 0 |
FTNavbar | — | Vue Only | — | — | 16 |
FTPageLayout | — | Vue Only | — | — | 0 |
FTRadioGroup | — | Vue Only | — | — | 0 |
FTRichText | — | Vue Only | — | — | 0 |
FTSlidingPanel | — | Vue Only | — | — | 0 |
FTSplitView | — | Vue Only | — | — | 0 |
FTTableFilter | — | Vue Only | — | — | 0 |
FTTooltipButton | — | Vue Only | — | — | 0 |
Card | Card | Figma Only | 8 | — | — |
ImagePicker | Image Picker | Figma Only | 40 | — | — |
Placeholder | Placeholder | Figma Only | 15 | — | — |