adobe / adobe/spectrum-design-data
[Epic] Phase 4: Output generators and authoring app integration
- Dominant language
- Rust
- Stars
- 153
- Forks
- 35
- Avg merge
- 7h 54m
- Merged PRs (30d)
- 111
Description
## Description
Build output generators that produce consumable artifacts from cascade-format design tokens, starting with the highest-priority legacy JSON output and a Figma variables proof of concept. The longer-term goal is an authoring app (Electron desktop) that lets designers create and edit tokens visually, authoring changes as GitHub PRs.
## Revive trigger
> **Deferred until:** Glossary/Taxonomy Backbone phases 1–3 (anatomy audit, name-object restructuring, formatting/serialization) are complete and the name-object schema is stable. Building output generators or authoring affordances against a name-object that's still being redefined creates rework. Tracked by #952.
### Sub-issues
- [ ] #794 — Production-grade legacy JSON output
- [ ] #795 — Figma Variables output (proof of concept)
- [ ] #796 — Authoring workflow definitions
- [ ] #797 — Wireframe generation from workflow definitions
- [ ] #798 — Authoring app architecture design document
### Priority sequencing
#### Near-term (active)
1. **#794 Legacy JSON output** — Production-grade `migrate legacy-output` for generating `@adobe/spectrum-tokens` from cascade source. This is the highest priority: existing platform implementations consume the legacy format via custom scripts.
2. **#795 Figma variables output** (proof of concept) — Generate Figma Variables from resolved cascade tokens via CLI → Figma REST Variables API. Opens the conversation with designers about the authoring app. Note: Figma plugins cannot use WASM, so this is a Rust CLI command. Adobe has confirmed Enterprise plan access (Variables API confirmed working).
3. **#796 Authoring workflow definitions** — Formalize the git-based editing model: what workflows exist (create token, deprecate, rename, add dimension variant), how edits map to branches/PRs, what validation feedback looks like in real-time. These definitions serve as both structured requirements and input for wireframe generation.
4. **#797 Wireframe generation** — Use Claude to generate UI wireframes from the workflow definitions + spec schemas, giving designers a starting point for the authoring app UX. Depends on #796.
5. **#798 Authoring app architecture** — Technical design document for the Electron desktop app (Electron + napi-rs, GitHub auth, multi-repo model, real-time validation). Depends on #796 and #797.
#### Medium-term
- **Authoring app** (Electron desktop) — Authenticates with GitHub (PAT or OAuth), reads/writes token data across multiple repos, authors changes as pull requests. Uses the Rust core via napi-rs Node.js bindings.
- **CSS custom properties generator** — Produce CSS files from resolved tokens
- **DTCG export** — Export to W3C Design Tokens Community Group format (per RFC #627)
#### Future scope
- **Swift/Kotlin constants generators** — Produce native source files from resolved tokens
- **Plugin system** — Trait-based plugin architecture for custom output generators
- **Scaffold command** — `design-data scaffold` to generate a new platform manifest
- **LSP (Language Server Protocol)** — Editor integration for autocomplete, hover, validation
- **Watch mode** — File watcher for live validation on save
### Architecture
```
Cascade tokens (source of truth)
├── CLI: design-data legacy-output → @adobe/spectrum-tokens (JSON)
├── CLI: design-data figma-export → Figma REST Variables API
├── Authoring app (Electron + napi-rs)
│ ├── GitHub auth (PAT/OAuth)
│ ├── Multi-repo token editing
│ ├── Real-time validation (SPEC rules)
│ └── PR creation workflow
└── Future generators (CSS, DTCG, Swift, Kotlin)
```
### References
- [#625 — Token Authoring Workflow](https://github.com/adobe/spectrum-design-data/discussions/625)
- [#627 — DTCG Format](https://github.com/adobe/spectrum-design-data/discussions/627)
- [#715 — Distributed Design Data Architecture](https://github.com/adobe/spectrum-design-data/discussions/715)
- [#714 — Design Data Specification](https://github.com/adobe/spectrum-design-data/discussions/714)
- [#623 — Token Lifecycle Metadata](https://github.com/adobe/spectrum-design-data/discussions/623)
Contributor guide
Research direction
Start by reviewing the completion status of the Glossary/Taxonomy Backbone phases and the dependency tracked by #952, since this epic is explicitly deferred until the name-object schema is stable. Then read sub-issues #794–#798, beginning with legacy JSON output and Figma Variables; the epic is done only when its planned generators and authoring-app design work have been completed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- electron, github, rust
- Domain
- design, desktop, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 18/100