1. 全选导出法设计师的直觉操作这个方法特别适合刚接触Figma的新手设计师不需要任何代码基础完全依靠界面操作就能完成。我第一次接手大型项目时设计稿里有上百个画板领导突然问这个模块总共有多少页面当时就是用这个方法3秒给出了答案。具体操作其实比想象中更简单在Figma文件中用快捷键CmdAWindows是CtrlA全选当前页面的所有元素然后看右下角的导出按钮。神奇的事情发生了——当你全选后导出按钮旁边会自动显示选中的画板数量。这个数字不仅包括可见画板连隐藏的画板也会被统计进去。不过这里有个小坑要注意如果画板被嵌套在组件或者Frame里这个方法可能会漏统计。我遇到过最头疼的情况是一个画板里套着另一个画板结果外层被统计了内层却被忽略。这时候就需要用到后面介绍的代码方法了。2. 开发者工具法前端工程师的最爱如果你稍微懂点JavaScript这个方法会让你爱不释手。Figma内置的开发者工具Developer Tools简直就是个宝藏不仅能统计画板还能做各种自动化操作。记得有次项目验收需要统计所有页面的画板总数我就是用这个方法10秒搞定。打开方式很简单顶部菜单选择Plugins Development Show/Hide Console或者直接用快捷键CmdOptionI。然后在Console面板粘贴这段代码let count 0; figma.root.children.forEach(page { page.children.forEach(node { if (node.type FRAME) count }) }) console.log(总画板数: ${count})这段代码会递归检查每个页面的每个节点只要是Frame类型就计数。相比全选导出法它的优势在于可以统计整个文件而不仅是当前页面能识别嵌套在任何深度的画板可以自由修改条件比如只统计特定命名规则的画板我在实际项目中最常用的变体是统计特定前缀的画板比如只计算Home_开头的画板数量let count 0; figma.root.children.forEach(page { page.children.forEach(node { if (node.type FRAME node.name.startsWith(Home_)) count }) })3. Scripter插件法设计师的编程入门对于不想碰开发者工具但又需要更灵活统计的设计师Scripter插件是绝佳选择。它就像给设计师准备的编程沙盒可以运行代码又不用面对可怕的Console界面。我们团队有个设计师就是用这个插件慢慢学会了基础编程。安装好Scripter插件后把下面的代码粘贴进去let total 0; figma.root.children.forEach(page { page.children.forEach(node { if (node.type FRAME node.name.includes(_v)) total }) }) figma.notify(当前版本画板数: ${total})点击运行按钮结果会以弹窗形式显示。我特别喜欢这个方法的几个点可以自定义通知内容比如加上统计时间运行结果更显眼适合在会议中演示代码可以保存复用不用每次都重写进阶技巧是结合页面筛选比如只统计迭代中页面的画板const activePages [首页改版, 新功能流程]; let count 0; activePages.forEach(pageName { const page figma.root.children.find(p p.name pageName); if (page) { page.children.forEach(node { if (node.type FRAME) count }) } }) figma.notify(迭代中画板总数: ${count});4. 高级应用场景与实战技巧在实际项目中单纯的画板计数往往不能满足需求。经过多个大型项目的实践我总结出几个特别实用的进阶用法。首先是版本对比统计。我们经常需要知道新版本增加了多少画板这时候可以这样操作const versionPrefix v2_; // 当前版本前缀 let currentCount 0; let previousCount 0; figma.root.children.forEach(page { page.children.forEach(node { if (node.type FRAME) { if (node.name.startsWith(versionPrefix)) { currentCount } else { previousCount } } }) }) figma.notify(新版画板: ${currentCount} | 旧版画板: ${previousCount});其次是按画板状态统计。我们团队使用✅表示已完成⏳表示进行中用这段代码可以快速掌握项目进度const statusCount { done: 0, progress: 0, todo: 0 }; figma.root.children.forEach(page { page.children.forEach(node { if (node.type FRAME) { if (node.name.includes(✅)) statusCount.done else if (node.name.includes(⏳)) statusCount.progress else statusCount.todo } }) }); figma.notify( 已完成: ${statusCount.done} 进行中: ${statusCount.progress} 待处理: ${statusCount.todo} );最后是自动化报告生成。对于需要定期汇报的项目这段代码可以直接生成Markdown格式的统计报告let report # 设计稿统计报告\n\n; let total 0; figma.root.children.forEach(page { let pageCount 0; page.children.forEach(node { if (node.type FRAME) pageCount }); report - ${page.name}: ${pageCount}个画板\n; total pageCount; }); report \n**总计**: ${total}个画板; figma.notify(report); console.log(report);这些方法在管理大型设计系统时特别有用比如我们最近的一个B端项目包含300画板通过这些自动化脚本每周进度汇报节省了至少2小时手工统计时间。