🔌 Sample Figma plugins.
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.tsin 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
NodeTypein the current document.
Takes image fills in the current selection and inverts their colors.
This demonstrates:
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:
Generates a triangle using vector paths.
Creates rectangles. Demonstrates bundling plugin code using Webpack.
Creates rectangles (same as the Webpack sample plugin).
This demonstrates:
Creates rectangles (same as the Webpack sample plugin).
This demonstrates: