Figma API Access

Your code has full access to the Figma Plugin API via the figma object. This reference covers the most commonly used features for automating design workflows in Pipeline.

Selection

Work with selected nodes in your Figma document:

// Get current selection
const selection = figma.currentPage.selection;

// Set selection
figma.currentPage.selection = [node1, node2];

// Check selection
if (selection.length === 0) {
  console.warn('Nothing selected');
}

Creating Nodes

Create new design elements programmatically:

Frames

// Create frame
const frame = figma.createFrame();
frame.resize(400, 300);
frame.name = 'My Frame';

Shapes

// Create rectangle
const rect = figma.createRectangle();
rect.resize(100, 100);
rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }];

// Create ellipse
const ellipse = figma.createEllipse();
ellipse.resize(100, 100);

Text

// Create text
const text = figma.createText();
await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
text.characters = 'Hello World';
text.fontSize = 24;

Modifying Nodes

Update properties of existing nodes:

Position and Size

// Position
node.x = 100;
node.y = 200;

// Size (for nodes that support it)
node.resize(300, 200);

Appearance

// Name
node.name = 'New Name';

// Visibility
node.visible = false;

// Opacity
node.opacity = 0.5;

Fills

// Fills (solid color)
node.fills = [{
  type: 'SOLID',
  color: { r: 0.2, g: 0.4, b: 0.8 }
}];

// Fills (with opacity)
node.fills = [{
  type: 'SOLID',
  color: { r: 1, g: 0, b: 0 },
  opacity: 0.5
}];

Strokes

// Strokes
node.strokes = [{
  type: 'SOLID',
  color: { r: 0, g: 0, b: 0 }
}];
node.strokeWeight = 2;

Border Radius

// Corner radius
node.cornerRadius = 8;

Traversing Nodes

Navigate and search through your document structure:

Iterating Children

// Get all children
for (const child of frame.children) {
  console.log(child.name, child.type);
}

Finding Nodes

// Find by name
const found = figma.currentPage.findOne(n => n.name === 'Button');

// Find all by type
const allText = figma.currentPage.findAll(n => n.type === 'TEXT');

// Find all by name pattern
const icons = figma.currentPage.findAll(n => n.name.startsWith('icon-'));

Fonts

Load and work with fonts:

// Load font before modifying text
await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
await figma.loadFontAsync({ family: 'Inter', style: 'Bold' });

// Get font from existing text node
const fontName = textNode.fontName as FontName;
await figma.loadFontAsync(fontName);

Export

Export nodes in various formats:

PNG Export

// Export as PNG
const png = await node.exportAsync({ format: 'PNG' });

// Export with scale
const png2x = await node.exportAsync({
  format: 'PNG',
  constraint: { type: 'SCALE', value: 2 }
});

Other Formats

// Export as SVG
const svg = await node.exportAsync({ format: 'SVG' });

// Export as PDF
const pdf = await node.exportAsync({ format: 'PDF' });

Styles and Variables

Manage design tokens and styles:

Paint Styles

// Get local paint styles
const paintStyles = figma.getLocalPaintStyles();

// Create paint style
const style = figma.createPaintStyle();
style.name = 'Primary/500';
style.paints = [{ type: 'SOLID', color: { r: 0.2, g: 0.4, b: 1 } }];

Variables

// Get local variables
const variables = figma.variables.getLocalVariables();

// Create variable collection
const collection = figma.variables.createVariableCollection('Colors');

// Create color variable
const colorVar = figma.variables.createVariable('primary', collection.id, 'COLOR');
colorVar.setValueForMode(collection.modes[0].modeId, { r: 0.2, g: 0.4, b: 1 });

Event Listeners

Respond to changes in your document:

// Selection change
figma.on('selectionchange', () => {
  console.log('Selection:', figma.currentPage.selection.length);
});

// Document change
figma.on('documentchange', (event) => {
  console.log('Changes:', event.documentChanges.length);
});

// Close plugin when done (optional)
figma.on('close', () => {
  console.log('Plugin closing');
});

:::note Event listeners keep your workflow running until you click Stop. :::

Notifications

Display messages to users:

// Show Figma notification
figma.notify('Operation completed!');

// With timeout
figma.notify('Processing...', { timeout: 3000 });

// Error notification
figma.notify('Something went wrong', { error: true });

Current User

Access information about the current user:

// Get current user info
const user = figma.currentUser;
console.log('User:', user?.name);
console.log('User ID:', user?.id);

Additional Resources

For complete Figma API documentation, see the Figma Plugin API Reference.