Figma-node-selector-utility NPM

figma-node-selector-utility (use with "Tags & Attributes" figma plugin)

The "figma-node-selector-utility" package offers a straightforward interface to select and manipulate Figma nodes through an intuitive syntax. This package is designed to be used in conjunction with the "Tags & Attributes" plugin.

Utilizing custom tags and attributes stored within figmaSharedPluginData by the "Tags & Attributes" plugin, this module facilitates an easy way to select and retrieve nodes, thus simplifying node manipulation.

Once you have applied tags to your Figma file, you can query and select nodes using the simple syntax e.g., ($F('tagName'), $F('.classname'), $F('#id')).

Installation

To install the package, run the following command in your terminal:

npm install figma-node-selector-utility

Usage

First, ensure, your design elements applied data via the "Tags & Attributes" plugin Secound, ensure your have permission to access the figmaSharedPluginData.

Then, you can use the package as follows:

import { $F } from 'figma-node-selector-utility';

// Select nodes by tag name
const textNodes = $F('tagName');

// Select nodes by class name
const buttons = $F('.button');

// Select nodes by ID
const primaryButton = $F('#primaryButton');

// Select nodes by attributes
const tableIndex = $F('[tabindex="1"]');

// Select nodes by group
const classWithAttrubute = $F('div.className[attr="value"]');

API Reference

`$F(selectorString)`

Selects nodes based on the provided selector string. The string can be formatted to select by class name (.className), tag name (tagName), or ID (#id).

Attribute Selectors: It can select nodes based on attributes (e.g., attr="value").

Group Selectors: It can handle group selectors separated by commas (e.g., div, .class, attr="value").

Combined Selectors: It allows for combined selectors, including class names, IDs, tag names, and attributes in a single string (e.g., div.classNameattr="value").