figma / plugin-samples

🔌 Sample Figma plugins.

🍱 Figma + FigJam Plugin Samples

Sample plugins using the Figma + FigJam Plugin API docs.

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

DISCLAIMER:

The resources you see here are example plugin samples meant for Figma plugin development and FIGMA PROVIDES THEM "AS IS", WITHOUT WARRANTY OF ANY KIND. We don't promise they're perfect or will always work as you expect. We're not responsible for any problems you might experience from using them. It's up to you to check these samples out thoroughly and make sure they're safe and suitable for your needs before you use them. If something goes wrong, Figma won't be held responsible. If you keep using these samples, it means you're okay with these terms. FIGMA EXPLICITY DISCLAIMS ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT, AND NON-INFRINGEMENT AND ANY WARRANTIES ARISING OUT OF COURSE OF DEALING OR USAGE OF TRADE.

Getting Started

These plugins are written using TypeScript to take advantage of Figma's typed plugin API. Before installing these samples as development plugins, you'll need to compile the code using the TypeScript compiler. Typescript can also watch your code for changes as you're developing, making it easy to test new changes to your code in Figma.

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

$ npm install -g typescript

Next install the packages that the samples depend on. Currently, this will only install the lastest version of the Figma typings file. Most of the samples will reference this shared typings file in their tsconfig.json.

$ npm install

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 (Plugins > Development > Import plugin from manifest... from the right-click menu)!

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.

Styling your plugin UI

For plugins that have a UI, we recommend matching the style and behavior of Figma. Many other plugins follow this convention and it helps create consistency in the plugin experience for users as they use different plugins. Here's a few approaches that can help when styling your UI:

• Figma Plugin DS A lightweight UI library for styling Figma plugins.
• Create Figma Plugin UI - A library of production-grade Preact components that replicate the Figma editor’s UI design

FigJam Plugins

The following sample plugins use the new FigJam node types (stickies, shapes with text, connectors, and stamps) and so work best in FigJam, i.e. with an editorType of 'figjam' in your manifest.json file.

Vote Tally

This plugin will find all stamps close to a sticky and generate a tally of all the stamps (votes) next to a sticky on the page.

Check out the source code.

Create Shapes + Connectors

This plugin creates 5 ROUNDED_RECTANGLE Shapes with Text nodes and adds a Connector node in between each of them.

Check out the source code.

Additional Examples

The following sample plugins work in both Figma and FigJam.

Conditional Plugins

You can create plugins that have conditional logic depending on whether they are run in Figma, or FigJam.

When this plugin runs in Figma, it opens a window to prompt the user to enter a number, and it will then create that many rectangles on the screen.

When this plugin runs in FigJam, it opens a window to prompt the user to enter a number, and it will then create that many ROUNDED_RECTANGLE shapes with text nodes, and also adds a connector node in between each shape.

Check out the source code.

Examples without a plugin UI

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.

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.

Meta Cards

This plugin will find links within a text node and create on canvas meta cards of an image, title, description and link based on the tags in the head of a webpage at the relative links.

Check out the source code.

Sierpinski

Generates a fractal using circles.

Check out the source code.

Vector Path

Generates a triangle using vector paths.

Check out the source code.

Examples with a plugin UI

Bar Chart

Generates a bar chart given user input in a modal.

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.

Pie Chart

Generates a pie chart given user input in a modal.

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.

Icon Drag-and-Drop

Allows drag-and-drop of a simple icon library from a modal to the canvas.

This demonstrates registering callbacks for drop events and communicating drop data from the plugin iframe.

Check out the source code.

Icon Drag-and-Drop Hosted

Allows drag-and-drop of a simple icon library from a modal running an externally-hosted UI to the canvas.

This demonstrates registering callbacks for drop events and embedding drop data using the dataTransfer object in the drop event.

Check out the source code.

PNG Crop

Crops PNGs as they are dropped onto the canvas.

This demonstrates registering callbacks for drop events and reading bytes from dropped files.

Check out the source code.

Examples of plugins for Dev Mode

Snippet Saver

An example of a plugin that allows you to author and save code snippets directly on nodes that will render in the inspect panel when the node is selected.

