Examples

These are real-world automation examples that demonstrate what you can build with Pipeline. Each example shows the prompt you would give to the AI and the code it might generate for you.

Whether you're renaming layers, applying colors, or exporting assets, these examples illustrate how natural language prompts translate into working Figma automations.


Rename Selected Layers

A simple automation that adds a suffix to all selected frames. Perfect for creating dark mode variants or version naming.

Prompt: "Rename all selected frames adding '-dark' suffix"

Generated Code:

for (const node of figma.currentPage.selection) {
  node.name = node.name + '-dark';
}
console.log(`Renamed ${figma.currentPage.selection.length} frames`);

What it does:

  • Loops through all currently selected nodes
  • Appends '-dark' to each node's name
  • Logs the total number of renamed frames

Apply Color to Selection

An interactive automation that prompts for a hex color and applies it to all selected rectangles.

Prompt: "Ask for a color, then apply it to all selected rectangles"

Generated Code:

const hex = await pipeline.getUserInput("Enter hex color:", "#FF0000");

// Convert hex to RGB
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;

for (const node of figma.currentPage.selection) {
  if (node.type === 'RECTANGLE') {
    node.fills = [{ type: 'SOLID', color: { r, g, b } }];
  }
}

console.log(`Applied ${hex} to rectangles`);

What it does:

  • Shows an input dialog for entering a hex color (defaults to #FF0000)
  • Converts the hex value to Figma's RGB format (0-1 range)
  • Filters selection to only rectangles
  • Applies the color as a solid fill
  • Reports how many rectangles were updated

Export Frames as SVG

Batch export automation that saves each selected frame as a separate SVG file.

Prompt: "Export each selected frame as a separate SVG file"

Generated Code:

for (const node of figma.currentPage.selection) {
  if (node.type === 'FRAME') {
    const svg = await node.exportAsync({ format: 'SVG' });
    await pipeline.downloadFile(svg, `${node.name}.svg`, 'image/svg+xml');
  }
}

console.log(`Exported ${figma.currentPage.selection.length} frames`);

What it does:

  • Loops through all selected nodes
  • Checks if each node is a frame
  • Exports the frame as SVG format
  • Downloads each SVG with the frame's name as the filename
  • Reports total number of exported frames

What's Next?

These examples are just the beginning. You can create automations for:

  • Batch operations - Process hundreds of layers at once
  • Data-driven designs - Generate layouts from external data
  • Style management - Update colors, fonts, and effects across projects
  • Asset export - Custom export workflows for different platforms
  • Content generation - Use AI to generate text, images, and more

Tip: Start with these examples and modify the prompts to fit your needs. AI will adapt the code based on your specific requirements.

Ready to build your own? Open Pipeline in Figma and describe what you want to automate!