A design handoff works best when variable meaning survives the transfer. Map design variables to semantic tokens, validate the token schema and inspect the app instead of copying raw colors everywhere.
- 1Design variables
- 2Semantic token mapping
- 3Asset catalog
- 4SwiftUI usage
Work through the example
Document one variable's role and four appearances. Resolve missing variants explicitly rather than guessing a dark conversion.
Start with a disposable branch and synthetic data. Write the expected outcome before changing the implementation, then keep the first failing result. This prevents a later repair from quietly redefining the task. The procedure below is grounded in the repository reference; its examples must still be checked against your project and installed toolchain.
Implementation reference
The following focused section is adapted from the maintained project guide. It preserves the source’s examples and limitations.
Optional Figma handoff
Use Figma's own integration to read variables if you already use it. Map semantic color names and light/dark/high-contrast modes to the JSON fields above. Resolve aliases to explicit sRGB hex values first. The same JSON can be authored by hand; Figma and its MCP are optional. There is no maintained Figma parser here.
Acceptance and failure review
| Checkpoint | What to inspect | If it does not match |
|---|---|---|
| Design variables | Confirm the input and environment | Preserve the failure and return to this step |
| Semantic token mapping | Inspect the intermediate artifact | Preserve the failure and return to this step |
| Asset catalog | Run the focused check | Preserve the failure and return to this step |
| SwiftUI usage | Record the observed result | Preserve the failure and return to this step |
Ask the agent to explain the smallest change that resolves the observed mismatch. Keep unrelated refactors out of the repair. A change that makes a warning disappear is not enough if the behavior or ownership contract has changed. Re-run the same acceptance check so the before and after results are comparable.
Evidence and limits
No live Figma import session was run; this is the supported handoff contract, not a custom parser.
This is an educational guide. Its presence in the series does not certify a completed client-specific lab. The series evidence record separates executed checks from exercises and blocked environments.
Inspect the source used in this lesson.
Related reading
- Generate light and dark asset catalogs without a paid design tool
Turn explicit color tokens into Assets.xcassets, then inspect the result in your app.
- How can design tokens generate light, dark and high-contrast color assets?
Generate a real xcassets catalog from explicit color tokens, inspect its four variants, and compile it with actool.
What to do next
Next: Swift Testing vs XCTest: what to have the agent generate in 2026