Skip to content

maxmartynov/figma-plugin-frames-to-groups

Repository files navigation

Frames to Groups — Figma Plugin

⚠️ REPOSITORY STATUS: ARCHIVED
This repository is now archived as the plugin has moved to a premium model with a forever free trial. New updates and features will be released in a private repository, but the plugin will remain available on the Figma Community with a generous free trial for all users.

If you encounter any problems, please use the /issues link to create a ticket.

This is a Figma plugin that converts Frames to Groups, preserving their visual properties

How To Use

Select layers and run the command Convert Frames to Groups and all Frames inside the selected layers will be converted to Groups.

Features

  • Works recursively inside nested Frames
  • Preserves frame background colors and corner radii
  • Compatible with Lottie animations export
  • Includes Settings for fine-tuning behavior

Cases

  • If no layers are selected, then all frames on the page will be converted.
  • If you select a Frame, only the inner Frames will be converted, not the selected one.
  • If a component with the type Instance is selected, nothing will be changed inside it. To convert Frames inside an Instance component you should select the source component of this Instance.

Development

Installation

  1. Install dependencies

    npm install
  2. Get the Figma desktop app. At this time, plugin development and testing needs to be done using the Figma desktop app. This is because Figma needs to read your code saved as a local file.

  3. Log in to your account and open the file editor in the Figma desktop app.

  4. Go to Menu > Plugins > Development > New Plugin.... This will bring up the "Create a plugin" modal. Choose the manifest.json from this project.

Watch

Run the watcher that will transpile .ts files into .js files on change

npm run dev

Publishing

  1. Bump the app version

    npm run release -- <version>
    
    # example:
    npm run release -- patch
    # or (shortcut)
    npm run patch

    This command:

    • increments the version in the package.json
    • creates and pushes commit and tag to the repo (see the utils/release.sh file to see the tag template)
    • makes the new build with the bumped version
  2. Follow to the official guide Publish plugins to the Figma Community

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Credits

The idea initiator & artwork - Filippos Protogeridis

Support

Pricing Model: This plugin now uses a premium model with a forever free trial! All basic functionality remains accessible to everyone.

License

MIT

Contributors