Figma 搜索工具 🔍

Figma 搜索工具 🔍

tags

Design

Tool

date

Sep 18, 2022

notion image

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

使用方法

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

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)()

notion image

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;
    }

`

© jiangzilong 2024