写了一个 figma 导出 css 的插件，可以理解为前端同学 figma dev mode 的简单平替。已经接近 1000 的安装量了

[zhwithsweet]

省流:

• 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...

[ruoxie]

edge 上没反应，图标是亮了

[zhwithsweet]

@ruoxie #1 刷新两次就好

[yanyao233]

好耶！

[hayeCheng]

用上了！！！

[zhwithsweet]

@hayeCheng #4 觉得好用帮推荐奥

[GOgoX]

点赞

[zhwithsweet]

@GOgoX 谢谢

[zephyr1]

先 star 再用

[Rannnnnnn]

用了有段时间了，非常好用！

[zhwithsweet]

@zephyr1 #8 那太好不过了~

[zhwithsweet]

@Rannnnnnn #9 多多推荐给朋友，多多 star 奥。

[zhandi4]

用了有段时间了，点赞

[paynezhuang]

先 star ，有朝一日会用得上

[autung]

现在从 UI->jsx 只要 5 分钟

[zhwithsweet]

@autung #14 D2C 目前在组件化上有点无解，掌握基本的 CSS 还是有用的。

[autung]

@zhwithsweet 损失一点 html 结构的可维护性，mvc 分离，html 根本不需要维护
反观一下没有组件化的时代，像素热区定位，依然跑的很顺畅，
UI 不是影响组件化的原因，甚至可以让设计更灵活，
但是问题在于，总有那么种期待，希望足够的可读性，这部分我期待用 ai 解决，有兴趣沟通一下
MjYwMjY5ODUwNgo=

[mydebug]

nice 来得正是时候