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

查看 77|回复 7
作者: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
    OP
      
    @ruoxie #1 刷新两次就好
    yanyao233   
    好耶!
    hayeCheng   
    用上了!!!
    zhwithsweet
    OP
      
    @hayeCheng #4 觉得好用帮推荐奥
    GOgoX   
    点赞
    zhwithsweet
    OP
      
    @GOgoX 谢谢
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部