Frame Each Selection

About this plugin

Frame Each Selection automates the tedious process of wrapping multiple elements in individual frames. With customizable padding and naming options, this plugin streamlines your workflow by eliminating repetitive tasks and maintaining design consistency. Perfect for UI designers working with component libraries, design systems, or any project requiring precise organization.

ㅤ

ㅤ

Features

1. Individual Framing: Frames each selected layer separately while maintaining their original positions
2. Customizable Padding: Add equal spacing around framed elements (0-100px)
3. Flexible Naming: Add custom prefixes and suffixes to frame names
4. Fill Options: Choose between no fill or custom color fills for frames
5. Smart Tooltips: Helpful hints throughout the interface

ㅤ

ㅤ

Basic Usage

1. Select Layers: Select one or more layers in your Figma canvas that you want to frame
2. Open Plugin: Go to Actions menu / Plugins and Widgets and select "Frame Each Selection"
3. Configure Settings: Adjust padding if needed; Add name prefix/suffix; Choose fill option.
4. Apply: Click the "Apply" button to create frames

ㅤ

ㅤ

Settings

ㅤ

Padding (px)

1. Sets the space around each framed element
2. Default: 0 (frame matches element dimensions exactly)
3. Range: 0-100 pixels
4. Example: Setting padding to 20 adds 20px of space on all sides

ㅤ

Name Prefix

1. Text added before the original element name
2. Optional field
3. Example: Adding "Frame-" transforms "Button" → "Frame-Button"

ㅤ

Name Suffix

1. Text added after the original element name
2. Optional field
3. Example: Adding "-Framed" transforms "Button" → "Button-Framed"

ㅤ

Frame Fill

Two options available:

ㅤ

1. No fill:

1. Creates transparent frames
2. Useful when you only need structural organization

ㅤ

2. Custom color:

1. Choose any solid color for frame backgrounds
2. Click the color swatch to open the color picker
3. Or enter a hex color code directly (e.g., #FFFFFF)
4. Default color is white (#FFFFFF)

ㅤ

ㅤ

For questions, feedback, or more design tools visit Samolevsky.com