Build your team a file automation plugin in Figma

Customise my Figma plugin template to make a set of useful automations and links for you and your team.

We don’t (yet) have the ability for custom templates in Figma, and as a workaround we have tried a “Duplicate This File” approach with limited success. I knew I could make things easier for our designers, and wanted to see what was possible with a custom plugin.

Note: Figma’s private plugins are currently only available on Organisation and Enterprise plans. However, if you’re a team of one and just using it on your own machine you could just run the plugin from your ‘Development’ menu.

So what can it do?

The plugin code can be easily customised for your teams needs, and contains a range of automation examples, including:

• Create your document page structure
• Insert a cover component with dynamic user information and date
• Insert an optional page heading component, with title and description
• Insert custom component(s) on specific pages
• Set the initial zoom view for each page
• Add links to team resources (e.g. Design System Documentation, Code repos, Comms channels)
• Add a sidebar button to relaunch the plugin easily

Why make a plugin when you could use X or buy Y?

There were a few reasons:

1. Learn and share — As a designer who codes, I really enjoy building things that will make things easier for me and my team. I wanted to learn how to do this, and set it up so that I could share it with the community.
2. Sidestep procurement process— Lots of designers means lots of subscriptions, and depending on your business rules it can involve lots of steps to get approval of the product and/or vendor.
3. Full customisation — You can set up a private plugin purely for your own team’s needs. Make it as user friendly as possible; add clear instructions for them, show them the documentation, provide links to your internal and external resources, steer users to your social channels for support.

Keen? Let’s go!

Clone the template code and reference components to see how it all comes together, and modify it to create a useful plugin for your own team. I’ve tried to organise the code with comments, inspect the code to see how it works, tweak it for your own needs and publish it for your team to use!

Links

• Plugin template on Github
  https://github.com/NoWorries/toolkit-figma-plugin
• Component examples on Figma
  https://www.figma.com/community/file/1106540939095361694

Overview

In a nutshell, you’re following these three steps:

1. Setting up the example Figma components as a published library for your team
2. Modifying the plugin code to use the Figma components now in your library
3. Building the plugin code and testing the plugin in Figma

Instructions

You can clone the project from the command line with the code below, or try the “Use this template” button on the plugin repo.

git clone https://github.com/NoWorries/toolkit-figma-plugin

Go to the project directory

cd toolkit-figma-plugin

Configuration options for your plugin go under the “figma-plugin” key of your package.json file. Modify both the name values that you want to use for your plugin.

The relaunchButtons properties will insert a button in the sidebar to easily launch your plugin again.

{
  "figma-plugin": {
    "editorType": [
      "figma"
    ],
    // ...
    "name": "Design Toolkit",
    "main": "src/main.ts",
    "ui": "src/ui.tsx",
    "relaunchButtons": {
      "designToolkit": {
        "name": "Design Toolkit",
        "main": "src/main.ts",
        "ui": "src/ui.tsx"
      }
    },
  }
}

Build the plugin:

npm install
npm run build
npm run watch

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

• Plugin Manifest

Configuring your plugin is done via package.json. Avoid manually editing the manifest.json file. Because the manifest.json file is always regenerated on build, any changes you make will always get overridden.

Installing the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.
4. The plugin will now be installed and available in the “Figma > Plugins > Development” menu.
5. Don’t launch it yet, complete the Figma setup and plugin customisations below.

Figma setup

1. Duplicate the Design Toolkit — Library to your team and publish the components so that the plugin can access them.
2. Install the Inspector plugin, we will use this to determine the unique Key for each component. You need to update your specific component keys in main.ts before the plugin will work.

Customise your plugin code

Page structure (Optional)

You can use whats included or customise the list of pages created. Each page will have the ❖Heading component inserted. If you don’t want the ❖Heading inserted on a page, just remove the title property from the array item.

Screenshot showing page structure from example plugin

1. Open main.ts and update the pages array from lines 17-90. The array sequence determines the page order.
2. Each page in the array has four properties:
   — Name = The name that shows in the pages panel of Figma (Customise this as you see fit, you can even use Emoji in the page name)
   — Node = Declares it is a page (no need to modify)
   — Title = Used as the title in the heading component on each page, this doesn’t have to be the same as the ‘Name’.
   — Description = Used as the description in the heading component

Replace component keys (Required step)

You must complete this step to reference the example components, otherwise nothing will work initially. You must publish this file for your team to be able to import the component, make sure it is enabled by default so users can run the plugin without having to enable the library first.

Open up the “Design Toolkit — Library” that you duplicated to your account. Then perform the following steps:

Screenshot showing the Inspector plugin with the Title component selected

1. Select one of the components (❖ Cover, ❖ Title, ❖ Example)
2. Run the Inspector plugin (Plugins > Inspector)
3. Scroll down through the Inspector plugin panel and copy the unique Key for the component
4. Replace the unique component Key in the section of main.ts
   — ❖ Cover = ReplaceINSERT_COVER_KEY_HERE (Approx line 138)
   — ❖ Title = Replace INSERT_TITLE_KEY_HERE (Approx line 147)
   — ❖ Example = Replace INSERT_EXAMPLE_KEY_HERE (Approx line 156)

Repeat the above steps for each of the components.

Customise sidebar (relaunch) button

You already defined the title of the sidebar button in package.json on line 26.

"name": "Design Toolkit",

You can modify the description underneath the sidebar button in main.ts, simply edit the description on line 11.

description: "Useful tools and links",

Modify the links

The plugin UI is editable in ui.tsx, read through the code and see if you can see how the text and links are composed.

Run locally

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Run the plugin locally

Again, while you’re developing the plugin you need to be using the Figma Desktop app. You can launch your plugin using either of these methods:

1. Figma > Plugins > Development > Design Toolkit
2. Open the Quick Actions window using Cmd + / or Ctrl + / and type "Design Toolkit"

Once you have setup the Figma library and made your code customisations, you can click the “Setup design document” button to test your automation.

While processing the commands a notification will be visible that says “Building template”.

When it is completed successfully, the plugin window will close and a new notification message will appear that says “Design Toolkit template applied”.

Success! 🎉

You’ve just setup your own Figma plugin! You can inspect the code comments more and see what else you want to modify for your team.

Note: If it stays on “Building template” for more than a few seconds with no changes, there has probably been an issue with one of the components. Check the troubleshooting tips at the end.

Publishing

When you’re happy with your plugin, follow the instructions to publish it.

• Publishing to Figma Community
• Publishing to private Organisation or Enterprise

Troubleshooting

If the plugin has an issue when running, check the Console in Developer Tools in the Figma app for an error message.

1. Go to Plugins → Development → Open Console
2. Or press Ctrl + Shift + i (Windows) or Cmd + Option + i (macOS)

Some of the issues I bumped into along the way:

• Text layers couldn’t be edited — It could be that the font used in your component is not installed/available to your team. The console warning will advise the fonts required for your file. Add them to the function in main.ts called loadFont() around Line 98.
• Component not loaded — Check you are using the right key(s) for the components (confirm with the Inspector plugin)

Thanks to

• create-figma-plugin by @yuanqinglim
• Figma plugins Slack community