> ## Documentation Index
> Fetch the complete documentation index at: https://docs.goalgen.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation & Setup

> Sideload the GoalGen Creator plugin in Figma Desktop and configure the TypeScript build pipeline.

<Warning>
  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.
</Warning>

## Prerequisites

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

## Sideload the plugin

<Steps>
  <Step title="Clone the monorepo">
    ```bash theme={null}
    git clone https://github.com/your-org/goalgen.git
    cd goalgen
    ```
  </Step>

  <Step title="Install plugin dependencies">
    Navigate to the plugin folder and install dependencies:

    ```bash theme={null}
    cd "GoalGen Creator"
    npm install
    ```

    This installs `@figma/plugin-typings` and TypeScript.
  </Step>

  <Step title="Build the plugin">
    ```bash theme={null}
    npm run build
    ```

    This compiles `code.ts` → `code.js`. You should see no errors.

    For live rebuilding during development:

    ```bash theme={null}
    npm run watch
    ```
  </Step>

  <Step title="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**
  </Step>

  <Step title="Run the plugin">
    Open any Figma file, select a frame, then:

    **Right-click** → **Plugins** → **Development** → **GoalGen Creator**

    The plugin panel opens on the right side. Select a frame on the canvas to activate the export UI.
  </Step>
</Steps>

## 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
```

<Info>
  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**.
</Info>

## TypeScript configuration

The Figma plugin sandbox has a limited JS engine. The project is configured specifically to work within those constraints:

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "es2017"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ]
  },
  "include": ["code.ts"]
}
```

<Warning>
  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.
</Warning>

## Network access

The plugin is pre-configured for GoalGen API and OAuth calls:

```json manifest.json theme={null}
"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.