Figma Plugin Writer#

Write plugin code ( code.js) to automate design in Figma files. After updating the code, notify the user to run the plugin.

Prerequisites#

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