figma-components

Figma Components API

Components enable reusable design elements with variants and overrides.

Core Concepts

• ComponentNode: A reusable design element (the "main" component)
• ComponentSetNode: A container for component variants
• InstanceNode: A copy of a component that inherits from the main

Creating Components

// Create a frame first
const frame = figma.createFrame()
frame.resize(100, 40)
frame.name = "Button"
frame.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.4, b: 1 } }]

// Convert to component
const component = figma.createComponentFromNode(frame)
// Note: 'frame' is now invalid - use 'component' instead

Creating Instances

// From a component reference
const instance = component.createInstance()
instance.x = component.x + 150

// From component key (for library components)
const importedComponent = await figma.importComponentByKeyAsync(componentKey)
const instance2 = importedComponent.createInstance()

Component Variants

// Create variant components
const defaultButton = figma.createComponent()
defaultButton.name = "State=Default"

const hoverButton = figma.createComponent()
hoverButton.name = "State=Hover"

// Combine into a component set
const componentSet = figma.combineAsVariants([defaultButton, hoverButton], figma.currentPage)
componentSet.name = "Button"

Working with Variants

// Get variant properties from a component set
if (node.type === "COMPONENT_SET") {
  // Parse variant properties from child names
  for (const variant of node.children) {
    console.log(variant.name) // e.g., "Size=Large, State=Hover"
  }
}

// Swap instance to different variant
if (instance.type === "INSTANCE") {
  const mainComponent = await instance.getMainComponentAsync()
  const componentSet = mainComponent?.parent
  
  if (componentSet?.type === "COMPONENT_SET") {
    // Find the variant you want
    const targetVariant = componentSet.children.find(
      child => child.name === "Size=Large, State=Default"
    )
    if (targetVariant?.type === "COMPONENT") {
      instance.swapComponent(targetVariant)
    }
  }
}