Framer Nodes

https://www.framer.com/developers/nodes
Admin
Framer Nodes is an API for working with the building blocks of Framer projects, enabling developers...
Tokens:1,765
Snippets:20
Trust Score:10
Update:8 months ago
Show doc for...
Tokens:
Raw
### Combine Async Layer APIs in Framer

Source: https://www.framer.com/developers/nodes/index

Illustrates combining asynchronous layer APIs, such as fetching a child's rectangle, within a React `useEffect` hook. This example shows how to handle potential null values for layer rectangles and update component state based on the retrieved data. It also includes a cleanup function to manage asynchronous operations.

```javascript
useEffect(() => {
  const run = async () => {
    let active = true;
    const parentNode = await getParent();
    const children = await getChildren();
    const parentRect = await parentNode.getRect();

    if (!children || children.length === 0) {
      setState(null);
      return;
    }

    const singleChild = children[0];
    const childRect = await singleChild.getRect();

    if (!childRect) {
      setState(null);
      return;
    }

    if (active) {
      setState({
        parent: parentNode,
        child: singleChild,
        parentRect,
        childRect,
      });
    }
  };

  run();

  // cleanup function
  return () => {
    active = false;
  };
}, [selection]);
```

--------------------------------

### Get All Nodes with Background Images

Source: https://www.framer.com/developers/nodes/index

A hook that fetches all nodes with a background image set and returns a unique list of `ImageAsset` objects. It handles de-duplication using a Map.

```typescript
function useAllBackgroundImages() {
  const [images, setImages] = useState<ImageAsset[]>([])

  useEffect(() => {
    let active = true

    async function run() {
      // Get all Nodes with a background image set
      const nodes = await framer.getNodesWithAttributeSet("backgroundImage")

      // Use a Map to remove duplicates
      const uniqueImages = new Map<string, ImageAsset>()

      for (const item of nodes) {
        const image = item.backgroundImage
        if (!image) continue

        uniqueImages.set(image.id, image)
      }

      if (!active) return
      setImages(Array.from(uniqueImages.values()))
    }

    run()

    return () => {
      active = false
    }
  }, [])

  return images
}

```

--------------------------------

### Get Node by ID

Source: https://www.framer.com/developers/nodes/index

Fetches a specific node from the project using its unique identifier. This is useful when you know the exact node you need to access.

```typescript
const node = await framer.getNode("some-node-id")

```

--------------------------------

### Get Current Node Selection

Source: https://www.framer.com/developers/nodes/index

Retrieves an array of nodes currently selected on the canvas. This is a common starting point for plugin interactions.

```typescript
const selection = await framer.getSelection()

```

--------------------------------

### Get Nodes by Type or Attribute

Source: https://www.framer.com/developers/nodes/index

Retrieves arrays of nodes that match specific criteria, such as node type (e.g., 'FrameNode') or the presence of a particular attribute (e.g., 'backgroundColor').

```typescript
// Get all frame nodes in a project.
const frameNodes = await framer.getNodesWithType("FrameNode")

// Get any kind of node that has a background color set.
const nodes = await framer.getNodesWithAttribute("backgroundColor")

```

--------------------------------

### Subscribe to Node Selection Changes

Source: https://www.framer.com/developers/nodes/index

Sets up a subscription to receive updates whenever the user's node selection on the canvas changes. It returns the current selection and updates it via a state hook.

```typescript
function useSelection() {
  const [selection, setSelection] = useState<CanvasNode[]>([])

  useEffect(() => {
    return framer.subscribeToSelection(setSelection)
  }, [])

  return selection
}

```

--------------------------------

### Access Layer Parent and Children in Framer

Source: https://www.framer.com/developers/nodes/index

Demonstrates how to retrieve the parent and children of a Framer layer using the `getParent()` and `getChildren()` asynchronous functions. These functions are essential for navigating the layer tree structure within the Framer development environment.

```javascript
const parentNode = await getParent();
const children = await getChildren();
```

--------------------------------

### Create a Frame Node

Source: https://www.framer.com/developers/nodes/index

Creates a new, generic frame node directly on the canvas. This is a fundamental operation for adding new visual elements.

```typescript
framer.createFrameNode()

```

--------------------------------

### Check if Node Supports Background Image

Source: https://www.framer.com/developers/nodes/index

Uses the `supportsBackroundImage` trait function to check if a node has the capability to have a background image set. This allows for conditional logic based on node capabilities.

```typescript
const selection = await framer.getSelection()

for (const node of selection) {
  if (supportsBackroundImage(node)) {
    console.log(node)
  }
}

```

--------------------------------

### Query Nodes within a Selection

Source: https://www.framer.com/developers/nodes/index

Allows querying for nodes within a specific selection based on their type or attributes. This is useful for context-aware operations on a subset of the canvas.

```typescript
const selection = await framer.getSelection()
const selectedNode = selection.length === 1 ? selection[0] : null

// To get all nodes of a certain sub tree
if (selectedNode) {
  const frameNodes = await selectedNode.getNodesWithType("FrameNode")
  const nodes = await selectedNode.getNodesWithAttribute("backgroundColor")
  const nodes = await selectedNode.getNodesWithAttributeSet("backgroundColor")
}

```

--------------------------------

### Add Text Node

Source: https://www.framer.com/developers/nodes/index

Adds a new text node to the canvas. This is a simple way to introduce editable text content.

```typescript
framer.addText()

```

--------------------------------

### Set Text on Text Node

Source: https://www.framer.com/developers/nodes/index

Updates the content of a text node. This method is specifically available for nodes identified as `TextNode` using trait functions.

```typescript
const selection = await framer.getSelection()

for (const node of selection) {
  // We need to check what the node is because 
  // the `setText` method is only available on 
  // text nodes.
  if (isTextNode(node)) {
    node.setText("Hello!")
  }
}

```

--------------------------------

### Check if Node is Text Node

Source: https://www.framer.com/developers/nodes/index

Uses the `isTextNode` trait function to determine if a given node is a text node. This is crucial for safely calling text-specific methods like `setText`.

```typescript
if (isTextNode(node)) {
  node.setText("Hello!")
}

```
Tokens:
Raw