Figma Plugin Writer

The user must provide:
1. **Plugin directory** — folder containing `code.js` and `manifest.json`
2. **Code file** — typically `code.js`
3. **Target Figma file** — optional, for context

## Workflow

1. Receive design requirements from the user
2. Write plugin code to `code.js`
3. Notify user: `Plugins → Development → <plugin-name>`
4. Iterate based on feedback

## API Reference

### Font Loading (required before creating text)

```js
await figma.loadFontAsync({ family: "Inter", style: "Regular" });
await figma.loadFontAsync({ family: "Inter", style: "Medium" });
await figma.loadFontAsync({ family: "Inter", style: "Semi Bold" });
await figma.loadFontAsync({ family: "Inter", style: "Bold" });
```

### Frame (Container)

```js
var frame = figma.createFrame();
frame.name = "MyFrame";
frame.resize(width, height);
frame.cornerRadius = 12;
frame.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }];
frame.x = 0;
frame.y = 0;
```

### Text

```js
var text = figma.createText();
text.characters = "Hello World";
text.fontSize = 16;
text.fontName = { family: "Inter", style: "Regular" };
text.fills = [{ type: "SOLID", color: { r: 0, g: 0, b: 0 } }];
```

### Rectangle

```js
var rect = figma.createRectangle();
rect.resize(100, 50);
rect.fills = [{ type: "SOLID", color: { r: 0.9, g: 0.2, b: 0.2 } }];
rect.cornerRadius = 8;
```

### Nesting Nodes

```js
frame.appendChild(text);
parentPage.appendChild(frame);
```

### Drop Shadow

```js
frame.effects = [{
  type: "DROP_SHADOW",
  color: { r: 0, g: 0, b: 0, a: 0.1 },
  offset: { x: 0, y: 4 },
  radius: 12,
  spread: 0,
  visible: true,
  blendMode: "NORMAL",
}];
```

### Stroke

```js
frame.strokes = [{ type: "SOLID", color: { r: 0.8, g: 0.8, b: 0.8 } }];
frame.strokeWeight = 1;
```

### Text Alignment

```js
text.textAlignHorizontal = "CENTER"; // LEFT | CENTER | RIGHT | JUSTIFIED
text.textAlignVertical = "CENTER";   // TOP | CENTER | BOTTOM
```

### Auto Layout (inside Frame)

```js
frame.layoutMode = "VERTICAL"; // or "HORIZONTAL"
frame.primaryAxisAlignItems = "CENTER";   // MIN | CENTER | MAX | SPACE_BETWEEN
frame.counterAxisAlignItems = "CENTER";
frame.paddingTop = 16;
frame.paddingBottom = 16;
frame.paddingLeft = 16;
frame.paddingRight = 16;
frame.itemSpacing = 8;
```

### Page Navigation

```js
var pages = figma.root.children;
var targetPage = pages[pages.length - 1];
await figma.setCurrentPageAsync(targetPage);
```

### Clear Page Content

```js
var old = targetPage.children.slice();
for (var i = 0; i < old.length; i++) {
  old[i].remove();
}
```

### Viewport

```js
figma.viewport.scrollAndZoomIntoView([frame]);
```

### Notifications

```js
figma.notify("Done!", { timeout: 3000 });
figma.notify("ERROR: " + e.message, { timeout: 10000 });
```

### Page Info

```js
var pages = figma.root.children;
var count = pages.length;
var pageName = pages[0].name;
```

## Code Template

```js
async function main() {
  try {
    // 1. Load fonts
    await figma.loadFontAsync({ family: "Inter", style: "Regular" });
    await figma.loadFontAsync({ family: "Inter", style: "Bold" });

    // 2. Get target page
    var pages = figma.root.children;
    var target = pages[pages.length - 1];
    await figma.setCurrentPageAsync(target);

    // 3. Clear old content
    var old = target.children.slice();
    for (var i = 0; i < old.length; i++) old[i].remove();

    // 4. Create design...
    var frame = figma.createFrame();
    frame.name = "Screen";
    frame.resize(375, 812);
    frame.fills = [{ type: "SOLID", color: { r: 1, g: 1, b: 1 } }];
    frame.x = 0;
    frame.y = 0;
    target.appendChild(frame);

    // 5. Done
    figma.viewport.scrollAndZoomIntoView([frame]);
    figma.notify("Design complete!", { timeout: 3000 });

  } catch (e) {
    figma.notify("ERROR: " + e.message, { timeout: 10000 });
  }
}

main();
```

## Pitfalls & Gotchas

### documentAccess: "dynamic-page" Mode

If `manifest.json` has `"documentAccess": "dynamic-page"`:
- ❌ `figma.currentPage = page` → ✅ `await figma.setCurrentPageAsync(page)`
- ❌ `figma.getNodeById()` → ✅ `await figma.getNodeByIdAsync()`
- ❌ `figma.closePlugin()` → ✅ `await figma.closePluginAsync()`

### Error Handling

- Always wrap code in `try-catch`
- Show errors via `figma.notify("ERROR: " + e.message, { timeout: 10000 })`
- Do not use emoji in text content (font may not support the glyph)
- Do not call `figma.closePlugin()` automatically (let user close manually)

### Free Tier Limits

- Max 3 Pages — do not create new Pages
- Work within existing Pages (clear and rebuild)

### Fonts

- Default: Inter (built into Figma)
- Supported styles: "Regular", "Medium", "Semi Bold", "Bold"
- Colors use `{ r, g, b }` format with 0-1 range

## Iteration Pattern

On each design iteration:
1. Clear old elements: `page.children.slice().forEach(c => c.remove())`
2. Recreate design with changes
3. Notify user to re-run the plugin