Design Toolkit

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.

Disclaimer: Things are a bit messy and there are some typescript errors to be addressed. But it does the job, and there was enough interest that I wanted to share it so everyone can have a try building their own toolkit plugin for Figma. Contributions welcome! 🤙

Features

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)

Roadmap

• 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

Installation

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.

Run Locally

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

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

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, 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.

Run the plugin in Figma

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"

Troubleshooting

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.

Publishing

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

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

Used By

This project is used by the following companies:

• Westpac New Zealand

Acknowledgements

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