Skip to main content
Question

Expose stable component identity for instance swap properties in parserless Code Connect

  • August 24, 2026
  • 0 replies
  • 6 views

Kevin Hoogkamer

# Expose stable component identity for instance swap properties in parserless Code Connect

 

## Problem

 

When using parserless Code Connect templates, `getInstanceSwap()` returns an `InstanceHandle`

whose `symbolId` represents a file-local component node ID.

 

The same library component can have multiple local aliases in a consuming Figma file. For example,

one icon may appear under these IDs:

 

```text

5:154       Library component ID

11221:2421  Local alias

12041:6322  Another local alias

```

 

Although all three represent the same library component, Code Connect only exposes the local

`symbolId`. This makes it difficult to translate an instance swap into framework-specific code:

 

```ts

const icon = instance.getInstanceSwap('StartIcon');

const iconName = iconsBySymbolId[icon.symbolId];

```

 

A manually generated mapping must currently:

 

1. Download the source library and consuming Figma file.

2. Match components using their stable component keys.

3. Discover every local alias for each component.

4. Generate a lookup table from every possible `symbolId` to its code representation.

5. Regenerate and republish whenever new aliases are introduced.

 

Without this mapping, valid swaps produce unknown values even though they reference a known library

component.

 

## Requested solution

 

Please expose a stable identity for swapped component instances, preferably the library component

key already used internally by Figma.

 

For example:

 

```ts

interface InstanceHandle {

  readonly symbolId: string;

  readonly componentKey?: string;

}

```

 

Code Connect templates could then use a stable mapping:

 

```ts

const icon = instance.getInstanceSwap('StartIcon');

const iconName = iconsByComponentKey[icon.componentKey];

```

 

Alternatively, `getInstanceSwap()` could return source-component metadata:

 

```ts

const icon = instance.getInstanceSwap('StartIcon');

 

icon.sourceComponent = {

  key: 'stable-library-component-key',

  name: 'AutoAwesome',

  nodeId: '5:154',

};

```

 

## Possible higher-level API

 

A native value-mapping API for instance swaps could remove the need for custom lookup logic

entirely:

 

```ts

const startIcon = instance.getInstanceSwap('StartIcon', {

  mapBy: 'componentKey',

  values: {

    '<stable-component-key>': '@Icons.Material.Outlined.AutoAwesome',

  },

});

```

 

## Expected benefit

 

This would make instance-swap mappings:

 

- stable across files and component aliases;

- independent of local node IDs;

- easier to maintain and publish;

- reliable for icons and other swappable library components;

- consistent with Figma's existing stable component-key model.