Figma Plugin: Renaming Layers 🎉

A Figma plugin that simplifies renaming layers and components by streamlining your refactoring process. While designing in Figma, clean up your layers by renaming duplicates and variations of a component within the same layer all at once! For example, rename all buttons within a parent component in one go while excluding nodes of different types such as text, spacers, and images.

figma_plugin_rename.mp4

Requirements

• Figma Desktop App
• TypeScript ^4.7.4
• React ^18.2.0
• Webpack ^5.74.0
• Prettier ^2.7.1

Set Up

Clone the repository

$ git clone https://github.com/debbieyuen/figma-plugin-renaming-layers.git

Install dependencies with npm.

$ npm install --save-dev @figma/plugin-typings
$ npm install figma-plugin-ds 

Run npm:build:watch to start webpack in watch mode. Or in VSCode Mac, shift command B and select npm:build:watch. Within the Figma app, open Figma -> Plugins -> Development -> Import plugin from manifest... and choose manifest.json file from this repo.

$ npm run build:watch 

Credits and References

• Figma API Overview
• Figma Plugin React