Component repeater

About this plugin

# Component Repeater

A Figma plugin that helps you create components from repeated elements while preserving variations in styles, text, and images.

## What it does

This plugin analyzes your selection and creates a component that intelligently handles:

- Style variations (colors, effects, layout properties)

- Text content variations

- Image variations

When you have multiple similar elements that differ in styles or content, this plugin will:

1. Create a main component with variants for different styles

2. Create a separate component set for image variations

3. Replace all selected elements with instances of the component

4. Preserve the original text content and image placement

## How to use it

1. **Select similar elements**

- Select two or more groups or frames that have the same structure

- The plugin has a feature to help you find all similar elements from one selected node

- The elements can have different styles, text content, or images but should have the same layer structure

2. **Run the plugin**

- The plugin will analyze your selection and show variations in:

- Text content

- Colors and effects

- Images

- Layout properties

3. **Create the component**

- Click "Replace selection with a component"

- The plugin will create:

- A main component with style variants (if variations exist)

- A separate image component set (if images are used)

- Instances that preserve the original variations

4. **Finding similar elements**

- Select a single element

- Click "Find Similar Nodes" to select all elements with the same structure

- Use this to find more elements to include for replacement

## Tips

- The plugin works best with elements that have the same structure (same hierarchy of layers)

- Style variations are automatically detected and turned into variants

- Text content is preserved in each instance

- Images are turned into a swappable component

- Use the resize handle in the bottom right to adjust the plugin window size

## Requirements

- Works with groups and frames

- Selected elements must have the same layer structure

- Supports both direct images and image fills