DevResource

Dev Resources are a new feature of Dev Mode, which allow you to add links to any layer within Figma.

DevResource properties

name: string [readonly]

The name of the resource.

---

url: string [readonly]

The URL of the resource. This is considered the unique identifier of the resource.

---

inheritedNodeId?: string [readonly]

inheritedNodeId is a field only relevant to links on INSTANCE nodes. If inheritedNodeId is defined, the link is inherited from a main component or a component set. If you want to edit or delete the inherited link, you will need to go to the main node to do so. For example:

const devResource = { ..., inheritedNodeId: '1:2' }
const node = figma.getNodeById(devResource.inheritedNodeId)
await node.editDevResourceAsync(...)

---

nodeId: string

The ID of the node that this link is attached to.

---

Example usage

const node = figma.currentPage.selection[0]

// Get related link
const links = await node.getDevResourcesAsync()

// Get related link from node and all of its children
const links = await node.getDevResourcesAsync({ includeChildren: true })

// Add a related link
await node.addDevResourceAsync('https://google.com')

// Edit related link
await node.editDevResourceAsync(
  'https://google.com', { name: 'Hotels', url: 'https://hotels.com' }
)

// Delete related link
await node.deleteDevResourceAsync('https://hotels.com')