5.2 Outlook

This project concludes the bachelor's thesis and provides a functional foundation for synchronizing design tokens between Figma and CSS. We intend to continue development; however, the precise post‑thesis arrangement remains to be defined with the supervising coaches.

Post‑thesis continuation (to be confirmed)

Both the team and the coaches are interested in continuing the work beyond the thesis, focusing on maturing the prototype into a dependable tool for practice. Governance, licensing, funding or compensation, and ownership are not yet settled; it is undecided whether the project will remain under the current organization, be open‑sourced, or proceed as an independent fork owned by the student team.

Future work

Now — stabilize color and foundations

While the current implementation provides a working baseline, there is clear potential to offer a finer‑grained user experience in multiple areas.

• Palette steps and mixing controls: Enable defining the number of palette steps (via color styles), with direct controls for mix percentages and opacity to fine‑tune generated swatches.

• Selective export: Allow exporting variables from a specific group rather than an entire collection to give tighter control over what is synced.

• References: Variable references are supported for solid Figma color fills, maintaining a stable mapping between CSS custom properties, Figma variables, and Figma color styles, and preserving var() chains and aliases on import and export. Future work will aim to support variable references in gradients, including new types like diamond gradients, and ensure proper handling.

• Modern color syntax robustness: Normalize and support common variants of color-mix() and gradient syntaxes. Emit clear, actionable error messages for unsupported constructs and provide safe degradations where necessary.

• Show semantic colors on the color palette: Visualize which tokens map to each swatch (for example, with badges or overlays), so designers can immediately see which colors are in use.

Testing and performance

Expand unit and integration tests for colors and new variable types; write unit tests for every function, and refactor functions

UX and accessibility

Improve progress and error messages with actionable guidance so users understand what happened, why, and how to fix it. Integrate contrast‑aware palette checks and pre‑export validation that flags or blocks non‑compliant tokens, with clear suggestions.

Next major milestone — Text styles (Typography)

• Variable types (core): Implement number, string, and boolean variables end to end. For numbers, provide unit handling and validation (for example, px, rem, ms) and consistent scaling.

• Variable mapping: Link text styles to variables by mapping font families (string) and font sizes, line heights, and letter spacing (numbers). Ensure styles reference variables and export cleanly to CSS custom properties while preserving references.

• Scales and consistency: Define and enforce type scales and line-height strategies (for example, unitless versus px/rem) during import and export to ensure consistent results.

• Validation and migration: Introduce checks for accessible text sizing and contrast combinations, and provide a guided migration flow to convert existing text styles to a variable‑first model.

Next

• Other Figma styles: Extend round‑trip support to effect styles, layout/grid styles, and stroke/border tokens with consistent export behavior.

Collectively, these steps aim to transform the current prototype into a robust, empirically validated bridge between design and code, while maintaining a cautious, standards‑oriented approach as post‑thesis governance is defined.