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.
Generates a bar chart given user input in a modal.
Takes a single text node selected by the user and creates a copy with the characters arranged in a circle.
Computes a count of the nodes of each NodeType in the current document.
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
showUIto access browser APIs.
Generates a pie chart given user input in a modal.
Generates a fractal using circles.
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.
Generates a triangle using vector paths.
Creates rectangles. Demonstrates bundling plugin code using Webpack.
Creates rectangles (same as the Webpack sample plugin).
This demonstrates:
- bundling plugin code using Webpack, and
- using React with TSX.
Creates rectangles (same as the Webpack sample plugin).
This demonstrates:
- bundling plugin code using Webpack, and
- using Vue Single File Components.