figma 有类似 css 变量的功能吗

2022-07-21 15:00:28 +08:00
 gauzung
前端用的是 css 变量,比如 @primary-color
但在 figma 设计稿上看到的是#1890ff ,要经过一层转换才能知道是 @primary-color
前端想看到的是 primary-color ,而不是#1890ff ,有方案能做到吗?
能做到的话,会给 UI 增加很多工作量吗?
973 次点击
所在节点    问与答
4 条回复
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 十分感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/867763

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX