How to Use Figma to Code a Plugin: Step-by-Step Guide

To use Figma to code a plugin, start by creating a new plugin in Figma's developer settings, then write your plugin code in TypeScript or JavaScript using the Figma Plugin API. Finally, run and test your plugin directly inside Figma's editor.

Syntax

Figma plugins use a manifest file manifest.json and a main code file (usually code.ts or code.js). The manifest defines plugin metadata and entry points. The main code uses the figma object to interact with the design.

• manifest.json: Describes the plugin name, ID, main code file, and UI if any.
• code.ts/js: Contains the plugin logic using the Figma Plugin API.
• figma API: Provides methods to read and modify the design.

json

{
  "name": "My Plugin",
  "id": "unique-plugin-id",
  "main": "code.js",
  "ui": "ui.html"
}

Example

This example plugin creates a rectangle on the current page when run. It shows how to use the figma.createRectangle() method and close the plugin after execution.

typescript

figma.showUI(`<p>Creating rectangle...</p>`, { visible: false });

const rect = figma.createRectangle();
rect.x = 100;
rect.y = 100;
rect.resize(150, 100);
rect.fills = [{ type: 'SOLID', color: { r: 0, g: 0.5, b: 1 } }];

figma.currentPage.appendChild(rect);

figma.closePlugin('Rectangle created!');

Output

A blue rectangle appears at position (100, 100) on the current Figma page.

Common Pitfalls

Common mistakes when coding Figma plugins include:

• Not calling figma.closePlugin() to end the plugin, which leaves it running.
• Trying to access UI elements without showing the UI or setting visible: true.
• Modifying nodes without appending them to the current page.
• Using synchronous code that blocks the plugin instead of async patterns.

typescript

/* Wrong: Plugin never closes */
figma.createRectangle();

/* Right: Close plugin after work */
const rect = figma.createRectangle();
figma.currentPage.appendChild(rect);
figma.closePlugin();

Quick Reference

Concept	Description	Example
manifest.json	Defines plugin metadata and entry points	{"main": "code.js", "ui": "ui.html"}
figma API	Main object to interact with design nodes	figma.createRectangle()
figma.showUI()	Shows plugin UI panel	figma.showUI(' Hello ')
figma.closePlugin()	Ends plugin execution	figma.closePlugin('Done')
Node manipulation	Create and add nodes to page	figma.currentPage.appendChild(node)

Key Takeaways

Start by creating a plugin in Figma's developer settings to get the manifest and code files.

Use the figma API to create and modify design elements programmatically.

Always call figma.closePlugin() to properly end your plugin.

Test your plugin inside Figma to see changes live on your design.

Use the manifest.json to define plugin metadata and UI entry points.