Work in progress…

A helpful reference: the official Figma repository — https://github.com/figma/sds/blob/main/figma.config.json

Use AI for prop mapping

If your organization has Figma’s AI plan as part of an enterprise membership, you can use the feature that maps props using AI when running npx figma connect (AI prop mapping).

importPaths

You can change the import paths shown in Dev Mode when figma connect publish makes code visible. By default it shows the hardcoded relative path in the generated Button.figma.tsx, for example:

import Button from "../src/components/Button"
<Button>
    ...
</Button>

By adding settings in figma.config.json:

{
  "codeConnect": {
    "importPaths": {
      "src/*": "@shared/ds-react"
    },
    ...
  }
}

You can change the import to:

import Button from "@shared/ds-react"
<Button>
    ...
</Button>

imports

If importPaths doesn’t give you the desired result, you can force an import override using the imports option.

figma.connect(Button, "https://...", {
  imports: ["import { Button } from '@lib'"]
})

documentUrlSubstitutions

Reusable nodes in Figma have stable URLs. If you hardcode those URLs into generated code, any change to the node in the design can break or require code changes. documentUrlSubstitutions lets you treat those Figma node URLs as variables to avoid that fragility.

"documentUrlSubstitutions": {
  "<FIGMA_ICONS_BASE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi",
}

figma.connect(Icon, '<FIGMA_ICONS_BASE>', {
  ...
})