Figma export workflow

DynUI can source a ComponentManifest from Figma while keeping the manifest as the only runtime dependency. Figma is an authoring source, not part of the render path.

Authoring convention

Designers add a fenced dynui JSON block to a component description:

```dynui
{
  "id": "recovery-score-card",
  "category": "insight",
  "description": "Shows recovery readiness and why it changed.",
  "surfaces": ["activity-detail"],
  "audience": ["recovery", "performance"],
  "priority": 80
}
```

File-level configuration lives in a text node named @dynui/config. Use it for surface constraints and library-wide rules, not one-off component behavior.

Export pipeline

The recommended pipeline is:

1. Fetch or export the Figma file JSON.
2. Run validateFigmaFile(fileJson) to catch node-specific authoring errors.
3. Run extractFromFigmaFile(fileJson).
4. Convert with figmaToManifest(exported).
5. Run migrateManifest.
6. Run lintManifest.
7. Diff against the previous accepted manifest with diffManifest.
8. Run renderer compatibility checks.
9. Commit the accepted manifest as a versioned artifact.

Figma extraction should happen before release, in tooling or CI. Your production app should consume the accepted manifest, not call Figma.

Code

import { migrateManifest } from "@dynui/contracts";
import {
  extractFromFigmaFile,
  figmaToManifest,
  lintManifest,
  lintPassed,
  validateFigmaFile,
} from "@dynui/figma";

const issues = validateFigmaFile(fileJson);
if (issues.length) {
  throw new Error(JSON.stringify(issues, null, 2));
}

const exported = extractFromFigmaFile(fileJson);
const manifest = migrateManifest(figmaToManifest(exported));

const lint = lintManifest(manifest);
if (!lintPassed(lint)) {
  throw new Error(JSON.stringify(lint, null, 2));
}

What validation catches

validateFigmaFile catches authoring issues close to the source:

• malformed dynui JSON;
• duplicate generated ids;
• missing required annotation fields;
• invalid audience or surface values;
• ambiguous or weak component contracts.

Manifest lint catches governance issues after extraction:

• missing descriptions;
• weak contracts;
• ambiguous variants;
• missing experiment goals;
• wildcard audience that should be narrower;
• deprecated components;
• breaking manifest diffs.

Design review before export

Before accepting a manifest, review:

• whether each component belongs on the listed surfaces;
• whether audience tags match real product intent;
• whether priority matches above-the-fold hierarchy;
• whether required data is truly required;
• whether neutral components cover cold-start and no-consent states;
• whether slots allow only coherent child categories.

This review should happen on the generated screens as well as the component annotations.

Handoff contract

The handoff artifact is the manifest plus its diff. Engineering should not need to interpret Figma manually at runtime, and design should not need to inspect application code to understand which personalized states are allowed.

The manifest is the shared source of truth between the two.