Installation & Setup

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

Requirement	Version
Figma Desktop	Latest
Node.js	≥ 18
npm	≥ 9

Sideload the plugin

Clone the monorepo

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

Install plugin dependencies

Navigate to the plugin folder and install dependencies:

cd "GoalGen Creator"
npm install

This installs @figma/plugin-typings and TypeScript.

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

Import into Figma Desktop

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

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.

Get Started

Figma Plugin

Creator Studio

Essentials

Installation & Setup

Prerequisites

Sideload the plugin

Development workflow

TypeScript configuration

Network access

​Prerequisites

​Sideload the plugin

​Development workflow

​TypeScript configuration

​Network access

Prerequisites

Sideload the plugin

Development workflow

TypeScript configuration

Network access