【Code With SOLO】0经验小白3分钟用SOLO搭建Figma画板名称批量智能修改插件

用TRAE SOLO 开发设计了一个针对Figma的画板文件整理插件,主要功能是实现了智能批量修改Figma内的画板名称,给画板添加有规律的数字编号,让设计系统规范统一,项目交付时的文件整理命名标准化。

背景:
我一名普通UI设计师,0代码开发经验,除了日常框框框画图设计之外,还需要对每个项目的每个页面的画板名称手动添加唯一编号以进行页面的文件整理修改,以便在项目交付时效果图文件能够有规律的排列展示,需求方及团队其他成员协作查收时能够快速理解并知晓整个项目系统的逻辑和页面内容,在项目评审阶段验提出修改意见时告知页面编号即可快速找到相应的页面。

之前每个项目约有200-500张UI效果图,每个画板名称完全是手动修改,机械性的无脑劳动占据极大工作时间,这次运用SOLO开发的插件让我直接原地起飞:airplane_departure:

具体实践过程

任务拆解

  1. 本次任务拆解我认为是由大到小再到精,有任何大的想法/问题或者小的设计灵感都可以直接向SOLO提出,然后持续的进行优化,最后做成一个完美的作品。
  2. 我先是提出一个大的需求/想法或想要实现的功能目标,##”“设计并实现一个针对设计软件Figma内的源文件批量修改画板名称的脚本工具。工具能够从对Figma内的画板名称实现批量自动定义及修改,画板名称为:数字编号+页面路径名称,页面路径名称可以手动填写,但数字编号要求自动生成,实现之后批量导出的效果图文件,客户及需求方能够根据效果图的名称进行文件排序,更方便快捷的查看和验收设计效果图,理解整个系统的操作流程。需要给出整体架构设计、数据获取核心逻辑以及可视化方案。最终形成一个可以直接运行的命令行工具和一个演示插件。”“##
  3. SOLO完成后我就进行体验,查看具体的技术实现逻辑和最佳实践建议,有问题就抛出,然后一步步持续的优化升级进行功能迭代。初次使用后发现核心功能不够完善精细,缺失了部分实际使用场景,我对需求拆解进行了持续的细化,说明了具体的实际使用场景,让SOLO能够充分理解我的需求。

SOLO能力运用

  • 我是一名小白,初次使用,这次应该只用到了SOLO的工具脚本来进行插件编写,充分查看SOLO给予的最佳时实践建议和技术实践逻辑,最终完成了全流程开发任务。

关键 Prompt / 操作过程

  • 首先向SOLO提出了我的需求框架及目标设想:
    “设计并实现一个针对设计软件Figma内的源文件批量修改画板名称的脚本工具。工具能够从对Figma内的画板名称实现批量自动定义及修改,画板名称为:数字编号+页面路径名称,页面路径名称可以手动填写,但数字编号要求自动生成,实现之后批量导出的效果图文件,客户及需求方能够根据效果图的名称进行文件排序,更方便快捷的查看和验收设计效果图,理解整个系统的操作流程。需要给出整体架构设计、数据获取核心逻辑以及可视化方案。最终形成一个可以直接运行的命令行工具和一个演示插件。”

  • 对这个插件做些功能优化及UI升级,要求:
    “批量重命名只针对选中的画板,不是针对整个画布中的所有画板。
    批量重命名的名称规则为:不改变原先的名称,在原名称前面加入数字编号即可,具体数字编号的格式和位数可以由用户自定义,比如可以自定义为1.1-1、1.1-2、1.1-3这样的规律“。

  • 自定义的数字编号要按照画板顺序自动递增,用户只需给出第一个数字编号格式即可;如第一个画板名称是001-画板名称,第5个画板名称就是005-画板名称;如第一个画板名称是2.1-5-画板名称,第5个画板名称就是2.1-10-画板名称;

  • 由多部分数字组成的编号,用户会在中间用-进行分割,递增只在最后一部分的数字后面递增加1,比如第一个画板名称是:2.1-5画板名称,下一个就是2.1-6画板名称,这种数字编号就是由两部分组成;

  • 画板批量重命名规则需要改一下,总共分为两种场景:
    一、原画板名称为用户自定义的纯文本(无生成的前缀数字编号);
    二、画板名称为自动生成的数字编号前缀+用户自定义的纯文本;
    所以,为画板批量重命名只针对前缀数字编号的新增及修改。请给出我一个设计方案

  • 数字编号的递增顺序和规则为:所有选中画板在画布中的位置 从左至右 从上到下的顺序

  • 重命名完成后插件窗口不要自动关闭退出

  • 窗口宽度调小一点,高度调大一点,用户不需要滑动即可展示所有功能字段内容,整体更佳清晰直观一点。

  • 现在这个是1.0的版本 基本功能已完成,我怎样让其他用户也可以使用这个插件

  • 每次重命名的画板数量最大限制在99,超过限制后提示用户;

  • 状态提示语的交互样式修改:以弹层的形式从窗口上方弹出,背景颜色字号大小都不要改变,弹出3秒后消失

:laughing: :laughing: 至此~插件核心功能已经搭建开发设计完成,实际使用后体验优秀。

中间踩过什么坑

  • 整个Figma画板重命名插件开发实践过程其实还挺顺畅的,就是在前端UI布局的时候有些缺陷 让SOLO检查错误调整了好多次,这个阶段其实也没有什么坑 :rofl: :rofl: :rofl: :innocent: :innocent: :innocent:;后来我计划用SOLO做这个插件功能的XD版本,但是目前是失败的,可能是需要安装一些专业的开发环境,目前还在尝试推进中 :slightly_smiling_face: :slightly_smiling_face:

成果展示

:bullseye: 功能特点:

- 智能位置排序:按画板在画布中的位置从左到右、从上到下自动编号

- 自定义编号格式:支持灵活的编号格式(如 001-、2.1-5-、第001个)

- 保留原名称:只修改编号前缀,不影响原有画板名称

- 智能识别:自动识别已有编号的画板,进行替换而非重复添加

:wrench: 使用场景:

- 设计系统规范统一

- 批量导出设计稿前的准备

- 项目交付时的文件整理

- 团队协作中的命名标准化

:package: 核心功能:

1. 批量重命名选中的画板

2. 按位置自动排序编号

3. 支持多部分数字编号(如 1.1-5-)

4. 智能处理已有编号的画板

效果与总结

  • 之前修改一个系统 大概200个页面的画板名称大概需要2个小时,无脑机械劳动让人头皮发麻,这次整体提效成千上万倍确实是有的吧,只需要2秒一键即可帮我完成,可以让我把时间更多利用在对产品设计的钻研和打磨。

  • 作为一个零代码开发经验,零AI使用经验的小白来说,SOLO 帮助我完成了全流程的开发与实践运用,我只管提出需求想法与具体使用场景就好,尽管是这样一个看起来功能简单的小小插件,但对小白来说真的是很友好很强大了。

  • 我认为具体的可复用的方法应该就是需求描述、问题描述仅可能的详细。有任何的问题尽情抛出,遇到没灵感输出的时候可以多参考SOLO给出最佳实践建议。

:wink: :wink: 致谢所有 感恩幸福 继续努力 :blush: :blush:

海工牛 :+1:

1 个赞

快快快,点击上面 大家投我一票 :grinning_face_with_smiling_eyes: :grinning_face_with_smiling_eyes: :grinning_face_with_smiling_eyes: :grinning_face_with_smiling_eyes: 冲啊

1 个赞

1 个赞