什么是公共样式？
每个网站/网页一般都有复用的颜色、字体、阴影特效等，Refore 网页转设计 插件现在支持在导入的时候自动识别、提取这些公共的样式，并更新到相应的 Figma 等设计软件的样式库里方便你统一修改、复用。
什么是样式变量？
简单来说，就是样式里的公共变量，比如字号、色值、粗细等等：
|
|
|
|---|---|
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 网页转设计 内置了专业颜色名称库，能给这些颜色起个贴切的好名字：
使用场景
- 建立设计规范
一键将品牌官网转换为可复用的设计系统 - 竞品分析
快速整理竞品的配色方案和字体规范 - 设计迁移
从旧项目提取样式，应用到新设计
怎么使用
此为专业版功能，目前该功能向所有用户开放。
在 Figma/MasterGo/Pixso/即时设计 的 Refore 网页转设计 插件里：
如果是使用浏览器插件录制网页
点高级导入按钮 -> 在弹框里勾选“提取公共样式和变量”
如果是导入 HTML 文件
拖入 HTML 文件 -> 在弹框里勾选“提取公共样式和变量”
最后，上视频