Learn FIGMA-PLUGIN-API with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Select All Frames

# figma_plugin/demo/code1.js
const frames = figma.currentPage.findAll(n => n.type === 'FRAME')
figma.currentPage.selection = frames
figma.closePlugin('Selected all frames')

Selects all frame layers on the current page.

Let’s Try →

Create a Rectangle

# figma_plugin/demo/code2.js
const rect = figma.createRectangle()
rect.x = 100
rect.y = 100
rect.resize(200, 120)
figma.currentPage.appendChild(rect)
figma.closePlugin('Rectangle created')

Creates a rectangle at position (100,100).

Let’s Try →

Change Text Content

# figma_plugin/demo/code3.js
figma.currentPage.selection.forEach(n => {
    if(n.type === 'TEXT') {
        n.characters = 'Hello World'
    }
})
figma.closePlugin('Updated text content')

Updates selected text layers to 'Hello World'.

Let’s Try →

Duplicate Selection

# figma_plugin/demo/code4.js
const s = figma.currentPage.selection[0]
if(s) {
    const d = s.clone()
    d.x += 100
}
figma.closePlugin('Duplicated selection')

Duplicates the selected node and offsets it.

Let’s Try →

Apply Drop Shadow

# figma_plugin/demo/code5.js
figma.currentPage.selection.forEach(n => {
    n.effects = [{ type: 'DROP_SHADOW', color: { r:0, g:0, b:0 }, opacity:0.4, offset:{ x:5, y:5 }, radius:10 }]
})
figma.closePlugin('Applied drop shadow')

Adds a drop shadow effect to selected nodes.

Let’s Try →

Resize Selected Nodes

# figma_plugin/demo/code6.js
figma.currentPage.selection.forEach(n => {
    if('resize' in n) {
        n.resize(n.width, n.height + 50)
    }
})
figma.closePlugin('Resized nodes')

Resizes all selected items by +50px height.

Let’s Try →

Group Selected Nodes

# figma_plugin/demo/code7.js
const nodes = figma.currentPage.selection
if(nodes.length > 0) {
    const g = figma.group(nodes, figma.currentPage)
    g.name = 'My Group'
}
figma.closePlugin('Grouped selection')

Groups the selected nodes together.

Let’s Try →

Create AutoLayout Frame

# figma_plugin/demo/code8.js
const f = figma.createFrame()
f.layoutMode = 'VERTICAL'
f.itemSpacing = 12
f.paddingLeft = 16
f.paddingRight = 16
f.paddingTop = 16
f.paddingBottom = 16
figma.currentPage.appendChild(f)
figma.closePlugin('AutoLayout frame created')

Creates an auto-layout frame with padding.

Let’s Try →

Rename Selected Layers

# figma_plugin/demo/code9.js
figma.currentPage.selection.forEach(n => {
    n.name = 'Item'
})
figma.closePlugin('Renamed layers')

Renames all selected nodes to 'Item'.

Let’s Try →

Change Fill to Blue

# figma_plugin/demo/code10.js
figma.currentPage.selection.forEach(n => {
    if('fills' in n) {
        n.fills = [{ type:'SOLID', color:{ r:0, g:0, b:1 }}]
    }
})
figma.closePlugin('Changed fill to blue')

Sets the fill color of shapes to blue.

Let’s Try →

Code Sample Descriptions

Select All Frames

# figma_plugin/demo/code1.js
const frames = figma.currentPage.findAll(n => n.type === 'FRAME')
figma.currentPage.selection = frames
figma.closePlugin('Selected all frames')

Selects all frame layers on the current page.

Let’s Try →

Create a Rectangle

# figma_plugin/demo/code2.js
const rect = figma.createRectangle()
rect.x = 100
rect.y = 100
rect.resize(200, 120)
figma.currentPage.appendChild(rect)
figma.closePlugin('Rectangle created')

Creates a rectangle at position (100,100).

Let’s Try →

Change Text Content

# figma_plugin/demo/code3.js
figma.currentPage.selection.forEach(n => {
    if(n.type === 'TEXT') {
        n.characters = 'Hello World'
    }
})
figma.closePlugin('Updated text content')

Updates selected text layers to 'Hello World'.

Let’s Try →

Duplicate Selection

# figma_plugin/demo/code4.js
const s = figma.currentPage.selection[0]
if(s) {
    const d = s.clone()
    d.x += 100
}
figma.closePlugin('Duplicated selection')

Duplicates the selected node and offsets it.

Let’s Try →

Apply Drop Shadow

# figma_plugin/demo/code5.js
figma.currentPage.selection.forEach(n => {
    n.effects = [{ type: 'DROP_SHADOW', color: { r:0, g:0, b:0 }, opacity:0.4, offset:{ x:5, y:5 }, radius:10 }]
})
figma.closePlugin('Applied drop shadow')

Adds a drop shadow effect to selected nodes.

Let’s Try →

Resize Selected Nodes

# figma_plugin/demo/code6.js
figma.currentPage.selection.forEach(n => {
    if('resize' in n) {
        n.resize(n.width, n.height + 50)
    }
})
figma.closePlugin('Resized nodes')

Resizes all selected items by +50px height.

Let’s Try →

Group Selected Nodes

# figma_plugin/demo/code7.js
const nodes = figma.currentPage.selection
if(nodes.length > 0) {
    const g = figma.group(nodes, figma.currentPage)
    g.name = 'My Group'
}
figma.closePlugin('Grouped selection')

Groups the selected nodes together.

Let’s Try →

Create AutoLayout Frame

# figma_plugin/demo/code8.js
const f = figma.createFrame()
f.layoutMode = 'VERTICAL'
f.itemSpacing = 12
f.paddingLeft = 16
f.paddingRight = 16
f.paddingTop = 16
f.paddingBottom = 16
figma.currentPage.appendChild(f)
figma.closePlugin('AutoLayout frame created')

Creates an auto-layout frame with padding.

Let’s Try →

Rename Selected Layers

# figma_plugin/demo/code9.js
figma.currentPage.selection.forEach(n => {
    n.name = 'Item'
})
figma.closePlugin('Renamed layers')

Renames all selected nodes to 'Item'.

Let’s Try →

Change Fill to Blue

# figma_plugin/demo/code10.js
figma.currentPage.selection.forEach(n => {
    if('fills' in n) {
        n.fills = [{ type:'SOLID', color:{ r:0, g:0, b:1 }}]
    }
})
figma.closePlugin('Changed fill to blue')

Sets the fill color of shapes to blue.

Let’s Try →