Pia!

About this plugin

Pia! 产品说明文档

1. 产品简介

Pia! 是一款专为 Figma 设计的高效图层处理插件。它能够智能识别选中的设计元素，将其一键合并为高质量的 PNG 位图，并自动应用规范化的命名。这款插件旨在解决设计交付、资源切图和设计系统维护中的繁琐手动操作，让设计资产的整理变得简单快捷。

2. 核心价值

- ⚡️ 提升效率：将繁琐的“复制-展平-重命名-替换”流程缩减为一次点击。

- 🧠 智能识别：自动分析图层内容（如图标、按钮、头像等），推荐合适的命名分类。

- 💎 像素完美：内置像素取整功能，确保导出的位图边缘清晰，位置精准。

- 🎨 保持原位：处理后的图层直接替换原图层位置，无需重新排版。

3. 主要功能特性

3.1 智能图层转 PNG (Smart Flatten to PNG)

- 多图层合并：支持选择多个分散的图层（Frame、Group、Vector、Text等），将它们合并为一个单一的 PNG 图片图层。

- 无损画质：并非简单的截图，而是基于 Figma 渲染引擎的高质量导出。

3.2 智能内容类型检测 (Smart Content Detection)

插件会自动分析选中图层的名称和类型，识别以下内容并在命名时提供智能建议：

- 图标 (Icon)：检测到 `icon`, `svg`, `vector` 等关键词。

- 按钮 (Button)：检测到 `btn`, `cta` 等关键词。

- 图片 (Image)：检测到 `img`, `photo` 等关键词或包含图片填充。

- 头像 (Avatar)：检测到 `avatar`, `user`, `profile` 等关键词。

- Logo、背景 (Background)、卡片 (Card) 等更多类型。

3.3 灵活的命名系统 (Dynamic Naming)

- 模板化命名：支持使用路径式命名模板（如 `icon/[name]`）。

- [name] 占位符：保留原图层名称，自动组合。例如原图层名为 `search`，模板为 `icon/[name]_2x`，结果将是 `icon/search_2x`。

- 自动建议：根据检测到的内容类型，自动预填合适的命名前缀。

3.4 高清导出与像素控制

- 多倍率支持：支持 1x, 2，3x 导出比例，满足不同屏幕密度需求（如 Retina 屏幕适配）。

- 像素取整 (Pixel Rounding)：可选开启，强制处理后的图层坐标 (X, Y) 和尺寸 (W, H) 为整数，避免出现 0.5px 的虚边问题。

4. 使用场景

- 设计交付 (Handoff)：在交付给开发前，将复杂的矢量图标或插图转为由代码易于引用的 PNG 资源。

- 性能优化：对于包含大量节点、阴影或模糊效果的复杂图形，转为位图可显著降低 Figma 文件的渲染压力。

- 设计系统整理：批量规范化图标和组件的命名，统一资源格式。

- 快速切图：无需使用传统的导出切片功能，直接在画布上生成各倍率的效果图进行预览或拼合。

5. 操作指南

1. 选择图层：在 Figma 画布中选中一个或多个需要处理的图层。

2. 启动插件：运行 "Smart Wrapper & Exporter"。

3. 确认设置：

- 插件会自动根据选区内容更新命名建议。

- 选择需要的导出倍率 (默认为 3x 以保证清晰度)。

- 确认是否开启“像素取整”。

- (可选) 修改命名模板。

4. 一键处理：点击“处理选中图层”按钮。

5. 完成：选中的图层将被一个新的 PNG 图层原位替换，旧图层会被移除。

6. 版本信息

- 当前版本: 1.0.0

- 适用平台: Figma Desktop / Web