figma 有类似 css 变量的功能吗

This topic created in 1423 days ago, the information mentioned may be changed or developed.

前端用的是 css 变量，比如 @primary-color
但在 figma 设计稿上看到的是#1890ff ，要经过一层转换才能知道是 @primary-color
前端想看到的是 primary-color ，而不是#1890ff ，有方案能做到吗？
能做到的话，会给 UI 增加很多工作量吗？

figma

CSS

变量

做到

4 replies • 2022-07-21 16:08:21 +08:00

zosmaka6

Jul 21, 2022

设计的时候声明 Style 就好了

gauzung

Jul 21, 2022

@zosmaka6 #1
有具体方案或者教程文章吗？
我是前端，我想直接得到变量名称，figma 设计方面我不太懂，我问了 UI 他也说不懂这个，所以来问问，我觉得 UI 和前端统一规范能提升开发效率

zosmaka6

Jul 21, 2022

@gauzung 这个不能截图，所以不好给你做演示，下面我文字描述一下：

1 、UI 在 Figma 右侧 Design 边栏中的 [Fill] 颜色编辑区域，选择➕号左边的 Style 按钮；
2 、根据你们的设计规范、以变量名声明具体的 Style 的名称及颜色代码；
3 、直接使用这个 Style ，前端在 inspect 中查看到的 CSS 代码就会展示具体的 Style Name 及具体的颜色代码；

gauzung

Jul 21, 2022

@zosmaka6 十分感谢