Copy Node IDs

About this plugin

Copy Node IDs - Figma Plugin🎯 OverviewA Figma plugin that extracts node information from selected layers in AI-friendly hierarchical JSON format. Optimized for design system analysis, automation tool development, and integration with AI tools (Claude, Cursor, etc.).🚀 Key Features1. Hierarchical Structure OutputOutputs selected nodes in a clear parent-child tree structure. Instead of flat arrays, the nested structure enables AI to accurately understand design hierarchies.2. Flexible Depth ControlAll descendants: Captures all descendant elements completely (default)Custom depth (1-10): Specify the desired hierarchy levelLevel 1: Direct children onlyLevel 2: Including grandchildrenLevel 3+: Deeper structures3. Intelligent Selection ProcessingWhen multiple layers are selected, automatically organizes overlapping parent-child relationships and outputs from optimal root nodes.4. Following the official recommended methodAs described below, the more it is divided, the better the accuracy becomes.https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server#h_01K25F7RCDRH0C6M004GG3KMB7📊 Output FormatSingle Node Selection{"nodeId": "123:456","name": "Header Component","type": "FRAME","absolutePath": "Page 1 / Main Section / Header Component","children": [{"nodeId": "123:457","name": "Logo","type": "INSTANCE","absolutePath": "Page 1 / Main Section / Header Component / Logo","children": []},{"nodeId": "123:458","name": "Navigation","type": "FRAME","absolutePath": "Page 1 / Main Section / Header Component / Navigation","children": [{"nodeId": "123:459","name": "Menu Item","type": "TEXT","absolutePath": "Page 1 / Main Section / Header Component / Navigation / Menu Item","children": []}]}]}Multiple Node Selection{"selections": [{"nodeId": "123:456","name": "Component A","type": "FRAME","absolutePath": "Page 1 / Component A","children": [...]},{"nodeId": "789:012","name": "Component B","type": "FRAME","absolutePath": "Page 1 / Component B","children": [...]}],"totalNodes": 25,"maxDepth": 4}💡 Use Cases1. AI-Driven Design with Figma MCPUsing the extracted JSON structure, create a new button component similar to nodeId: 123:457Based on the Header Component hierarchy, generate a responsive mobile versionDuplicate the Navigation structure (nodeId: 123:458) and adapt it for a dark themeCreate variations of all text nodes within this component with different font sizes2. Design System AnalysisUnderstand component structuresVerify nesting depthCheck naming convention consistency3. Documentation GenerationDocument component hierarchiesVisualize design complexityShare structures across teams🎨 Supported Node TypesFRAME - Frames, ArtboardsGROUP - GroupsCOMPONENT - Component definitionsINSTANCE - Component instancesTEXT - Text layersRECTANGLE, ELLIPSE - ShapesVECTOR - Vector pathsAll other Figma node typesUsing the PluginSelect - Select target layers in FigmaSet Depth - Choose "All descendants" or "Custom depth"Collect - Click "Collect Node IDs" buttonCopy - Get JSON with "Copy to Clipboard"Utilize - Use in AI tools, scripts, or documentation🚦 WorkflowSelect one or more layers in FigmaRun the plugin (Plugins → Development → Copy Node IDs)Choose depth mode:All descendants: Complete recursive tree (default)Custom depth: Specify levels (1-10)Click "Collect Node IDs"Click "Copy to Clipboard" to get the JSON🎯 Ideal ScenariosAI-Driven Development: Integration with Claude MCP, ChatGPT, GitHub CopilotDesign Operations: Managing large-scale design systemsQuality Control: Checking structural consistency and naming conventionsDocumentation: Automatic generation of technical specifications🤝 ContributingContributions are welcome! Please feel free to submit a Pull Request.https://github.com/te19oishi/copy-node-ids📄 LicenseMIT---Copy Node IDs is a powerful tool that bridges design and development. Especially when combined with AI tools, it enables automation and efficiency in design workflows.