🔌 Sample Figma plugins.
Available items
No Items, yet!
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
🔌 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.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.
Bar Chart
Generates a bar chart given user input in a modal.
Circle Text
Takes a single text node selected by the user and creates a copy with the characters arranged in a circle.
Document Statistics
Computes a count of the nodes of each
NodeTypein the current document.
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.
Pie Chart
Generates a pie chart given user input in a modal.
Sierpinski
Generates a fractal using circles.
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.
Vector Path
Generates a triangle using vector paths.
Webpack
Creates rectangles. Demonstrates bundling plugin code using Webpack.
React
Creates rectangles (same as the Webpack sample plugin).
This demonstrates:
- bundling plugin code using Webpack, and
- using React with TSX.
Vue
Creates rectangles (same as the Webpack sample plugin).
This demonstrates:
- bundling plugin code using Webpack, and
- using Vue Single File Components.