快速批量替换字体-FontFlip

About this plugin

还在逐个图层手动修改字体吗？这款插件能智能扫描当前页面或你框选的特定画板，将所有正被使用的字体按“家族 (Family)”和“字重 (Style)”清晰分组。拥有媲美 Figma 原生级的交互体验，只需几次点击，即可实现全局字体的精确替换。无论你是要更新整个设计系统，还是翻新旧项目，它都能为你节省数小时的繁琐排版时间。更新概述：FontFlip 在原有“批量替换字体”功能基础上，新增了字体快速选择与多条件精确选择功能。现在不仅可以批量替换字体，还可以根据字体、字号、行高、字距、颜色和对齐方式等条件，快速找到并选中符合要求的文本图层。### 新增功能#### 1. 快速选择相同字体扫描页面后，每个字体样式旁新增“选中”按钮。- 按“字体家族 + 字体样式”匹配文本图层。- 支持在当前页面或扫描时选中的画板、图层范围内查找。- 混合字体文本中只要存在匹配片段，就会选中整个文本图层。- 连续选择不同字体时，仍然使用最近一次扫描范围，不会因画布选区改变而缩小范围。#### 2. 精确选择标签页插件主界面现分为两个功能标签：- 字体替换- 精确选择“精确选择”支持以下匹配条件：- 字体家族- 字体样式- 字号- 行高- 字距- 文字颜色- 水平对齐- 垂直对齐#### 3. 从画布读取参考样式在 Figma 画布中选择一个文本图层或一段文字，然后点击“读取当前文本”，插件会读取可用的文字属性并显示在参考样式卡片中。- 单一样式属性可以直接作为匹配条件。- 如果参考范围包含混合样式，存在不同值的条件会自动禁用。- 对齐方式作为整个文本图层的属性进行匹配。#### 4. 快速进入精确选择字体替换列表中的每个字体样式旁新增“精确”按钮。点击后会自动进入“精确选择”标签页，并带入当前字体家族和字体样式。#### 5. 匹配范围控制精确选择支持两种范围：- 当前页面：查找当前 Figma 页面中的全部文本图层。- 当前选择范围：查找当前选中图层或画板中的文本图层。插件会缓存本次匹配范围。执行选择后继续调整条件，不会因为画布选区已经变化而意外缩小查找范围。### 使用方法#### 快速选择字体1. 在 Figma 中运行 FontFlip。2. 根据需要选中画板或图层；不选择时默认扫描当前页面。3. 点击“重新扫描图层”。4. 找到需要的字体家族和字体样式。5. 点击“选中”，即可批量选择匹配的文本图层。#### 精确选择文字样式1. 打开“精确选择”标签页。2. 在 Figma 画布中选择一个参考文本图层或一段文字。3. 点击“读取当前文本”。4. 勾选需要参与匹配的条件。5. 选择“当前页面”或“当前选择范围”。6. 点击“查找匹配”，查看匹配数量。7. 点击“选中匹配图层”，完成批量选择。### 匹配规则- 字体家族和字体样式使用 Figma 的字体名称进行精确匹配。- 字号、行高和字距会同时比较数值与单位。- `Auto` 行高只会与 `Auto` 行高匹配。- 像素和百分比单位不会互相换算。- 多个文字条件必须在同一个连续文字片段中同时满足。- 水平和垂直对齐按整个文本图层匹配。- 匹配成功后选择的是整个文本图层，而不是文本图层中的局部字符。### 颜色匹配说明当前版本支持单一纯色文字填充的颜色匹配，并包含透明度判断。以下颜色类型暂不支持精确匹配，对应条件会自动禁用：- 渐变填充- 多重填充- 图片或其他非纯色填充- 绑定 Figma 颜色变量的文字填充### 稳定性与性能优化- 混合字体扫描改为使用连续样式片段，不再逐字符扫描。- 字体使用次数统一按文本图层数量统计。- 扫描、匹配和选择分别缓存作用范围，避免选区变化造成错误结果。- 切换 Figma 页面后，旧页面的选择缓存不会继续使用。- 选择前会重新检查节点当前样式，避免选中已经修改或替换过字体的图层。- 小尺寸插件窗口支持自动换行和单列条件布局。### 验证情况本次更新已完成以下检查：- Webpack 生产构建- TypeScript 类型检查- UI JavaScript 语法检查- 中英文界面文案检查- 重复元素 ID 检查- 字体快速选择模拟测试- 多条件精确匹配模拟测试- 混合样式参考与匹配测试- 页面切换和缓存失效测试---## English### OverviewFontFlip now includes quick font selection and multi-condition precise selection in addition to its original batch font replacement workflow. Users can locate and select text layers by font, size, line height, letter spacing, color, and alignment.### New Features#### 1. Quick Selection by FontEach scanned font style now includes a **Select** button.- Matches text layers by font family and font style.- Searches the current page or the frames and layers included in the latest scan.- A mixed-style text layer is selected when any of its text segments uses the matching font.- Repeated selections continue to use the latest scan scope instead of narrowing the scope to the current canvas selection.#### 2. Precise Select TabThe main interface is now divided into two feature tabs:- Replace Fonts- Precise SelectPrecise Select supports the following conditions:- Font family- Font style- Font size- Line height- Letter spacing- Text color- Horizontal alignment- Vertical alignment#### 3. Read a Reference Style from the CanvasSelect one text layer or a text range on the Figma canvas, then click **Read Selected Text**. FontFlip reads the available properties and displays them in the reference style card.- Properties with a single consistent value can be enabled as matching conditions.- If the reference contains mixed styles, conditions with different values are automatically disabled.- Alignment is matched as a text-layer-level property.#### 4. Precise Selection ShortcutEach font style in the replacement list now includes a **Precise** button. It opens the Precise Select tab and automatically uses the selected font family and font style as the initial reference.#### 5. Scope ControlPrecise Select supports two scopes:- Current Page: searches all text layers on the current Figma page.- Current Selection: searches text layers inside the currently selected layers or frames.The matching scope is cached. After selecting matching layers, users can adjust the conditions without unintentionally narrowing the search scope to the new canvas selection.### How to Use#### Quick Font Selection1. Run FontFlip in Figma.2. Optionally select frames or layers. With no selection, FontFlip scans the current page.3. Click **Rescan Layers**.4. Locate the required font family and font style.5. Click **Select** to select all matching text layers.#### Precise Style Selection1. Open the **Precise Select** tab.2. Select a reference text layer or text range on the Figma canvas.3. Click **Read Selected Text**.4. Enable the conditions that should participate in matching.5. Choose **Current Page** or **Current Selection**.6. Click **Find Matches** to preview the number of matching layers.7. Click **Select Matching Layers** to complete the selection.### Matching Rules- Font family and font style use exact Figma font-name matching.- Font size, line height, and letter spacing compare both value and unit.- `Auto` line height only matches another `Auto` line height.- Pixel and percentage units are not converted between each other.- All enabled character-level conditions must match within the same continuous text segment.- Horizontal and vertical alignment are matched at the text-layer level.- FontFlip selects complete text layers, not individual character ranges across multiple layers.### Color MatchingThe current version supports text color matching for a single solid fill, including opacity.The following fill types are currently unsupported and automatically disable the color condition:- Gradient fills- Multiple fills- Image or other non-solid fills- Text fills bound to Figma color variables### Stability and Performance Improvements- Mixed-font scanning now uses continuous styled text segments instead of per-character scanning.- Font usage is consistently counted by text layer.- Scan, match, and selection scopes are cached separately to prevent selection changes from affecting results.- Cached selections from another Figma page are not reused after switching pages.- Text layers are revalidated before selection to avoid using stale font or style information.- Narrow plugin windows use responsive wrapping and single-column condition layouts.### VerificationThe update has passed the following checks:- Webpack production build- TypeScript type checking- UI JavaScript syntax validation- Chinese and English UI copy validation- Duplicate element ID validation- Quick font selection simulation- Multi-condition precise matching simulation- Mixed-style reference and matching tests- Page switching and cache invalidation tests✨ 核心特性：🎯 智能局部扫描： 支持扫描全页，或仅扫描你选中的特定图层/画板。⚖️ 精确字重替换： 不再盲猜样式！直观的字重平铺卡片，让你精准替换到每一个细分字重（如 Regular, Medium, Bold）。⏱️ 最近使用记忆： 自动缓存你最常用的字体，高频操作快人一步。🌗 沉浸式原生体验： 完美适配 Figma 深色/浅色模式，支持无极拖拽缩放窗口，以及中英双语无缝切换。Tired of manually changing fonts layer by layer? This plugin smartly scans your current page or selected frames, clearly grouping all used fonts by Family and Style.Designed with a seamless, native-feeling UI, it allows you to execute precise, global typography replacements in just a few clicks. Whether you're updating a massive design system or refreshing an old project, it saves you hours of tedious work.✨ Key Features:🎯 Smart Scope Scanning: Scan the entire page or limit the search to your specific selected frames/layers.⚖️ Precise Weight Selection: Stop guessing styles! Intuitive style chips let you replace fonts down to the exact weight (e.g., Regular, Medium, Bold).⏱️ Recent Memory: Automatically saves your recently used fonts for lightning-fast repetitive tasks.🌗 Native Experience: Fully responsive with drag-to-resize, seamless Dark/Light mode support, and an English/Chinese bilingual interface.