syyunn / plugin-samples

🔌 Sample Figma plugins.

🔌 Figma Plugin Samples

Sample plugins using the Figma Plugin API.

To make a feature request, file a bug report, or ask a question about developing plugins, check out the available resources.

These plugins are written using TypeScript to take advantage of Figma's typed plugin API. This means that in order to run a plugin, you will first need to compile the plugin code using the TypeScript compiler.

To install TypeScript, first install Node.js. Then:

$ npm install -g typescript

Now, to compile the Bar Chart sample plugin (for example):

$ cd barchart
$ tsc

Now you can import the Bar Chart plugin from within the Figma desktop app!

The code for each plugin is in code.ts in that plugin's subdirectory. If a plugin shows some UI, the HTML will be in ui.html.

For example, the code for the Bar Chart sample plugin is in barchart/code.ts, and the HTML for its UI is in barchart/ui.html.

Bar Chart

Generates a bar chart given user input in a modal.

Check out the source code.

Circle Text

Takes a single text node selected by the user and creates a copy with the characters arranged in a circle.

Check out the source code.

Document Statistics

Computes a count of the nodes of each NodeType in the current document.

Check out the source code.

Invert Image Color

Takes image fills in the current selection and inverts their colors.

This demonstrates:

• how to read/write images stored in a Figma document, and
• how to use showUI to access browser APIs.

Check out the source code.

Pie Chart

Generates a pie chart given user input in a modal.

Check out the source code.

Sierpinski

Generates a fractal using circles.

Check out the source code.

Text Search

Searches for text in the document, given a query by the user in a modal.

This demonstrates:

• advanced message passing between the main code and the plugin UI,
• how to keep Figma responsive during long-running operations, and
• how to use the viewport API.

Check out the source code.

Vector Path

Generates a triangle using vector paths.

Check out the source code.

Webpack

Creates rectangles. Demonstrates bundling plugin code using Webpack.

Check out the source code.

React

Creates rectangles (same as the Webpack sample plugin).

This demonstrates:

• bundling plugin code using Webpack, and
• using React with TSX.

Check out the source code.

Vue

Creates rectangles (same as the Webpack sample plugin).

This demonstrates:

• bundling plugin code using Webpack, and
• using Vue Single File Components.

Check out the source code.