写了一个 figma 导出 css 的插件，可以理解为前端同学 figma dev mode 的简单平替。已经接近 1000 的安装量了
zhwithsweet · 288 天前 · 2131 次点击这是一个创建于 288 天前的主题，其中的信息可能已经有所发展或是发生改变。
省流:
- Chrome 商店 - fubukicss-tool
- Github 源码 - fubukicss-tool
动机
figma 公测许久的 dev mode ，在 2 月底宣布收费了，不充值的话，我连自己开发的 figma plugin 都不能使用。而默认的模式，从之前的复制 CSS ，变为了右键元素 -> export as CSS ，功能瞬间倒退，切图的效率瞬间降低 N 倍，加上我本人几乎所有的项目都在使用 atomic CSS ，整体的开发效率降低到冰点。
整活
看过我之前帖子的朋友，应该知道我开发过 figma plugin to-unocss ；也开发了能够在 sketch measure 和蓝湖中生成 atomic CSS 的 插件。然后又在看 X 上看到可以通过浏览器插件获取 figma 设计稿的信息。一切都顺利串起来了。
我花了 30 分钟确定了技术栈 wxt，一款轻量级的浏览器开发框架； UI 确定了 react + shadcn-ui ，又花了 1 天的时间快速的开发出原型。最后经过 100+用户的试用之后，2 周内在商店上架。最终它长这个样子
功能
- 一键复制 TailwindCSS/Unocss/CSS
- 导出各种格式的图片
- 提取所有颜色
- 支持了边距线的显示和深度选择
这个插件目前核心的功能已经基本完成，UI 也基本完善，希望能帮助到大家。也欢迎大家多多 pr ，多多 star...
17 条回复 • 2024-03-14 14:50:56 +08:00
 |
1
ruoxie 288 天前 via Android
edge 上没反应，图标是亮了
|
 |
2
zhwithsweet OP @ruoxie #1 刷新两次就好
|
 |
3
yanyao233 288 天前 via Android  1
好耶！
|
 |
4
hayeCheng 288 天前
用上了！！！
|
|
5
zhwithsweet OP @hayeCheng #4 觉得好用帮推荐奥
|
 |
6
GOgoX 288 天前
点赞
|
|
7
zhwithsweet OP @GOgoX 谢谢
|
 |
8
D2h0VL89HMAU417B 288 天前
先 star 再用
|
 |
9
Rannnnnnn 288 天前 via Android
用了有段时间了，非常好用！
|
|
10
zhwithsweet OP @zephyr1 #8 那太好不过了~
|
|
11
zhwithsweet OP @Rannnnnnn #9 多多推荐给朋友，多多 star 奥。
|
 |
12
zhandi4 288 天前 1
用了有段时间了，点赞
|
 |
13
paynezhuang 288 天前 1
先 star ，有朝一日会用得上
|
 |
14
autung 287 天前
现在从 UI->jsx 只要 5 分钟
|
|
15
zhwithsweet OP @autung #14 D2C 目前在组件化上有点无解，掌握基本的 CSS 还是有用的。
|
|
16
autung 287 天前
@zhwithsweet 损失一点 html 结构的可维护性，mvc 分离，html 根本不需要维护
反观一下没有组件化的时代，像素热区定位，依然跑的很顺畅， UI 不是影响组件化的原因，甚至可以让设计更灵活， 但是问题在于，总有那么种期待，希望足够的可读性，这部分我期待用 ai 解决，有兴趣沟通一下 MjYwMjY5ODUwNgo= |
 |
17
mydebug 286 天前 1
nice 来得正是时候
 |
Select Language