Figma Bulk Component Renamer

WHAT IT DOES

Figma Bulk Component Renamer solves a common design system challenge: renaming multiple Figma components is tedious when done one at a time. While Figma allows individual component renaming, there is no native way to apply a consistent naming pattern to many components simultaneously. This tool reads your current Figma design file, detects all visible components in the assets panel or layer list, and displays them in a scrollable checklist with component names, types (component/instance), and parent frame names. You select the components you want to rename, define a rename pattern using placeholders like {original}, {counter}, {type}, {parent}, and {random}, and click "Apply Rename." A live preview shows the old vs. new names before you confirm. The tool then processes each selected component sequentially, updating the component names. You can filter components by type and export a report of all component data as CSV or JSON.

WHERE IT RUNS

This extension panel runs directly inside your browser as an overlay on any open Figma design file. It works on the main editing interface, assets panel, and layer list views. The tool detects components from the page's DOM and uses DOM manipulation to update component names. It requires no additional API keys or permissions beyond the BotGentz extension.

HOW TO USE

After installing the BotGentz extension and activating Figma Bulk Component Renamer, open any Figma design file with components. Click the extension icon in your browser toolbar to open the panel. The tool automatically detects all components displayed in the current file. Each component appears with its name, type (Component or Instance), and parent frame alongside a checkbox. Use the "Select All" toggle or individually check components. Next, enter a rename pattern in the text field. For example, "comp_{type}_{counter}" adds a prefix with the component type and a counter, "{parent}/{original}" organizes by parent frame, and "{date}_{random}" adds a date and random string. The preview section shows a side-by-side comparison of original and new names for your selected components. Adjust the starting counter value if your pattern uses {counter}. Finally, click "Apply Rename." The tool processes each component with a 500ms delay, showing progress as each component is renamed. A notification appears when all components have been processed.

TECHNICAL OPERATION — Pattern-Based Component Renaming with DOM Manipulation

This tool uses DOM manipulation to rename components in Figma. It first scans the page for component elements using selectors like `[data-component-id]`, `.component-item`, and `.layer-item`, extracting component names, types, and parent frame names. The pattern engine supports multiple placeholders: {original} for the original name, {type} for the component type (component/instance), {parent} for the parent frame name (sanitized), {counter} for an incrementing number, {random} for a random 6-character string, and {date} for the current date in YYYY-MM-DD format. The tool generates the new name by replacing placeholders with their corresponding values. For each selected component, the tool locates the name element (contenteditable div or input), sets the new name using textContent or value, and triggers input and change events to ensure Figma registers the change. A 500ms delay between updates prevents UI congestion and ensures each operation completes.

THE PANEL

The extension panel is fully draggable and remembers its position per site session. It snaps to the nearest edge of the browser viewport when dragged within 50 pixels of any side. You can collapse the panel to a compact title bar using the minimize button, preserving your selection state. The panel resizes vertically by dragging the bottom edge. Press the Escape key to close the panel instantly without losing your component selection. The preview updates in real-time as you modify the pattern.

PLEASE NOTE

This tool requires the free BotGentz extension to function. The script operates by directly modifying DOM elements in Figma's interface and does not use Figma's official API. It only sees components that are currently rendered in the page's DOM. For best results, ensure the assets panel or layer list is visible and expanded. Figma's UI structure may change over time, which could affect component detection and renaming flows; we monitor and release compatibility updates as needed. The tool does not store, transmit, or log any component data, names, or user activity. All operations occur locally in your browser session. Renaming components affects your Figma file directly — review the preview carefully before confirming. Export formats include CSV and JSON for maximum compatibility with analysis tools.