Check out the source code.

Codegen

An example of a plugin for codegen

Check out the source code.

Dev Mode

An example of a plugin configured to work in Figma design, Dev Mode inspect, and run codegen.

Check out the source code.

Examples with variables

Styles to Variables

An example of a plugin that converts Figma styles to variables

Check out the source code.

Variables Import / Export

An example of a plugin that imports and exports variables

Check out the source code.

Examples with parameters

Go To

A plugin to quickly go to any layer or page in the Figma file.

For more information on how to accept parameters as input to your plugin, take a look at this guide.

Check out the source code.

Resizer

Resizes a selected shape. There are two submenus, allowing for absolute resizing and relative resizing.

For more information on how to accept parameters as input to your plugin, take a look at this guide.

Check out the source code.

SVG Inserter

Inserts an SVG icon into the canvas.

For more information on how to accept parameters as input to your plugin, take a look at this guide.

Check out the source code.

Text Review

Example of how to use the text review API to suggest and flag changes while editing text nodes.

Check out the source code.

Trivia

Generates a series of trivia questions taken from an external trivia API.

For more information on how to accept parameters as input to your plugin, take a look at this guide.

Check out the source code.

Post Message

A very basic example of how to communicate between a UI and the Figma canvas using postMessage.

Check out the source code.

Capital

Finds the capital city of a country. This demonstrates:

• How to make network requests to populate parameter suggestions

For more information on how to accept parameters as input to your plugin, take a look at this guide.

Check out the source code.

Examples with bundling

React

Create rectangles! This demonstrates:

• Bundling plugin code using Webpack
• Using React with TSX

    $ npm install
    $ npm run build

esbuild and Webpack examples are great places to start if you are interested in bundling.

Other Figma Plugin Samples + Starters

• Create Figma Plugin - A comprehensive toolkit for developing Figma plugins.
• Figma Plugin Boilerplate - A starter project for creating Figma Plugins with HTML, CSS (+ SCSS) and vanilla Javascript without any frameworks.
• Figsvelte - A boilerplate for creating Figma plugins using Svelte.
• Figplug - A small program for building Figma plugins. It offers all the things you need for most projects: TypeScript, React/JSX, asset bundling, plugin manifest generation, etc.

plugin-samples's Issues

Styles-to-variables error

When I try to run the plugin, I get this error.

Case Sensitive Search

Great work creating the text-search sample code for Figma, but I noticed that it's case sensitive, in other words if I search for "Walk" and there is a text with "walk" in it, it wouldn't find it.

So, I updated the code as I know how [I am no expert], so here's the changes if you want to update your code and make it a public plugin

In the ui.html file

And, in the code.ts

Thanks

Website Design

Website Design

How to access "document" in code.ts?

Document is undefined in code.ts. I can't createElement('a') for download some styles data I get from figma API.
How to access "document" in code.ts?
So user can download the json generate by the plugin?
function downloadObjectAsJson(exportObj, exportName){
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", exportName + ".json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}

Can't use createImageAsync

its showing
Property 'createImageAsync' does not exist on type 'PluginAPI'. Did you mean 'createImage'?ts(2551)

Sample Project - Watch Error

After doing the instruction from the documentation, this error is displayed...

Example of how to use multiple .html files

Hello!
I've recently started developing a plugin for Figma.
I have a user interface that should:

1. Ask the user for a login token
2. Then load the main UI

At the moment I have my two html files: ui.html and main.html.
From the ui.html, I have the classic:
window.location.href = 'html/main.html'
rigged to a button.

If I test it in the browser, it all works fine, the page changes normally.
But when I run it in Figma:
Uncaught DOMException: Failed to set the 'href' property on 'Location': 'html/main.html' is not a valid URL. at HTMLButtonElement.document.getElementById.onclick (<anonymous>:1080:30)

This is my webpack config file. I've taken most of it from the webpack sample, and tried to modify it a bit, but I'm no expert, so this might be the issue. I'm just dazzled that if I debug in Chrome, everything works fine.

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

