Figma & Code Connect

The companion file contains native editable frames, semantic variables, component sets, variants and instances. Foundations, controls, blocks and suite pages are organized separately so the same visual rules can be maintained across the product.

The native image ledger records content image fills and their placements separately from editable interface nodes. Whole-interface rasterization is excluded. The retained 1.2 native audit is tied to its frozen historical state; the separate native-generated-images-1.2.1 ledger records the exact new asset and placement review scope.

Local Code Connect templates

The current .figma/code-connect directory contains .figma.ts templates that map real component IDs to source examples, preserving the 44 core families and adding recorded appearance/material sets and all six effects. The manifest records exact native properties and source hashes. Publishing to Figma is a separate account operation and has not been performed.

// .figma/code-connect/Button.figma.ts — abbreviated example
import figma from "figma";
const instance = figma.selectedInstance;
const label = instance.getString("Label#3:0");
export default {
  id: "aureform-button",
  imports: ['import { Button } from "@/components/ui/button";'],
  example: figma.code`<Button>{${JSON.stringify(label)}}</Button>`,
  metadata: { props: { node: "3:113" } }
};
// The delivered file also maps styles, sizes, states and icons.

Keep the handoff coherent

When changing a component, review its default, focus, disabled and error states, its long Spanish labels and its dark-mode appearance. Regenerate the coverage manifest after updating a Figma node mapping. The exact file URL and node IDs are recorded in .figma/state.json.