Overview
Evaluating DS health and native mobile readiness for SwiftUI and Jetpack Compose.
How It Works
Each component is evaluated against seven criteria. The report is self-contained and versions alongside the design system.
Inspect each Figma component against 7 criteria covering structure, naming, tokens, states, and Code Connect readiness.
Author a per-component data file in src/data/components/ with verdicts, traits, spec cards, and SwiftUI/Compose snippets.
Run npm run build — Astro compiles all 79 component pages into static HTML automatically.
Commit and push to main. The deploy workflow rebuilds the live site automatically.
Assessment Criteria
The overall status reflects the weakest criterion — one unresolved issue can block Code Connect linkability.
| ID | Criterion | What we check |
|---|---|---|
| C1 | Layer Structure & Naming | Layers should use semantic names like leading-icon or content — not Figma defaults like Frame 42 or Group 7. The hierarchy should be logical and free of orphaned wrappers. |
| C2 | Variant & Property Naming | Booleans should be true/false (not yes/no), enums should match the values native code expects, and property names should map cleanly to API parameters. |
| C3 | Token Coverage | Every color, size, radius, and spacing value should be bound to a design token. No hardcoded hex codes or pixel values. |
| C4 | Native Mappability | The component should map cleanly to a native SwiftUI / Compose primitive. No web-only patterns (CSS-only effects, hover-dependent UX, etc.). |
| C5 | Interaction State Coverage | All required states should exist as variants: default, pressed, focused, disabled, and any feature-specific states (loading, error, etc.). |
| C6 | Asset & Icon Quality | Icons should be vector instances with token-based coloring. No raster PNGs, no flattened paths, no hardcoded fills. |
| C7 | Code Connect Linkability | Property names should map 1:1 to native parameters with no transformation needed. Code Connect mapping should be straightforward. |
Trait Ratings
Per-trait scores for each component (Reusable, Self-contained, Consistent, Composable).
| Rating | Meaning |
|---|---|
| Fully met — ready for native handoff. | |
| Mostly met with minor gaps (e.g. missing icon slots, but text variants work). | |
| Significant concerns that limit reuse or block handoff (e.g. naming issues, raster assets, hardcoded values). | |
| Broken — blocks DS inclusion or native implementation (e.g. flattened icons, no separable layers). |
DS Verdicts
Overall DS Health outcome from all 4 traits.
| Verdict | Meaning |
|---|---|
| Keep | All 4 traits pass. Ship as-is. |
| Fix | Belongs in DS but has specific issues. Mostly pass/partial with a few warn. |
| Restructure | Needs significant property or architectural changes. |
| Consolidate | Merge into another component. |
| Product Layer | Too feature-specific for core DS. |
| Remove | Redundant, deprecated, or not a DS concern. |