add-plugin-figma

Zero-dependency utility helpers for Figma plugin development.

Color conversion, paint/effect factories, grid helpers, export settings, node traversal, auto-layout descriptors — all as plain functions with no Figma API required to import.

npm install add-plugin-figma

Color

import { hexToFigmaRgb, hexToFigmaRgba, figmaRgbToHex, figmaRgbToCss, mixFigmaRgb } from 'add-plugin-figma';

hexToFigmaRgb('#ff6b00')         // { r: 1, g: 0.42, b: 0 }
hexToFigmaRgba('#ff6b00', 0.5)   // { r: 1, g: 0.42, b: 0, a: 0.5 }
figmaRgbToHex({ r: 1, g: 0, b: 0 }) // '#ff0000'
figmaRgbToCss({ r: 1, g: 0, b: 0 }, 0.5) // 'rgba(255, 0, 0, 0.5)'
mixFigmaRgb(colorA, colorB, 0.5) // midpoint blend

Paints

import { solidPaint, linearGradientPaint, imagePaint } from 'add-plugin-figma';

node.fills = [solidPaint('#6366f1')];
node.fills = [solidPaint('#000000', 0.5)];

node.fills = [linearGradientPaint(
  [{ hex: '#6366f1', position: 0 }, { hex: '#8b5cf6', position: 1 }],
  135 // angle in degrees
)];

node.fills = [imagePaint(imageHash, 'FILL')];

Effects

import { dropShadow, innerShadow, layerBlur, backgroundBlur } from 'add-plugin-figma';

node.effects = [
  dropShadow({ hex: '#000000', opacity: 0.2, offsetY: 4, blur: 12 }),
  innerShadow({ offsetY: 2, blur: 4 }),
  layerBlur(8),
];

// Frosted glass
node.effects = [backgroundBlur(20)];

Grids

import { columnGrid, rowGrid, squareGrid } from 'add-plugin-figma';

frame.layoutGrids = [
  columnGrid({ count: 12, gutterSize: 16 }),
  rowGrid({ sectionSize: 8 }),
];

frame.layoutGrids = [squareGrid(4)];

Export settings

import { exportPng, exportSvg, exportPdf, exportJpeg } from 'add-plugin-figma';

node.exportSettings = [
  exportPng(1),
  exportPng(2, '@2x'),
  exportSvg(),
];

Typography

import { fontName, fontStyleFromWeight, FONT_STYLES } from 'add-plugin-figma';

textNode.fontName = fontName('Inter', 'SemiBold');
textNode.fontName = fontName('Inter', fontStyleFromWeight(600)); // 'SemiBold'

FONT_STYLES[700] // 'Bold'

Node traversal

import { walkTree, findAll, findOne, findByName, findByType, findOneByName } from 'add-plugin-figma';

// Visit every node
walkTree(figma.currentPage, node => {
  console.log(node.name, node.type);
});

// Find all TEXT nodes
const texts = findByType(figma.currentPage, 'TEXT');

// Find by name (exact)
const headers = findByName(figma.currentPage, 'Header');

// Find by name (regex)
const icons = findOneByName(figma.currentPage, /^Icon\//);

// Custom predicate
const hiddenNodes = findAll(figma.currentPage, n => !n.visible);

Sizing helpers

import { constraints, vector, rect, clamp, roundTo } from 'add-plugin-figma';

node.constraints = constraints('STRETCH', 'MIN');

// Create geometry descriptors
const pt = vector(10, 20);
const bounds = rect(0, 0, 320, 64);

clamp(value, 0, 100)
roundTo(3.14159, 2) // 3.14

Auto layout

import { autoLayout } from 'add-plugin-figma';

Object.assign(frame, autoLayout({
  direction: 'HORIZONTAL',
  spacing: 12,
  padding: 16,
  primaryAlign: 'CENTER',
  counterAlign: 'CENTER',
}));

// Vertical stack with asymmetric padding
Object.assign(frame, autoLayout({
  direction: 'VERTICAL',
  spacing: 8,
  paddingTop: 12,
  paddingBottom: 12,
  paddingLeft: 16,
  paddingRight: 16,
}));

CommonJS

const { solidPaint, dropShadow, hexToFigmaRgb } = require('add-plugin-figma');

License

MIT