重磅新功能：提取网页公共样式与变量

什么是公共样式？

每个网站/网页一般都有复用的颜色、字体、阴影特效等，Refore 网页转设计 插件现在支持在导入的时候自动识别、提取这些公共的样式，并更新到相应的 Figma 等设计软件的样式库里方便你统一修改、复用。

什么是样式变量？

简单来说，就是样式里的公共变量，比如字号、色值、粗细等等：

网页中的 CSS

导入后自动生成

color: #DC2626

颜色变量：color/Red/瓦伦西亚红37

font-size: 14px

• font-family: Inter

文字样式：Inter-14/Regular

box-shadow: 0 2px 4px rgba(0,0,0,0.1)

效果样式：Drop Shadow-0

border-radius: 8px

数值变量：radius/8

同时，会自动去重：相同的颜色值会复用同一个变量，不会重复创建。

你可能从来没想过给颜色起个好听的名字对吧？

Refore 网页转设计 内置了专业颜色名称库，能给这些颜色起个贴切的好名字：

• #DC2626 → `瓦伦西亚红`
• #2563EB → `蓝丝带`
• #F3F4F6 → `野沙灰`

使用场景

• 建立设计规范

  一键将品牌官网转换为可复用的设计系统

• 竞品分析

  快速整理竞品的配色方案和字体规范

• 设计迁移

  从旧项目提取样式，应用到新设计

怎么使用

此为专业版功能，目前该功能向所有用户开放。

在 Figma/MasterGo/Pixso/即时设计 的 Refore 网页转设计 插件里：

• 如果是使用浏览器插件录制网页

点高级导入按钮 -> 在弹框里勾选“提取公共样式和变量”

• 如果是导入 HTML 文件

拖入 HTML 文件 -> 在弹框里勾选“提取公共样式和变量”

最后，上视频

视频占位文件：请将对应的视频号视频替换到 apps/refore-cn/public/video/blog/extract-web-design-tokens/video-01.mp4。

兼容性说明：

因为平台基础能力差别，目前只有 Figma、Pixso 有变量功能（MasterGo还在内测）。所以，我们的插件在MasterGo 和 即时设计里也能提取公共样式并友好命名，但无法将相关数值存在变量里