Figma Utils

A collection of utility functions for Figma plugin development.

Recipes

Node to JSON (recipes/nodeToJson.ts)

Converts Figma nodes to JSON data without using the REST API. Useful for plugin development when you need to work with node data directly.

const nodeData = await nodeToJson("node-id-here");

Style Utils (recipes/styleUtils.ts)

Utilities for working with Figma styles (paint, text, effect, and grid styles).

// Get all paint styles
const paintStyles = getStylesByType("PAINT");

// Create a style from a node
const style = createStyleFromNode(node, "My Style", "PAINT");

// Apply a style to a node
applyStyle(node, style);

Layout Utils (recipes/layoutUtils.ts)

Utilities for working with Figma layout and constraints.

// Resize a node to fit its children
resizeToFit(frame);

Matrix Utils (recipes/matrixUtils.ts)

Utilities for matrix transformations in Figma.

// Create a matrix transform
const matrix = new MatrixTransform();

// Apply transformations
matrix.rotate(45).scale(2, 2).translate(100, 100).applyToNode(node);

// Or use the helper function
transformNode(node, {
  rotation: 45,
  scale: { x: 2, y: 2 },
  translation: { x: 100, y: 100 },
});

Prototype Utils (recipes/prototypeUtils.ts)

Utilities for working with Figma prototypes and interactions.

// Create a connection between nodes
createConnection(fromNode, toNode, {
  type: "ON_CLICK",
  transition: {
    type: "SMART_ANIMATE",
    duration: 0.3,
  },
});

// Create a flow of connections
createFlow([node1, node2, node3], {
  type: "ON_CLICK",
  transition: {
    type: "DISSOLVE",
  },
});

// Create a back button
createBackButton(node, {
  transition: {
    type: "SLIDE_OUT",
  },
});

Image Utils (recipes/imageUtils.ts)

Utilities for working with images and assets in Figma.

// Create an image fill
const imageFill = await createImageFill("https://example.com/image.jpg");

// Create a rectangle with an image
const imageRect = await createImageRectangle("https://example.com/image.jpg", {
  width: 200,
  height: 200,
  cornerRadius: 8,
});

// Replace an image in a node
await replaceImage(node, "https://example.com/new-image.jpg", {
  scaleMode: "FIT",
});

// Create a grid of images
const imageGrid = await createImageGrid(urls, {
  columns: 3,
  width: 200,
  height: 200,
  gap: 16,
  padding: 24,
});

Contributing

If you find this repository useful, please consider giving it a star! ⭐️

Contributions are welcome! Feel free to submit pull requests with new features, improvements, or bug fixes. I'll test all changes and merge them if they work well.

To contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

I'll review all PRs and merge them if they work as expected. Let's make this collection of utilities even better together! 🚀