module.exports =
    //Client Config
    (env, argv) => ({
        mode: argv.mode === 'production' ? 'production' : 'development',

        // This is necessary because Figma 'eval' works differently than normal eval
        devtool: argv.mode === 'production' ? false : 'inline-source-map',

        entry: {
            ui: './src/ts/ui.ts', // The entry point for your UI code
            code: './src/ts/code.ts', // The entry point for your plugin code
        },

        module: {
            rules: [
                // Converts TypeScript code to JavaScript
                {test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/},

                // Enables including CSS by doing "import './file.css'" in your TypeScript code
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },

                {
                    test: /\.html$/,
                    use: [{
                        loader: "file-loader",
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'html/',
                            publicPath: 'html/'
                        }
                    }],
                    exclude: path.resolve(__dirname, 'src/html/ui.html') // Exclude ui.html since it gets loaded from the plugin
                },

                // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
                {test: /\.(png|jpg|gif|webp|svg|zip)$/, loader: [{loader: 'url-loader'}]},
            ],
        },

        // Webpack tries these extensions for you if you omit the extension like "import './file'"
        resolve: {extensions: ['.tsx', '.ts', '.jsx', '.js']},

        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
        },

        // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
        plugins: [
            new webpack.DefinePlugin({
                'global': {} // Fix missing symbol error when running in developer VM
            }),
            new HtmlWebpackPlugin({
                template: './src/html/ui.html',
                filename: 'ui.html',
                inlineSource: '.(js)$',
                chunks: ['ui'],
            }),
            new HtmlWebpackInlineSourcePlugin(),
        ],
    })

OAuth example

please add an example of https://www.figma.com/plugin-docs/oauth-with-plugins

html-webpack-inline-source-plugin is no longer maintained

html-webpack-inline-source-plugin is no longer maintained and doesn't work with html-webpack-plugin@^4.0.
More detailed information can be found here

Transparency blocks variable imports | Variables Import Export plugin

I do export of variables and there and then I try import. On the first variable with transparency I get an error

Error : 'console' was also declared here.

Hi, I am facing an issue while using this package for Figma plugin and the following is the error I am facing

node_modules/@figma/plugin-typings/index.d.ts:11:9 11 const console: Console ~~~~~~~ 'console' was also declared here.

Versions are
Node: 17
NPM: 8
Typescript: 4.4

open for suggestion

Capital plugin doesn't run

Downloading and attempting to run the plugin locally doesn't seem to work, I get an error.

Analytics support?

Google analytics / firebase analytics in figma plugin?

Broken link in README

Hello team, I've noticed that the first link in the README leads to a 404 page.

This one-> Sample plugins using the Figma + FigJam Plugin API.

Attached is a screenshot for reference:

If you need any more information, please let me know.
Thank you!

Vue Sample error

I'm running into this problem after cloning and running the build script on Vue Sample project

$ npm run build

> linktree@ build /Users/cassiano/Downloads/plugin-samples-master/vue
> webpack --mode=production

Hash: a8e004ca502fac76cfcc
Version: webpack 4.41.0
Time: 1396ms
Built at: 07/20/2020 2:15:48 PM
  Asset      Size  Chunks             Chunk Names
main.js  1.24 KiB       0  [emitted]  main
ui.html  99.6 KiB          [emitted]  
  ui.js  99.5 KiB       1  [emitted]  ui
Entrypoint ui = ui.js
Entrypoint main = main.js
[0] ./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 552 bytes {1} [built]
[2] ./src/logo.svg 293 bytes {1} [built]
[3] ./src/App.vue?vue&type=style&index=0&lang=css& 544 bytes {1} [built]
[4] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 1010 bytes {1} [built]
[7] (webpack)/buildin/global.js 472 bytes {1} [built]
[8] ./src/code.ts 1.39 KiB {0} [built]
[9] ./src/ui.js + 6 modules 6 KiB {1} [built]
    | ./src/ui.js 158 bytes [built]
    | ./src/App.vue 1.12 KiB [built]
    | ./src/App.vue?vue&type=template&id=7ba5bd90& 195 bytes [built]
    | ./src/App.vue?vue&type=script&lang=js& 248 bytes [built]
    | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90& 1.2 KiB [built]
    | ./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 476 bytes [built]
    |     + 1 hidden module
    + 3 hidden modules
