Copy Node IDs

About this plugin

Copy Node IDs - Figma Plugin

🎯 Overview

A 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 Features

1. Hierarchical Structure Output

Outputs 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 Control

1. All descendants: Captures all descendant elements completely (default)
2. Custom depth (1-10): Specify the desired hierarchy level
3. Level 1: Direct children only
4. Level 2: Including grandchildren
5. Level 3+: Deeper structures

3. Intelligent Selection Processing

When multiple layers are selected, automatically organizes overlapping parent-child relationships and outputs from optimal root nodes.

4. Following the official recommended method

As 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 Format

Single Node Selection

Multiple Node Selection

💡 Use Cases

1. AI-Driven Design with Figma MCP

1. Using the extracted JSON structure, create a new button component similar to nodeId: 123:457
2. Based on the Header Component hierarchy, generate a responsive mobile version
3. Duplicate the Navigation structure (nodeId: 123:458) and adapt it for a dark theme
4. Create variations of all text nodes within this component with different font sizes

2. Design System Analysis

1. Understand component structures
2. Verify nesting depth
3. Check naming convention consistency

3. Documentation Generation

1. Document component hierarchies
2. Visualize design complexity
3. Share structures across teams

🎨 Supported Node Types

1. FRAME - Frames, Artboards
2. GROUP - Groups
3. COMPONENT - Component definitions
4. INSTANCE - Component instances
5. TEXT - Text layers
6. RECTANGLE, ELLIPSE - Shapes
7. VECTOR - Vector paths
8. All other Figma node types

Using the Plugin

1. Select - Select target layers in Figma
2. Set Depth - Choose "All descendants" or "Custom depth"
3. Collect - Click "Collect Node IDs" button
4. Copy - Get JSON with "Copy to Clipboard"
5. Utilize - Use in AI tools, scripts, or documentation

🚦 Workflow

1. Select one or more layers in Figma
2. Run the plugin (Plugins → Development → Copy Node IDs)
3. Choose depth mode:
4. All descendants: Complete recursive tree (default)
5. Custom depth: Specify levels (1-10)
6. Click "Collect Node IDs"
7. Click "Copy to Clipboard" to get the JSON

🎯 Ideal Scenarios

1. AI-Driven Development: Integration with Claude MCP, ChatGPT, GitHub Copilot
2. Design Operations: Managing large-scale design systems
3. Quality Control: Checking structural consistency and naming conventions
4. Documentation: Automatic generation of technical specifications

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

https://github.com/te19oishi/copy-node-ids

📄 License

MIT

---

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.