figma-dev-mode

Figma Dev Mode & Code Connect

Dev Mode provides developer-focused views and Code Connect links design to code.

Dev Mode Detection

// Check if plugin is running in Dev Mode
if (figma.mode === 'dev') {
  console.log('Running in Dev Mode')
  // Show developer-focused UI
} else {
  console.log('Running in Design Mode')
}

Code Connect Overview

Code Connect links Figma components to their code implementations, showing relevant code snippets in Dev Mode.

Note: Code Connect is typically configured via a separate figma.config.json file and CLI, not through the Plugin API. See https://www.figma.com/developers/code-connect

Dev Mode Properties

Dev Resources

// Get dev resources attached to a node (async)
const resources = await node.getDevResourcesAsync()
for (const resource of resources) {
  console.log(resource.name, resource.url)
}

// Add a dev resource (link to code, docs, etc.)
await node.addDevResourceAsync(
  'https://github.com/org/repo/blob/main/src/Button.tsx',
  'Component Source',
)

// Edit an existing dev resource
await node.editDevResourceAsync(
  'https://github.com/org/repo/blob/main/src/Button.tsx',
  { name: 'Updated Name', url: 'https://new-url.com' },
)

// Delete a dev resource
await node.deleteDevResourceAsync(
  'https://github.com/org/repo/blob/main/src/Button.tsx',
)

Annotations

// Dev Mode annotations are read-only in plugins
// They're managed through Figma's UI

Measurements & Specs

// Get node measurements
if ('absoluteBoundingBox' in node) {
  const bounds = node.absoluteBoundingBox
  console.log(`Position: ${bounds.x}, ${bounds.y}`)
  console.log(`Size: ${bounds.width} x ${bounds.height}`)
}

// Get computed styles for dev handoff
function getNodeSpecs(node: SceneNode) {
  const specs: Record<string, unknown> = {
    name: node.name,
    type: node.type,
  }

  if ('absoluteBoundingBox' in node) {
    specs.bounds = node.absoluteBoundingBox
  }

  if ('fills' in node && Array.isArray(node.fills)) {
    specs.fills = node.fills.filter((f) => f.visible !== false)
  }

  if ('effects' in node) {
    specs.effects = node.effects.filter((e) => e.visible !== false)
  }

  if ('cornerRadius' in node) {
    specs.cornerRadius = node.cornerRadius
  }

  if (node.type === 'TEXT') {
    specs.fontSize = node.fontSize
    specs.fontName = node.fontName
    specs.lineHeight = node.lineHeight
    specs.letterSpacing = node.letterSpacing
  }

  return specs
}