Skip to main content


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

Image showing a dev resource

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('')

// Edit related link
await node.editDevResourceAsync(
'', { name: 'Hotels', url: '' }

// Delete related link
await node.deleteDevResourceAsync('')