figma 有类似 css 变量的功能吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 646 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

figma

CSS

变量

做到

4 条回复 • 2022-07-21 16:08:21 +08:00

zosmaka6

2022-07-21 15:24:52 +08:00

设计的时候声明 Style 就好了

gauzung

2022-07-21 15:34:47 +08:00

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

zosmaka6

2022-07-21 15:44:27 +08:00

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

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

gauzung

2022-07-21 16:08:21 +08:00

@zosmaka6 十分感谢