CodeSpeedTest [CST]

Learn Figma-plugin-api - 10 Code Examples & CST Typing Practice Test

The Figma Plugin API allows developers to create powerful plugins that extend Figma’s design environment. It provides programmatic access to Figma documents, nodes, components, and user interface elements, enabling automation, custom workflows, and interactive design tools.

View all 10 Figma-plugin-api code examples →

Select All Frames Create a Rectangle Change Text Content Duplicate Selection Apply Drop Shadow Resize Selected Nodes Group Selected Nodes Create AutoLayout Frame Rename Selected Layers Change Fill to Blue

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

1

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 →

2

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 →

3

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 →

4

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 →

5

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 →

6

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 →

7

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 →

8

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 →

9

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 →

10

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 →

Frequently Asked Questions about Figma-plugin-api

What is Figma-plugin-api?

The Figma Plugin API allows developers to create powerful plugins that extend Figma’s design environment. It provides programmatic access to Figma documents, nodes, components, and user interface elements, enabling automation, custom workflows, and interactive design tools.

What are the primary use cases for Figma-plugin-api?

Automating repetitive design tasks (e.g., resizing, renaming layers). Generating or modifying design content programmatically. Design system enforcement and auditing. Integrating external data (CSV, APIs) into Figma files. Building interactive tools and utilities within Figma

What are the strengths of Figma-plugin-api?

Deep integration with Figma’s document model. Enables automation and productivity improvements. Supports custom tool creation for teams and workflows. Cross-platform (Figma desktop and browser apps). Rich plugin ecosystem with community contributions

What are the limitations of Figma-plugin-api?

Cannot execute arbitrary code outside Figma sandbox. Limited access to system resources or local files. Performance depends on document size and node operations. UI customization constrained to plugin panels. Requires understanding of asynchronous and event-driven JS

How can I practice Figma-plugin-api typing speed?

CodeSpeedTest offers 10+ real Figma-plugin-api code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Figma-plugin-api - Code Examples & CST Typing Practice Test | CodeSpeedTest