Token Bindings

#What are token bindings

When you apply a token to an element through SXL Studio (the Apply button), the plugin creates a binding — a link between a specific node property and a token path. Bindings let you:

• See which tokens are used on each element
• Update values when a token changes
• Track what in the design follows the design system and what doesn't

#Binding sources

The plugin collects bindings from multiple sources:

When displaying, the plugin deduplicates bindings — if the same token is bound both through the plugin and as a native variable, it's shown once.

---

#Token Bindings interface

The Token Bindings section on the Inspect tab shows a hierarchical list:

For each node and its descendants, rows are displayed:

• Property — property name (fill, stroke, cornerRadius, fontSize, etc.)
• Token Path — token path (color.primary, spacing.md)
• Resolved Value — current resolved value (if available)
• Buttons:
  • Override — change the binding value
  • Unlink — remove the binding from this property

---

#Override — changing values

The Override button opens a modal where you can:

1. Change the token path for the binding
2. Specify a new value
3. Apply the change to the node

When overriding, the plugin:

• Updates the appliedTokens entry on the node
• Finds the token by the new path
• Applies its value to the node property
• Updates the inspect data

This is useful when you need to quickly substitute a token on a specific element without modifying the JSON file itself.

---

#Unlink — removing bindings

#Unlinking a single property

The Unlink button next to a specific binding:

• Clears the Figma property (removes the variable binding)
• Deletes the entry from appliedTokens on the node
• The property value remains current but is no longer bound to a token

#Unlink All

The Unlink All button in the panel header:

• Recursively iterates through the node and all its descendants
• Removes all token bindings
• Clears all appliedTokens entries

Warning: Unlink All operates without confirmation for child nodes. Use with caution on large trees.

---

#Related sections

• Inspect Overview — general tab structure
• Tokens Overview — applying tokens
• Swap — bulk variable rebinding