Figma 暂时没有原生的文档内搜索工具，拥有编辑权限的用户可通过插件实现搜索，但只读权限的用户则无计可施。 此工具支持只读权限的用户对设计稿进行文字搜索。

使用方法

1. 复制这个链接，添加到书签栏

javascript:(function()%7Bfetch("<https://raw.githubusercontent.com/draJiang/figma-reader-search/main/figma_search.js>").then((r) %3D> r.text().then((c) %3D> eval(c)))%7D)()

2. 点击此书签即可打开工具

使用场景

• 搜索设计系统
• 搜索修订记录
• 搜索动效需求
• 搜索埋点日志
• ……

已知问题

• 需要登录才能使用

学习笔记

• 通过下面这种格式，可以访问到仓库中的资源

  • https://raw.githubusercontent.com/draJiang/figma-reader-search/main/figma_search.js
  • 包括以下关键信息
    • 主域名：https://raw.githubusercontent.com
    • 用户名：draJiang
    • 项目名：figma-reader-search
    • 分支名：main
    • 文件名：figma_search.js

• 通过下面这种方式，可以远程加载 JavaScript 代码，例如在页面中插入新的元素

  • javascript:(function()%7Bfetch("https://raw.githubusercontent.com/draJiang/figma-reader-search/main/figma_search.js").then((r) %3D> r.text().then((c) %3D> eval(c)))%7D)()
  • 其中的链接就是前面提到的 github 资源地址

• 由于 JavaScript 不方便设置 CSS 伪类样式，所以可以通过下面这种方式给元素添加样式

  // 创建 style 节点
  let my_style = document.createElement("style");
  // 将 style 节点添加到 DOM 中
  windowEl.appendChild(my_style);
  // 添加样式
  my_style.innerHTML = `
  
      ::-webkit-scrollbar{
          width: 6px;
          padding:2px;
          background-color:var(--color-bg);
      }
  
      button:hover,a:hover {
        opacity:0.8;
      }
  
  `