--- title: "Exports and imports" description: "Export a config, Figma tokens, a project or an agent handoff, and import any of them back." requested_language: cs language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/cs/design/systhema-design/exports-and-imports version: unreleased (main) docs_index: https://docs.systhema.app/cs/llms.txt --- > This page isn't translated yet. Showing English. 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. ## Exports 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`](https://docs.systhema.app/cs/design/figma.md) 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`](https://docs.systhema.app/cs/getting-started/quick-start.md) 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. | ## Imports 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.