Skip to main content
The GoalGen Creator plugin is currently distributed as a development / private plugin — it is not yet listed in the Figma Community. You need Figma Desktop to sideload it.

​
Prerequisites

RequirementVersion
Figma DesktopLatest
Node.js≥ 18
npm≥ 9

​
Sideload the plugin

1

Clone the monorepo

git clone https://github.com/your-org/goalgen.git
cd goalgen
2

Install plugin dependencies

Navigate to the plugin folder and install dependencies:
cd "GoalGen Creator"
npm install
This installs @figma/plugin-typings and TypeScript.
3

Build the plugin

npm run build
This compiles code.ts → code.js. You should see no errors.For live rebuilding during development:
npm run watch
4

Import into Figma Desktop

  1. Open Figma Desktop
  2. Go to Plugins → Development → Import plugin from manifest…
  3. Select: 
    goalgen/GoalGen Creator/manifest.json
  4. The plugin now appears under Plugins → Development → GoalGen Creator
5

Run the plugin

Open any Figma file, select a frame, then:Right-click → Plugins → Development → GoalGen CreatorThe plugin panel opens on the right side. Select a frame on the canvas to activate the export UI.

​
Development workflow

GoalGen Creator/
├── code.ts          ← Plugin sandbox logic (edit this)
├── code.js          ← Compiled output (auto-generated, do not edit)
├── ui.html          ← Plugin UI (vanilla HTML/CSS/JS)
├── manifest.json    ← Plugin metadata & network permissions
├── package.json
└── tsconfig.json
After editing code.ts, run npm run build (or keep npm run watch running) and then reload the plugin in Figma: Plugins → Development → GoalGen Creator → Reload plugin.

​
TypeScript configuration

The Figma plugin sandbox has a limited JS engine. The project is configured specifically to work within those constraints:
tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "es2017"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ]
  },
  "include": ["code.ts"]
}
Do not use optional chaining (?.), nullish coalescing (??), or bare catch {} (without a binding) in code.ts. These ES2019/2020 features are not supported by Figma’s sandbox even with "target": "es6". Always write catch (_e) {} and use explicit null checks.

​
Network access

The plugin is pre-configured for GoalGen API and OAuth calls:
manifest.json
"networkAccess": {
  "allowedDomains": [
    "https://*.goalgen.com",
    "http://localhost:3000",
    "http://localhost:3002"
  ]
}
Any fetch() calls from within the plugin UI to domains outside this list will be blocked by Figma.