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.ㅤㅤFeaturesIndividual Framing: Frames each selected layer separately while maintaining their original positionsCustomizable Padding: Add equal spacing around framed elements (0-100px)Flexible Naming: Add custom prefixes and suffixes to frame namesFill Options: Choose between no fill or custom color fills for framesSmart Tooltips: Helpful hints throughout the interfaceㅤㅤBasic UsageSelect Layers: Select one or more layers in your Figma canvas that you want to frameOpen Plugin: Go to Actions menu / Plugins and Widgets and select "Frame Each Selection"Configure Settings: Adjust padding if needed; Add name prefix/suffix; Choose fill option.Apply: Click the "Apply" button to create framesㅤㅤSettingsㅤPadding (px)Sets the space around each framed elementDefault: 0 (frame matches element dimensions exactly)Range: 0-100 pixelsExample: Setting padding to 20 adds 20px of space on all sidesㅤName PrefixText added before the original element nameOptional fieldExample: Adding "Frame-" transforms "Button" → "Frame-Button"ㅤName SuffixText added after the original element nameOptional fieldExample: Adding "-Framed" transforms "Button" → "Button-Framed"ㅤFrame FillTwo options available:ㅤ1. No fill:Creates transparent framesUseful when you only need structural organizationㅤ2. Custom color:Choose any solid color for frame backgroundsClick the color swatch to open the color pickerOr enter a hex color code directly (e.g., #FFFFFF)Default color is white (#FFFFFF)ㅤㅤNeed more design tools? Visit Samolevsky.com to discover more plugins and resources.ㅤㅤ