Composition & Drift

#What is Composition Drift

When you create a component via Composition (Generate), the plugin links it to a JSON description. Over time, the component may change — a designer moves an element, changes a color, adds a layer. Or conversely — the JSON is updated while the Figma component stays the same.

Drift is the discrepancy between the current state of a component in Figma and its JSON description. The plugin automatically detects drift when inspecting a component and shows exactly what changed.

#Why track drift

• Quality control — ensure the Figma component matches the design tokens
• Detect manual edits — find changes made manually on the canvas
• Synchronization — quickly update the component to match the current JSON description

---

#How detection works

When selecting a component in Inspect that is linked to a Composition, the plugin:

1. Loads the composition JSON description from the token storage
2. Compares the current component state with the description
3. Analyzes differences by category
4. Shows the result in the Out of Sync section

#Difference categories

---

#Interface

#"Out of Sync" section

When drift is detected, a block appears in the Inspect panel:

• Difference count — total number of detected discrepancies
• Category badges — which aspects are affected (structure, fill, layout, etc.)
• Show Diff — open detailed comparison
• Re-apply — reapply the JSON composition

#Show Diff

Opens the Composition Diff modal with a detailed list of changes per category. You can see exactly:

• Which nodes were added or removed
• Which properties changed and to what
• Which bindings were lost

#Re-apply

The Re-apply button reapplies the Composition to the existing component. The plugin uses Apply mode (not Generate) — it updates the existing component, keeping its ID and position on the page, but bringing the structure, styles, and bindings in line with the JSON.

After Re-apply, the "Out of Sync" section should disappear — the component is synced with JSON again.

---

#Composition Tracking

A separate section shows whether the component is linked to a diff-id entry:

• Linked — the component is tracked, diff-id contains a record with componentSetId
• Not linked — the component exists but isn't tracked. The Re-link button will reconnect it

Re-link is useful when a component was moved or recreated but its name matches the JSON.

---

#Example scenario

1. You generated a Button component from compositions/button.json
2. A designer manually changed cornerRadius from 8px to 12px
3. A developer updated the JSON: added a new icon-right layer
4. You select Button in Figma → Inspect
5. Drift shows:
   • structure — icon-right added (exists in JSON, missing in Figma)
   • style — cornerRadius differs (Figma: 12, JSON: 8)
6. You click Re-apply — the component updates to match the JSON

---

#Related sections

• Inspect Overview — general tab structure
• Composition — creating components from JSON
• Token Bindings — managing bindings