Exports and imports
Export a config, Figma tokens, a project or an agent handoff, and import any of them back.
On this page
Every Systhema Design export can be imported back, so a design can leave the editor, change in Figma, in a project or with an agent, and return.
ExportsLink to this section
Open the Export dialog from the toolbar. It offers four targets, each with a live preview of what will be produced and Copy / Download actions. Every target reads your current edits; with no edits, each target still produces valid output from Systhema's defaults.
| Target | Output | Use it to… |
|---|---|---|
| Systhema config | systhema.config.ts | Get a customTokens object to paste into an existing Systhema project. The build consumes it directly, including custom text-style composites and their font/responsive variables. References are emitted as DTCG {…} aliases, not flattened values; raw colours come out in your chosen Hex / RGBA / OKLCH format (the Figma DTCG + project-zip token JSON stay canonical hex). |
| Figma tokens | DTCG .zip | Import the design into Figma via the @systhemaui/figma plugin. The archive preserves the exact DTCG shape ($extensions, alias encoding, key order) the importer and core expect — it starts from a real export and mutates only the leaves you changed. |
| Full project | overlay .zip (Next or Payload) | Drop the design onto a freshly-scaffolded systhema create project. The overlay carries the token tree, systhema.config.ts, brand assets (favicon set, logos, OG image), uploaded fonts plus an @font-face stylesheet, SEO metadata, and an embedded systhema.design.json so the design can be re-imported later. It never includes a .env. |
| AI-agent artifact | systhema.design.json + a markdown diff | Hand the design to an AI agent. The JSON is the machine-readable "what to apply" — the token diff, fonts, and the resolved brand assets (sanitised SEO config, favicon description, and logo metadata, with binary blobs stripped); the markdown lists every changed token as path: before → after plus a "Brand assets" section. |
ImportsLink to this section
Open the Import dialog from the toolbar to bring a design back in — in whatever form you exported it. Drop a file (or pick one), or paste a config / JSON directly; the dialog auto-detects the format, shows a review summary of what it recovered (per-slice change counts, matched fonts, restored brand assets, and any warnings), and applies it either by replacing your current design (the default) or by merging over it.
| You have | What comes back |
|---|---|
systhema.config.ts (file or pasted text) | The full customTokens diff — colors (hex, RGBA, or OKLCH — all accepted), references (DTCG {…} aliases become live links again), sizing, custom text styles, and added palettes/modes. The generated config preserves type-scale settings and any fixed overrides separately. Web fonts are re-matched against the Fontsource catalog by family name. |
Figma DTCG .zip (from the plugin or the Export dialog) | The token tree is diffed against Systhema's defaults, so edits made in Figma flow back in: colors, aliases, sizing, type-scale settings, custom text styles with their variable bindings, added/renamed/removed palettes and color-system modes (with their order), and manually overridden heading cells. |
systhema.design.json (AI-agent artifact) | The exact editor state: token diff, palette/mode overlay, font selections, and SEO text. Binary assets (OG image, logos, favicon) aren't embedded in this format — the dialog warns you to re-upload them. |
Full-project overlay .zip | Everything: exact editor state from the embedded systhema.design.json, plus the actual binaries — uploaded fonts (public/fonts/*.woff2), header/footer logos, and the OG image. Older overlays without the embedded artifact fall back to importing their token tree + SEO metadata. The favicon source image isn't carried by any export, so it always asks for a re-upload. |
Round-trip fidelity is the point: exporting a design and importing it back reproduces the same editor state (the UI round-trip of a config export is byte-identical), and a Figma round-trip — export → edit in the plugin → re-export → import — keeps everything the DTCG format can express. The importer parses config files with a safe object-literal parser (it never evaluates your TypeScript) and validates zips are genuine Systhema exports before touching your state.