Targets

A target is an output a project produces. Each project declares its targets at creation and can change them later - and that choice is kept separate from the design system itself, so the document stays neutral.

#The target catalog

  • React - code target. Available. The shipped code generator; selected by default.
  • Figma - design target. Available. Foundations as Variables and DTCG, components as component sets through the plugin.
  • Vue - code target. Coming soon. Defined as a target; generator not yet built.
  • Angular - code target. Coming soon. Defined as a target; generator not yet built.

#Selection is not entitlement

Choosing a target and being allowed to run it are separate concerns. A project can select Figma regardless of plan; the export action is gated separately and re-checked on the server. This keeps the modeling clean and the security boundary honest.

#React is the baseline

React is currently required because it's the only shipped code generator - a project needs at least one way to produce code. As more code targets ship, that rule generalizes to “at least one code target.”

#Targets live outside the document

A project's targets are stored as project metadata, not inside the design system. The document describes the design system; targets describe what this project does with it. Keeping them apart is what lets the same document feed any back-end.

#Per-target options

A target carries realization options of its own, set per project: for React, the emission idiom (a props API, a compound API, or both), naming, whether refs are forwarded and asChild is offered, and the date, time and colour representations. These are part of the generated components' public API, which is why the .milda file carries them too.

Designed

Listed as a target a project can select; no generator exists yet.

Once targets are chosen and generation runs, you release the result.