AutoFrame

About this plugin

# AutoFrame - 智能图层框架管理工具

## 插件简介

AutoFrame是一款专为Figma设计师打造的高效工具，能够自动为选中图层创建Frame框架，并提供丰富的自定义选项和批量处理功能。无论是整理界面元素、创建组件还是准备导出资源，AutoFrame都能让您的工作流程更加顺畅。

## 核心功能

### 基础功能

- **智能套框** - 一键为选中图层套用Frame，保持原始位置和大小

- **外观定制** - 自定义填充颜色、描边、圆角和内边距

- **命名规则** - 灵活设置Frame命名方式，支持前缀、后缀或自定义格式

### 高级功能

- **自动布局** - 轻松添加自动布局，智能判断排列方向

- **响应式约束** - 自动设置子元素适应性，确保设计的灵活性

- **预设管理** - 保存常用设置，提高重复工作效率

### 批量处理

- **批量对齐** - 创建Frame后自动对齐（左对齐、居中、右对齐等）

- **均匀分布** - 水平或垂直方向均匀分布多个Frame

- **主Frame创建** - 自动创建外层Frame包含所有选中元素

- **样式复制粘贴** - 在多个Frame间快速复制视觉样式

### 专业工具

- **一键优化布局** - 智能分析并优化Frame内元素排列，自动应用网格对齐

- **创建响应式组件** - 自动生成小、中、大三种尺寸变体，设置适当的响应式约束

- **组件变体支持** - 可选择创建组件而非Frame，便于构建设计系统

## 使用场景

- **UI设计整理** - 快速整理和组织界面元素，使设计文件层次清晰

- **组件制作** - 高效创建组件库和设计系统所需的组件框架

- **设计稿准备** - 轻松为导出资源创建规范的Frame

- **响应式设计** - 快速制作适配不同屏幕尺寸的设计变体

- **团队协作** - 统一团队设计规范，保持文件结构一致性

## 使用方法

1. 选择需要处理的图层

2. 打开AutoFrame插件

3. 根据需要调整设置

4. 点击"套用Frame"按钮

5. 完成！您的图层已被整齐地包含在Frame中

## 为什么选择AutoFrame？

- **节省时间** - 减少手动创建和调整Frame的繁琐操作

- **提高一致性** - 确保设计文件结构和样式保持统一

- **增强灵活性** - 快速尝试不同的Frame样式和布局选项

- **简化工作流** - 将复杂的多步骤操作简化为一键完成

- **提升设计质量** - 创建更加结构化和专业的设计文件

---

AutoFrame - 让Figma设计更高效，更专业！



# AutoFrame – Intelligent Layer Framing Tool



## Plugin Overview



**AutoFrame** is a powerful tool designed specifically for Figma designers. It automatically wraps selected layers in frames and offers a wide range of customization options and batch processing features. Whether you're organizing UI elements, building components, or preparing assets for export, AutoFrame streamlines your workflow for maximum efficiency.



## Core Features



### Basic Functions



* **Smart Framing** – Automatically wrap selected layers with frames while preserving their original size and position

* **Appearance Customization** – Customize fill color, stroke, corner radius, and padding

* **Naming Rules** – Flexible frame naming options with prefixes, suffixes, or custom formats



### Advanced Features



* **Auto Layout** – Easily apply auto layout with intelligent direction detection

* **Responsive Constraints** – Automatically set constraints for child elements to ensure flexibility

* **Preset Management** – Save frequently used settings for quick reuse



### Batch Processing



* **Batch Alignment** – Automatically align frames (left, center, right, etc.) after creation

* **Even Distribution** – Evenly distribute multiple frames horizontally or vertically

* **Master Frame Creation** – Automatically create a parent frame containing all selected elements

* **Style Copy & Paste** – Quickly transfer visual styles between multiple frames



### Pro Tools



* **One-Click Layout Optimization** – Intelligently analyze and optimize element layout with grid alignment

* **Create Responsive Components** – Automatically generate small, medium, and large variants with proper constraints

* **Component Variant Support** – Option to create components instead of frames to support design system building



## Use Cases



* **UI Design Organization** – Quickly structure and organize UI elements for a clean design hierarchy

* **Component Creation** – Efficiently build component libraries and design system frameworks

* **Design Asset Preparation** – Easily generate standardized frames for asset export

* **Responsive Design** – Create adaptive variants for different screen sizes with ease

* **Team Collaboration** – Enforce consistent design standards and maintain organized files



## How to Use



1. Select the layers you want to process

2. Launch the AutoFrame plugin

3. Adjust settings as needed

4. Click the **"Apply Frame"** button

5. Done! Your layers are now neatly wrapped in frames



## Why Choose AutoFrame?



* **Save Time** – Eliminate repetitive manual framing tasks

* **Ensure Consistency** – Maintain consistent file structure and visual styles

* **Increase Flexibility** – Experiment with different frame styles and layouts quickly

* **Simplify Workflow** – Reduce multi-step operations to a single click

* **Boost Design Quality** – Create more professional and structured design files



---



**AutoFrame – Make Figma design faster and more professional!**