Icon Match

About this plugin

Icon Match是一款基于本地特征引擎的 Figma 插件，专为 UI/UX 设计师打造。它能帮助您在庞大的图标库中，通过视觉相似度快速找到并替换图标，完美支持“以图搜图”和“草图匹配”。

核心功能

以图搜图：不再受限于关键词。选中一个图标（或自己画的草图），AI 会自动从库中找出视觉上最相似的图标。

智能模糊匹配：

忽略粗细：手绘的细线条草图也能搜到库里的标准粗线条图标。

忽略尺寸：用 24px 的小图标也能搜到 100px 的大图标。

忽略比例：稍微压扁或拉长的形状也能精准匹配。

镜像兼容：左右或上下方向反转的图标也能匹配。

多表征交叉比对：MobileNet 特征 + 感知哈希（含边缘哈希）+ 结构精排（前景分割/轮廓距离），降低漏检（描边/填充/反色/手绘更稳）。

极速本地索引：

一次索引，永久使用。

内置 MobileNet V3 特征模型，所有计算均在本地完成，无需联网，保护您的设计隐私。

索引仅保存紧凑特征与元信息，缩略图按需加载，避免大图库占用过多存储。

分步扫描策略：支持全库扫描，也支持选中特定 Frame 进行局部扫描。

智能增量更新：局部扫描的新图标会自动合并到现有库中，无需担心覆盖旧数据。

智能过滤：自动跳过尺寸过大（>512px）的非图标组件，防止内存溢出。

一键替换：点击搜索结果即可直接替换选中的图标，保留原位置和尺寸。

模型状态：标题旁的小圆点提示模型是否已启用（绿=启用，红=未启用）。

快速开始

建立索引 (Build Index)

首次使用时，插件需要“认识”您的图标库。

打开包含图标组件（Components）的 Figma 文件。

运行 Icon Match 插件。

选择扫描范围：

全库扫描：不选中任何图层，点击 “扫描当前组件库”。

局部扫描：选中包含图标的 Frame 或 Section，按钮会自动变为 “扫描选中区域”，点击即可只索引该区域。

首次运行会初始化本地特征引擎，请耐心等待。

查找与替换

索引建立完成后，您可以在任何设计文件中使用它：

选中画布上的任意一个图层（作为搜索目标）。

它可以是一个图标实例、一个矢量形状，甚至是您随手画的矩形或圆形草图。

插件面板会立即显示 “相似图标 (Similar Icons)” 列表。

点击 列表中的图标，即可将画布上的选中项替换为该图标。

或者直接把图标从插件里拖拽到画布上。

设置与技巧

匹配灵敏度 (Match Sensitivity)：

滑动底部的滑块来调整 AI 的“挑剔程度”。

向左滑（宽松）：能搜出更多形状大致相似的结果。

向右滑（严格）：只显示几乎一模一样的结果。

中/英文切换：点击标题栏右上角的语言按钮进行切换。

清空索引：如果需要重置，点击标题栏下方的“清空 (Clear)”按钮。

常见问题 (FAQ)

Q: 为什么我的图标搜不到？

A: 请确保您已经对包含该图标的文件进行了索引。如果是新画的图标，请选中它所在的 Frame 并点击“扫描选中区域”。

Q: 快捷键（如 Ctrl+Z）为什么失效了？

A: 当插件窗口处于激活状态时，它会拦截键盘指令。只需点击一下 Figma 画布空白处，快捷键即可恢复。我们也在插件中做了优化，每次替换操作后会自动交还焦点。

Q: 数据会上传到服务器吗？

A: 绝对不会。Icon Match 是纯本地插件，所有图像分析和索引数据都存储在您的本地浏览器缓存（Figma Client Storage）中。

Icon Match is a Figma plugin powered by a local feature engine, designed for UI/UX designers. It helps you quickly find and replace icons from a vast library using visual similarity, fully supporting "search by image" and "sketch matching".

Core Features

Search by Image: No longer limited by keywords. Select an icon (or your own sketch), and the AI will automatically find the most visually similar icons from the library.

Intelligent Fuzzy Matching:

Ignores Stroke Weight: Hand-drawn thin-line sketches can still find standard thick-line icons in the library.

Ignores Size: A small 24px icon can find larger 100px icons.

Ignores Proportion: Slightly squashed or stretched shapes can still be matched accurately.

Mirror Compatible: Icons that are flipped horizontally or vertically can also be matched.

Multi-Representation Cross-Comparison: Combines MobileNet features + Perceptual Hashing (including edge hash) + Structural Refinement (foreground segmentation/contour distance) to reduce missed matches (more stable for strokes/fills/inverted colors/hand-drawn sketches).

Ultra-Fast Local Indexing:

Index once, use forever.

Built-in MobileNet V3 feature model. All computations are performed locally, no internet required, protecting your design privacy.

The index only stores compact features and metadata. Thumbnails are loaded on demand, preventing large icon libraries from consuming excessive storage.

Stepwise Scanning Strategy: Supports scanning the entire library or selecting a specific Frame for a partial scan.

Smart Incremental Updates: New icons from partial scans are automatically merged into the existing library without overwriting old data.

Smart Filtering: Automatically skips non-icon components that are too large (>512px) to prevent memory overflow.

One-Click Replace: Click a search result to directly replace the selected icon, preserving its original position and size.

Model Status: A small dot next to the title indicates if the model is active (Green = Active, Red = Inactive).

Quick Start

1. Build Index

The plugin needs to "learn" your icon library on first use.

Open a Figma file containing icon Components.

Run the Icon Match plugin.

Select Scan Range:

Full Library Scan: Do not select any layers, click "Scan Current Component Library".

Partial Scan: Select a Frame or Section containing icons. The button will automatically change to "Scan Selected Area". Click to index only that area.

The first run initializes the local feature engine. Please be patient.

2. Find & Replace

Once the index is built, you can use it in any design file:

Select any layer on the canvas (as the search target).

This can be an icon instance, a vector shape, or even a simple rectangle/circle sketch you drew.

The plugin panel will immediately show the "Similar Icons" list.

Click an icon in the list to replace the selected item on the canvas with it.

Alternatively, drag and drop the icon directly from the plugin onto the canvas.

Settings & Tips

Match Sensitivity:

Use the slider at the bottom to adjust how "picky" the AI is.

Slide Left (Loose): Returns more results that are roughly similar in shape.

Slide Right (Strict): Only shows results that are almost identical.

Language Switch: Click the language button in the top-right corner of the title bar to switch between Chinese and English.

Clear Index: If you need to reset, click the "Clear" button below the title bar.

FAQ

Q: Why can't I find my icon?

A: Make sure you have indexed the file containing that icon. If it's a newly drawn icon, select the Frame it's in and click "Scan Selected Area".

Q: Why do shortcuts (like Ctrl+Z/Cmd+Z) stop working?

A: When the plugin window is active, it intercepts keyboard commands. Simply click on a blank area of the Figma canvas, and shortcuts will work again. We have also optimized the plugin to automatically return focus after each replace operation.

Q: Is my data uploaded to a server?

A: Absolutely not. Icon Match is a purely local plugin. All image analysis and index data are stored in your local browser cache (Figma Client Storage).

Icon Match - v1.4.2 • by Lorin