A utility for selecting Figma nodes with Figma Tags and Attributes plugin.
npm install figma-node-selector-utilityThe "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')).
To install the package, run the following command in your terminal:
``sh`
npm install figma-node-selector-utility
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:
`javascript
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"]');
`
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.className[attr="value"]).
This project is licensed under the MIT License