Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Overview
  2. Figma Code Connect

Figma Code Connect

How Figma Dev Mode shows real @prepared911/ui snippets, where the templates live, and the check that keeps them honest.

Code Connect replaces the generic Dev Mode snippet for a component instance with one that uses the real @prepared911/ui component and props. The reference file is the Axon 911 Design System in Figma. A Figma component set maps to a code component only when its properties mirror the code props: same names, same values, same defaults.
Where the templates live
Each template sits beside the component it maps and is owned by the same team.
UnitTemplate
Componentpackages/ui/src/components/<id>/<id>.figma.ts
Blockpackages/ui/src/blocks/<id>/<id>.figma.ts
A template is a parserless figma.code template. It starts with three header lines and ends with a default export that has an id:
Map every Figma property that has a code prop. Do not write a prop the component does not declare; if a Figma property has no code prop, record it as a parity mismatch for the Figma owner.
The check
pnpm --filter @prepared911/ui code-connect:check runs in ci:gates and check. It fails when:
  • a published component or block has no template and is not in scripts/code-connect/unmapped-baseline.json;
  • a template writes a prop that the catalog does not list for the component;
  • a template names an enum member the code does not export;
  • a template's source or component does not resolve, a header line is missing, or the url is outside the Design System file;
  • a baseline id now has a template, or is no longer published.
A new component ships with a template, or the pull request adds its id to the baseline and says why. The baseline only shrinks.
Try a template
This parses every template and prints what would be published. It needs no Figma token. Publishing is a separate step; see the Figma Code Connect decision record in packages/ui/docs/decisions/0030-figma-code-connect.md.
Mapped components
  • Button
Previous
Getting Started
Next
Releases
On this page
Where the templates live
The check
Try a template
Mapped components