Skip to main content

​
Overview

Applies previously extracted override properties to one or more target component instances. Target instances will be swapped to match the source component and all override properties will be applied.
This is part of the Instance Override Propagation workflow contributed by @dusskapark. See the demo video.
You must first call get_instance_overrides to capture overrides before using this tool.

​
Parameters

​
sourceInstanceId
string
required
ID of the source component instance that overrides were extracted from using get_instance_overrides
​
targetNodeIds
array
required
Array of target instance IDs to apply the overrides to. Each instance will be updated with the captured overrides.

​
Response

​
success
boolean
Whether the overall operation succeeded
​
message
string
Success or error message describing the result
​
totalCount
number
Total number of override properties that were applied
​
results
array
Detailed results for each target instance

​
Usage Example

// Step 1: Extract overrides from source instance
const sourceOverrides = await get_instance_overrides({
  nodeId: "source-instance-id"
});

if (!sourceOverrides.success) {
  throw new Error(sourceOverrides.message);
}

// Step 2: Apply to multiple target instances
const result = await set_instance_overrides({
  sourceInstanceId: sourceOverrides.sourceInstanceId,
  targetNodeIds: [
    "target-instance-1",
    "target-instance-2",
    "target-instance-3"
  ]
});

console.log(result);
// {
//   "success": true,
//   "message": "Successfully applied overrides",
//   "totalCount": 5,
//   "results": [
//     {
//       "success": true,
//       "instanceId": "target-instance-1",
//       "instanceName": "Button",
//       "appliedCount": 5,
//       "message": "Successfully applied 5 overrides"
//     },
//     {
//       "success": true,
//       "instanceId": "target-instance-2",
//       "instanceName": "Button",
//       "appliedCount": 5,
//       "message": "Successfully applied 5 overrides"
//     },
//     {
//       "success": true,
//       "instanceId": "target-instance-3",
//       "instanceName": "Button",
//       "appliedCount": 5,
//       "message": "Successfully applied 5 overrides"
//     }
//   ]
// }

​
Complete Workflow Example

// Complete instance override propagation workflow

// 1. Get all button instances that need updating
const buttons = await scan_nodes_by_types({
  nodeId: "page-id",
  types: ["INSTANCE"]
});

const targetButtons = buttons.matchingNodes
  .filter(node => node.name.includes("Button"))
  .map(node => node.id);

// 2. Extract overrides from the source button
const overrides = await get_instance_overrides({
  nodeId: "customized-button-id"
});

if (overrides.success) {
  console.log(`Captured ${overrides.overridesCount} overrides`);
  
  // 3. Apply to all target buttons
  const result = await set_instance_overrides({
    sourceInstanceId: overrides.sourceInstanceId,
    targetNodeIds: targetButtons
  });
  
  // 4. Report results
  const successCount = result.results.filter(r => r.success).length;
  console.log(`Successfully updated ${successCount}/${targetButtons.length} buttons`);
  
  // 5. Check for any failures
  const failures = result.results.filter(r => !r.success);
  if (failures.length > 0) {
    console.warn("Failed instances:", failures);
  }
}

​
What Happens During Application

1

Component swap

Each target instance is swapped to match the source component (if different)
2

Override application

All captured override properties are applied to each target instance:
  • Text content
  • Visibility states
  • Component swaps
  • Color overrides
  • And more
3

Validation

Each instance is validated and results are returned individually

​
Common Use Cases

Bulk State Changes

Update multiple button instances to the same state (hover, disabled, etc.)

Theme Application

Apply a theme or color scheme across multiple component instances

Content Updates

Propagate text or content changes to similar instances

Design Consistency

Ensure consistent customizations across repeated components

​
Error Handling

const result = await set_instance_overrides({
  sourceInstanceId: "source-id",
  targetNodeIds: ["target-1", "target-2"]
});

if (!result.success) {
  console.error("Overall failure:", result.message);
} else {
  // Check individual instance results
  result.results.forEach(instanceResult => {
    if (!instanceResult.success) {
      console.error(
        `Failed to update ${instanceResult.instanceName}:`,
        instanceResult.message
      );
    }
  });
}

​
Possible Errors

  • “No overrides found for source instance”: Must call get_instance_overrides first
  • “Target node is not a component instance”: Target must be an instance, not a main component
  • “Component mismatch”: Target instances may need to be swapped to a compatible component first
  • “Invalid node ID”: One or more target node IDs don’t exist

​
Performance Considerations

When applying overrides to many instances (50+), consider processing them in batches to avoid Figma performance issues:
const batchSize = 20;
for (let i = 0; i < targetIds.length; i += batchSize) {
  const batch = targetIds.slice(i, i + batchSize);
  await set_instance_overrides({
    sourceInstanceId,
    targetNodeIds: batch
  });
}

​
Notes

  • The source instance ID must match an instance from a previous get_instance_overrides call
  • Target instances are automatically swapped to the source component if needed
  • All override properties from the source are applied (cannot apply selectively)
  • Results include per-instance success/failure information

​
Related Tools

Build docs developers (and LLMs) love

Get started for freeTalk to us