How to Use Figma to Code Plugins: Step-by-Step Guide

To code plugins in Figma, use the Figma Plugin API with JavaScript or TypeScript inside Figma's plugin environment. Start by creating a new plugin in Figma, write your code in the provided editor or your own IDE, then run and test it directly in Figma.

Syntax

Figma plugins use JavaScript or TypeScript with the figma object to interact with the design file. The basic structure includes a main.ts or code.js file where you write your plugin logic. You use figma.showUI(html, options) to create user interfaces and figma.closePlugin() to end the plugin.

Key parts:

• figma.currentPage: Access current page in the file.
• figma.createRectangle(): Create shapes.
• figma.showUI(html, options): Show plugin UI.
• figma.ui.postMessage() and figma.ui.onmessage: Communicate between UI and code.

typescript

figma.showUI(`<p>Hello from plugin!</p>`, { width: 240, height: 100 });

figma.ui.onmessage = msg => {
  if (msg.type === 'create-rect') {
    const rect = figma.createRectangle();
    rect.resize(100, 100);
    rect.fills = [{ type: 'SOLID', color: { r: 0, g: 0.5, b: 1 } }];
    figma.currentPage.appendChild(rect);
    figma.closePlugin();
  }
};

Example

This example creates a blue rectangle on the current Figma page when the plugin runs. It shows a simple UI with a button to trigger the shape creation.

typescript

figma.showUI(`
  <button id="create">Create Rectangle</button>
  <script>
    const btn = document.getElementById('create');
    btn.onclick = () => {
      parent.postMessage({ pluginMessage: { type: 'create-rect' } }, '*');
    };
  </script>
`, { width: 200, height: 100 });

figma.ui.onmessage = msg => {
  if (msg.type === 'create-rect') {
    const rect = figma.createRectangle();
    rect.resize(150, 100);
    rect.fills = [{ type: 'SOLID', color: { r: 0, g: 0.5, b: 1 } }];
    figma.currentPage.appendChild(rect);
    figma.closePlugin();
  }
};

Output

A blue rectangle of size 150x100 appears 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 DOM elements directly instead of using figma.ui messaging.
• Forgetting to resize or position created nodes, so they may not appear visible.
• Not handling asynchronous UI messages properly.

Always use figma.ui.postMessage() and figma.ui.onmessage to communicate between UI and main code.

typescript

/* Wrong way: Trying to access UI elements directly */
// This will not work because plugin code runs in a separate environment
const button = document.getElementById('create'); // undefined

/* Right way: Use messaging */
figma.showUI(`<button id='create'>Create</button>`);
figma.ui.onmessage = msg => {
  if (msg.type === 'create') {
    // create shapes here
  }
};

Quick Reference

API Method	Description
figma.showUI(html, options)	Displays the plugin's user interface.
figma.ui.postMessage(message)	Sends a message from plugin code to UI.
figma.ui.onmessage	Receives messages from the UI.
figma.createRectangle()	Creates a rectangle shape node.
figma.currentPage.appendChild(node)	Adds a node to the current page.
figma.closePlugin()	Ends the plugin execution.

Key Takeaways

Use the Figma Plugin API with JavaScript or TypeScript inside Figma's plugin environment.

Communicate between UI and main code using postMessage and onmessage handlers.

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

Create and manipulate design nodes via the figma object methods.

Test your plugin directly in Figma's development environment for quick feedback.