Child html-webpack-plugin for "ui.html":
     1 asset
    Entrypoint undefined = ui.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/ui.html 216 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

node v13.9.0
npm 6.13.7
MacOS Catalina 10.15.4 (19E287)
MacBook Pro (16-inch, 2019),
2.6 GHz 6-Core Intel Core i7
16 GB 2667 MHz DDR4

Error: Unable to load code: Error for Trivia and Capital plugins

When trying to run plugin (after importing manifest file) the plugin shows error.

Figma plugin window max width and height

I am curious to know the maximum width and height of a Figma plugin window. I require this information to design the plugin keeping the measure.

Publish @types/figma to NPM and open a repo for plugin API

I didn't find any other channel where I can post feature requests, thus posting here.

Benefits include:

• Semantically versioned API (plugin authors can easily find breaking changes)
• Easy to download any version of the API

Precedents include @types/chrome and @types/vscode (I set it up).

Also I would encourage setting up a GitHub repo for the API. This way people can report bugs or ask API questions in the open.

How are people download images from remote URLs before createImage?

I'm not seeing a good solid way to download a remote image and inject it.
Obviously it's being done in Unsplash and Google Sheet Sync...

It's looking as if they're being remotely processed via an undocumented API but I cannot find out how to do it?

The images are being ran through this... somehow?
https://www.figma.com/api/upnode/image?purpose=canvas&sha1=32ef6ede498d9bcc86f628f80a609137ef8bb68c&fileKey=34jAAw6DZI3xEM0K75ZnFm

Any tips?

React Code.ts debug

Hi,

How can I debug the code.ts file using the react sample?
I see all other files available in the source panel webpack://./src, but not the code.ts, so there's no way I can set breakpoints there.

Help please :D

Thanks!

Variable export-import plugin does not import variables with more than one mode.

I have created a collection of variables that has 4 modes (They are labeled Light, Dark, High-Contrast, and Wireframe). I see them when I export them, but the modes are encapsulated in comments and not part of the json.

When I try to import the exported json, it fails because of the comments. I removed the comments but then it just dumped all the variables into one mode column. I didn't even know it was working at first as there is no response when it finishes. So I pressed the button several times to only realize it created multiple collections with the same name.

I thought maybe I needed to manually change the collection name to use the name in the comments, but all this does is create new collections with the "." in the name. It does not add the mode and populate it with the expected values for the mode corresponding to the variables already in the first collection.

I also tried modifying the json with what I thought might be expected with the modes nested in the values for the color variable. That also failed either creating nested variables in the same mode or another variation I tried just failed to import anything. So I am stuck with manually adding the additional modes.

It's been a long time since I wrote some scripts, but I was looking into trying to see if I can figure out how to update the script to get it to properly parse the name into modes.

enable multiple plugins to run simultaneously

Use case

• add a chat like feature
• add a data chart from external source that keeps updating
• enable document changes listener to inform an external entity

Being maintained?

I think this is a great and useful project for people who make figma plugins!

However, it appears that PRs and issues are no longer being addressed since October 2020. Is it possible that this project is over? Are there any plans to choose a different maintainer or another third party to manage this?

Unable to run plugin code by process

After downloading according to the process and running tsc, the error reported in figma is: Invalid manifest field 'networkAccess', and the URLs in the configuration items are all 404. what should i do next?

Would you mind adding a LICENSE file to the repository?

I'd like to use the figma.d.ts types file and some of the example code, but there is no license included.

It looks like the React example uses the ISC license.

Would it be possible to add the license file to the repo?

Thank you!

variables-import-export plugin only working for colors

I tried the variables-import-export plugin. It worked to export variables ok. When I tried to import JSON following the design tokens specification it would only import colors and not dimensions.
I validated my tokens with this design tokens validator so they should be ok.

multilanguage support

multilanguage support

Facing issue for Connector options in FigJam Files.

• Using in Windows10
• Created some small Rectangular Box.
• When zoom >= 35% able to see connectors otherwise not.

