什么是公共样式？
每个网站/网页一般都有复用的颜色、字体、阴影特效等，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 文件 -> 在弹框里勾选“提取公共样式和变量”
最后，上视频
兼容性说明：
因为平台基础能力差别，目前只有 Figma、Pixso 有变量功能（MasterGo还在内测）。所以，我们的插件在MasterGo 和 即时设计里也能提取公共样式并友好命名，但无法将相关数值存在变量里