Clean up your Figma files, instantly.

Rename Kit is a Figma plugin designed to enforce consistency and streamline your workflow. It automates tedious organization tasks, letting you focus on designing, not layer management.

See it in Action Learn to Configure

Powerful Automation for a Tidy Workspace

Rename Kit offers three core features to keep your design files tidy and consistent, saving you hours of manual work.

Text Layer Renaming

Automatically renames text layers to match your design system's naming convention based on their applied Text Style.

Default Frame Renaming

Scans your selection and renames default frames (e.g., "Frame 1") to a consistent name, `item`, for a clean and predictable structure.

Mismatched Color Detection

Intelligently identifies and selects text layers using a Color Style that doesn't align with the rules defined for its Text Style.

See it in Action

Click the 'Run Rename Kit' button to see how the plugin instantly organizes a messy design file. No installation needed.

Layers

Frame 1

Heading

Style: heading/h1

This is a subtitle.

Style: subtitle

Some important info.

Style: info, Color: colors/state/error

A regular body text layer.

Style: body

Mock Canvas Area

Easy to Configure

Rename Kit works out of the box, but you can easily modify its source code to enforce your team's specific design system standards.

The mapping between Text Style categories and new layer names is defined in the `categories` object. The plugin uses the first part of a style's name (e.g., "heading" from "heading/h1") as the key.

const categories = {
  "heading": "heading-text",
  "title": "title-text",
  "subtitle": "subtitle-text",
  "body": "body-text",
  // ...add or edit your own categories here
};

Define valid color paths and globally allowed "state" colors. This ensures that text using a `body` style, for example, is only using approved `body` colors, while still allowing it to use a global `error` color when needed.

const colorPaths = {
  regular: "colors/content/text/regular/",
  inverse: "colors/content/text/inverse/",
  brand: "colors/content/text/brand/"
};

const stateColors = new Set([
  "colors/state/info",
  "colors/state/success",
  "colors/state/warning",
  "colors/state/error",
  "colors/content/text/regular/disabled"
]);