Customise this Figma reference plugin to provide useful resources and automations for yourself or your team. Inspect the code to see how you can customise it for your own needs and publish it for your team to use.

Follow the instructions in my medium write up for this project: Build your team a file automation plugin in Figma.

Made by @JoshDesignNZ using Create Figma Plugin.

Contributions encouraged!: Please feel free to suggest improvements for the plugin 🤙

This plugin template contains several automation examples, including:

• Create all your document pages
• Insert a cover component with dynamic user information and date
• Insert a heading component on each page, with title and optional description
• Insert custom component(s) on specific pages
• Add links to team resources (e.g. Design System Documentation, Code repos, Comms channels)

• Basic design linting (Flag elements that don't match your styles/tokens)
• Import/update content strings
• Workflow checklists, including:
  • Definition of Done
  • Definition of Ready
  • Component best practice

Instructions are based off the quick start instructions from create-figma-plugin.

Clone the project

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.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

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. Don't launch it yet

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, to reference the unique Key for each component.
3. Run the Inspector plugin and identify the unique Key for the components in your version of "Design Toolkit - Library". You will need to update the keys in main.ts before the plugin will work.

The plugin can now be launched 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"

If the plugin has an error, recommend checking the Console in Developer Tools in your browser for an error message. It could be that the font used in your component is not installed/available to your team.

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

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

This project is used by the following companies:

• Westpac New Zealand

• Create Figma Plugin by Yuan Qing Lim
• Figma plugins Slack community