Below image is for zoom level 35.

Below image is for zoom level less than 35, showing no connectors.

The webpack example does not build.

Just letting you know about this. Also the website link here: https://www.figma.com/plugin-docs/bundling-webpack/ needs to be updated to the new name of the folder. If you're not able to repro the issue then let me know and I can try to help from my side.

Feature request: replace figma.d.ts from samples/react with @figma/plugin-typings

Hey!

At the moment, figma typings are hard-coded to figma.d.ts in the React sample

Similar to #3 , I was wondering if instead of using a figma.d.ts file in the React sample, we could add @figma/plugin-typings to the dev dependencies, so that users are able to update their figma typings if they change after they pull the sample.

Thanks!

The font could not be loaded

The following snippet logs a warning unhandled promise rejection: Throw: The font "My Font Regular" could not be loaded

figma.listAvailableFontsAsync().then(fonts => {
  for (const font of fonts) {
    if (font.fontName.family === 'My Font' && font.fontName.style === 'Regular') {
      figma.loadFontAsync(font.fontName).then(() => {
        console.log('loaded fine');
      });
    }
  }
});

I purposefully chose not to have an error handler, since this code shouldn't actually fail.

I'm developing a variable font and I seem unable to load it via a plugin. Is this just a consequence of figma/community#2 ?

Error when running Styles to Variables

Error: in setValueForMode: Expected "newValue" to be one of the following, but none matched: 
  Expected "newValue" to have type boolean but got object instead
  Expected "newValue" to have type number but got object instead
  Expected "newValue" to have type string but got object instead
  Expected "newValue" to be one of the following, but none matched: 
    Expected "newValue.r" to have type number but got undefined instead
    Expected "newValue.r" to have type number but got undefined instead
  Expected "newValue" to be one of the following, but none matched: 
    Expected "newValue.type" to have type "VARIABLE_ALIAS" but got string instead
    at <anonymous> (PLUGIN_15_SOURCE:46)
    at forEach (native)
    at <anonymous> (PLUGIN_15_SOURCE:47)
    at forEach (native)
    at createTokens (PLUGIN_15_SOURCE:61)
    at <anonymous> (PLUGIN_15_SOURCE:6)
    at call (native)
    at <eval> (PLUGIN_15_SOURCE:105)

(anonymous) @ figma_app.min.js.br:5

Error when launching the plugin styles to variables

I get a error message "peError: Cannot read properties of undefined (reading 'r')"

When i try to run the plugin

Codegen sample plugin stuck loading

When I run the Codegen sample plugin it just gets stuck in a loading loop and doesn't produce any results or errors. @jake-figma @akbarbmirza

Webpack project is pretty broken at the moment

Love that it's updated to Webpack 5, but it's pretty unusable out of the box.

It doesn't work with Node 17. I had to change build to -
"build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode=production webpack"

Also, when you get it to build, you get hit with polyfill/utils errors.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }
 @ ./node_modules/webpack/lib/index.js 103:30-50 106:9-29

skipInvisibleInstanceChildren Not working

I am developing a plugin for myself, I want to find all TextNodes and ignore nodes that are hidden. Do I use figma.skipInvisibleInstanceChildren = true;
but the result, I get in the function fillAll() still contains the hidden node (its parent is hidden)

My code:

figma.skipInvisibleInstanceChildren = true; figma.showUI(__html__);

function getAllText(){ let listNodeSelected = figma.currentPage.selection let listTextNode = [] for (const node of listNodeSelected){ let textNodes = node.findAll((node) => node.type === "TEXT"); listTextNode = listTextNode.concat(textNodes) } }

How to implement skipInvisibleInstanceChildren?

Variable export plugin does not export Strings

Using the plugin sample on the official Figma's "Variable playground" results in :

/* [ Text ] - Example.English.tokens.json */
{}

/* [ Text ] - Example.German.tokens.json */
{}

/* [ Text ] - Example.Japanese.tokens.json */
{}

Any ideas?

Feature request: Upgrade Typescript in React Sample

Currently, the version is 3.5, latest LTS is 3.9.7. Could we grab an update?

Photoshop