Figma 插件开发与运营笔记 🏄‍♂️

tags
Design
Tool
Works
date
May 2, 2022
近期开发了一个 Figma 字符搜索、替换插件,截止目前已有 4.2K 安装量(2022-05-02)以下整理了开发、运营过程中的问题与经验。

开发笔记

需求挖掘

插件用户量较少,得到的反馈也较少,此时可以通过热门竞品的评论区了解用户的述求以挖掘插件的更多可能性。
例如通过竞品评论区发现用户对于在整个文档中进行搜索、替换的呼声较高,而竞品均只支持在选中页面进行搜索(应该是出于性能考虑),于是我很快就着手开发了对应功能,性能方面由于交互逻辑和实现方式与竞品不同(竞品使用的是文本框值变化事件,会频繁的执行搜索操作导致用户界面卡死,而我做的插件只有在点击 Find 按钮后才会执行搜索)所以没有遇到问题。

交互设计

将部分交互转移给主界面

插件依托在 Figma 的主界面中,可以将部分功能转移给主界面,以减少原子交互,降低插件的复杂度,提升易用性。
例如插件对于设置搜索范围的操作,通过 Figna 主界面是否选中图层进行设置(选中图层则在选中范围内搜索,否则搜索整个页面),没有增加额外的设置项/功能。
notion image

理清主次场景

从用户反馈和实际体验中发现,插件在大型文档中搜索、替换的耗时较长,非常影响用户体验
notion image
首先插件的性能无论如何优化,用户的文档复杂度始终是开发者无法控制的,所以优化加载体验是必须进行的。
通过改写搜索逻辑(异步不阻塞)避免了加载过程中界面「卡死」的问题。
在加载体验的选择上没有使用进度条,而是使用普通的 Loading (用户不可预估剩余耗时)形式,因为大型文档毕竟较少(例如设计组件库)日常大家更多在编辑常规的设计稿,属于次要场景,所以在反馈形式的选择上,优先考虑主要场景——中小型文档;在主要场景中使用轻量的 Loading 即可满足需求,同时也不会增加产品的复杂度和开发成本。
notion image
另外在搜索的逻辑上,过于考虑细节,造成大量的性能消耗用在了细枝末节的次要需求上。例如为了搜索隐藏的图层而大大增加了整体搜索的耗时;在认清主次需求关系后,放弃了搜索隐藏图层的需求,使得最终搜索的耗时降低至原来的 40%(技术细节可参考官方文档)。

UI 设计

可以获取非官方的开发组件或 Figma 官方的设计规范快速搭建符合 Figma 规范的 UI

开发

Figma 插件的官方文档已经足够详尽,大多数问题都可以通过阅读文档解决。

测试

插件在 Figma 中完成设计,最终也在 Figma 中运行,所以在测试上也通过 Figma 搭建测试模板,走查容易出现的问题。
notion image
基于插件的几个核心功能设计测试用例,并在 Figma 中创建用于测试的图层,逐一验证功能表现是否正常;此外还在以一个页面中放置了大量图层用以测试在极端环境下的性能。

运营思路

Figma 全站的插件新增量与星期的关系
notion image
每周二、三推送更新较为合适,因为最近更新的插件可以获得更多的曝光,加上又是用户安装的活跃期,在此时推送更新可以获得更多的安装量。

© jiangzilong 2024