MP Asset Generator Plugin

This plugin is designed exclusively for the MP Asset Generator Figma file. It automatically sets fill styles and components based on a college's name and brand colors.

demo-08-08.mov

Setup and Running the Plugin Locally

After cloning the repo on your plugin, open Figma and use the quick actions bar (Cmd-/) to call "Create Plugin" (or go to Plugins > Development > Create Plugin in the menu bar).

Link an existing plugin by choosing the manifest.json file within mp-asset-generator/build — NOT just mp-asset-generator — in the main directory. Afterward, to call the plugin, simply type mp-asset-generator into the quick actions bar.

Editing the Plugin

This plugin was built using Rasmus Andersson's figplug. You'll need to install it for your changes to build properly. In the parent directory of your local copy of mp-asset-generator, run

npm install -g figplug

If figplug doesn't work for you, report it as an issue, and we can move the code to a different framework (e.g. Webpack).

The relevant code is in the following files:

• ui.html and ui.css define HTML skeleton and styles for the plugin's UI.
• ui.ts populates the HTML canvas and interfaces with plugin.ts.
• plugin.ts interfaces with the Figma file, modifying its styles and components and messaging updates to the UI.

Call the following command in the parent directory of mp-asset-generator:

figplug build -w mp-asset-generator

As you edit these files, figplug will automatically build the relevant plugin files.

Tips

• To see your edits take effect in Figma, close the plugin and use Cmd-Alt-P to quickly reopen it.
• You can view console logs in Figma via "Open Console" in the quick actions. Or Plugins > Developer > Open Console.
• Figma Plugin Docs: API + Guide
• Figma Plugin Forum: Ask questions here.