Frame Each Selection

Figma Plugin

ㅤ

Description

Frame Each Selection is a Figma plugin that creates individual frames around each selected layer, making it easy to organize and structure your designs.

ㅤ

Features

Individual Framing: Frames each selected layer separately while maintaining their original positions
Customizable Padding: Add equal spacing around framed elements (0-100px)
Flexible Naming: Add custom prefixes and suffixes to frame names
Fill Options: Choose between no fill or custom color fills for frames

ㅤㅤ

Basic Usage

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

ㅤㅤ

Adjust Settings

ㅤ

➊ Padding

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

ㅤ

➋ Frame Naming

The plugin offers two naming strategies for your frames:

Use the original element's name as the base
Or add a custom name, prefix and/or suffix

ㅤ

➌ Name Prefix

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

ㅤ

➍ Name Suffix

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

ㅤ

➎ Frame Fill

Two options available:

No fill

Creates transparent frames
Useful when you only need structural organization

Custom color

Choose any solid color for frame backgrounds

ㅤ

➏ Select Fill Color

Click the color swatch to open the color picker
Or enter a hex color code directly (e.g., #FFFFFF)
Default color is white (#FFFFFF)

ㅤ

Use Cases

Component Organization: Frame individual components for better structure
Export Preparation: Add padding around elements before exporting
Layout Management: Quickly organize multiple elements with consistent spacing
Design Systems: Batch frame elements with standardized naming conventions

ㅤ

Tips

Select multiple layers at once to frame them all in one action
Use consistent naming conventions (prefix/suffix) for better organization
Set padding to 0 when you need frames that exactly match element dimensions
Use custom fill colors to visually group related frames

ㅤ

#Optimize

Next

Frame Each Selection

Version: 1.0.5

Updated: October 22, 2025

Try Frame Each Selection

1.0.0 – Initial release.
1.0.1 – Custom Color Fills: Choose any color for your frame backgrounds with an integrated color picker
1.0.2 – No Fill Option: Create transparent frames for purely structural organization
1.0.3 – Dual Naming Modes: Switch between two naming strategies:
1. Use Selected Item Name: Maintains original behavior with prefix/suffix options.
2. Set Custom Name: Apply a consistent custom name to all frames
1.0.4 – Introduced helpful tooltips for improved usability.
1.0.5 – Refined and modernized the user interface for a cleaner, more intuitive experience.
1.0.6 – Introduced automatic dark mode adaptation: the plugin UI now switches to a dark color theme when Figma’s interface is set to dark mode.
1.0.7 – Now when users focus on the padding field, they can: Press Up/Down arrow keys to increment/decrement by 1; Press Shift + Up/Down arrow keys to increment/decrement by 10.
1.0.8 – Added the "Clip Content" checkbox feature.
1.0.9 – Users will now have their preferences remembered between sessions.
1.1.0 – Restructured the plugin dialog window with collapsible sections. Organized content into 3 logical sections: Frame Dimensions, Frame Naming, and Frame Styling
1.1.1 – Users can now enter negative values. Enter negative padding values to crop objects with the frame. Enter positive padding values to add space around objects.
1.1.2 – Frame Stroke Controls: Toggle frame stroke on/off with a convenient switch. Customize stroke color, alignment and thickness. Added reset buttons for both fill and stroke colors.
1.1.2.1 – Bug Fix: Fixed critical bug preventing frame creation. The plugin now correctly applies fill and stroke settings when framing selected elements.
Supported Versions:
- Compatible with Adobe Illustrator CS6 and later, including Adobe Illustrator CC versions.
Operating Systems:
- Works on both macOS and Windows platforms.
End User License Agreement (EULA)
Last Updated: 21.12.2024
ㅤ
This End User License Agreement (“Agreement”) is a legal agreement between you (“User” or “Licensee”) and Samolevsky.com (“Licensor”) regarding the use of the Adobe Illustrator scripts (“Software”). By downloading, installing, or using the Software, you agree to be bound by the terms of this Agreement.
ㅤ
1. Grant of License
Licensor grants the User a non-exclusive, non-transferable, and revocable license to use the Software in accordance with this Agreement.
- Free Software: If the Software is provided for free, you may use it for personal or commercial purposes without payment, subject to the restrictions outlined in this Agreement.
- Paid Software: If the Software is provided for a fee, you may use it only after payment has been made in full.
ㅤ
2. Usage Rights
You are permitted to:
- Install and use the Software on devices you own or control.
- Use the Software in your personal or commercial projects, subject to compliance with this Agreement.
ㅤ
3. Restrictions
You may NOT:
- Reverse engineer, decompile, or otherwise attempt to discover the source code, underlying ideas, or algorithms of the Software.
- Reuse, incorporate, or integrate any portion of the Software into any other software, product, or project, except as expressly permitted by the Licensor in writing.
- Resell, redistribute, or share the Software, whether in its original or modified form, without prior written consent from the Licensor.
- Claim ownership of the Software or its underlying code.
- Use the Software in any way that violates applicable laws or regulations.
ㅤ
4. Ownership
The Software and all intellectual property rights therein remain the exclusive property of the Licensor. This Agreement does not transfer ownership of the Software or any intellectual property rights to the User.
ㅤ
5. Disclaimer of Warranties
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE LICENSOR BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
ㅤ
6. Limitation of Liability
To the maximum extent permitted by law, Licensor shall not be liable for any damages, including but not limited to direct, indirect, incidental, special, or consequential damages, arising out of or related to the use or inability to use the Software.
ㅤ
7. Termination
This Agreement is effective until terminated. Licensor may terminate this Agreement immediately if you breach any term of this Agreement. Upon termination, you must cease all use of the Software and destroy any copies in your possession.
ㅤ
8. Updates and Support
Licensor is not obligated to provide updates, support, or maintenance for the Software. However, updates may be provided at the sole discretion of the Licensor.
ㅤ
9. Governing Law
This Agreement shall be governed by and construed in accordance with the laws of the State of New York, without regard to its conflict of law principles.
ㅤ
10. Entire Agreement
This Agreement constitutes the entire agreement between you and the Licensor concerning the Software and supersedes all prior or contemporaneous understandings regarding such subject matter.
By using the Software, you acknowledge that you have read this Agreement, understand it, and agree to be bound by its terms.
ㅤ
For any questions or concerns regarding this Agreement, please contact us at hello@samolevsky.com

Required Software

Figma

Learn more

Figma is a cloud-based design and prototyping tool primarily used for user interface and user experience design. It allows designers, developers, and other stakeholders to collaborate in real-time on projects.

Browse More Plugins

More Figma Plugins

Explore Stroke Width Randomizer

Stroke Width Randomizer

A powerful Figma plugin that applies random stroke widths to selected objects within a customizable range.

Explore
Explore Stroke Scaler

Stroke Scaler

A Figma plugin that allows you to scale and adjust stroke weights on selected objects with real-time preview.

Explore
Explore Select by Name

Select by Name

Select by Name is a powerful Figma plugin that allows you to quickly find, filter, and select design elements by their names across your Figma documents.

Explore

Got questions?

Need help or have an idea to share? We’d love to hear from you! Whether you have questions, found a bug, have a feature request, or just want to share your feedback, reach out to us—we’re here for you!

Ask a Qestion