V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhwithsweet
V2EX  ›  分享创造

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

  •  2
     
  •   zhwithsweet · 71 天前 · 1430 次点击
    这是一个创建于 71 天前的主题,其中的信息可能已经有所发展或是发生改变。

    省流:

    动机

    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 周内在商店上架。最终它长这个样子

    image

    功能

    • 一键复制 TailwindCSS/Unocss/CSS
    • 导出各种格式的图片
    • 提取所有颜色
    • 支持了边距线的显示和深度选择

    这个插件目前核心的功能已经基本完成,UI 也基本完善,希望能帮助到大家。也欢迎大家多多 pr ,多多 star...

    17 条回复    2024-03-14 14:50:56 +08:00
    ruoxie
        1
    ruoxie  
       71 天前 via Android
    edge 上没反应,图标是亮了
    zhwithsweet
        2
    zhwithsweet  
    OP
       71 天前
    @ruoxie #1 刷新两次就好
    yanyao233
        3
    yanyao233  
       71 天前 via Android   ❤️ 1
    好耶!
    hayeCheng
        4
    hayeCheng  
       71 天前
    用上了!!!
    zhwithsweet
        5
    zhwithsweet  
    OP
       71 天前
    @hayeCheng #4 觉得好用帮推荐奥
    GOgoX
        6
    GOgoX  
       71 天前
    点赞
    zhwithsweet
        7
    zhwithsweet  
    OP
       71 天前 via iPhone
    @GOgoX 谢谢
    zephyr1
        8
    zephyr1  
       70 天前
    先 star 再用
    Rannnnnnn
        9
    Rannnnnnn  
       70 天前 via Android
    用了有段时间了,非常好用!
    zhwithsweet
        10
    zhwithsweet  
    OP
       70 天前
    @zephyr1 #8 那太好不过了~
    zhwithsweet
        11
    zhwithsweet  
    OP
       70 天前
    @Rannnnnnn #9 多多推荐给朋友,多多 star 奥。
    zhandi4
        12
    zhandi4  
       70 天前   ❤️ 1
    用了有段时间了,点赞
    paynezhuang
        13
    paynezhuang  
       70 天前   ❤️ 1
    先 star ,有朝一日会用得上
    autung
        14
    autung  
       70 天前
    现在从 UI->jsx 只要 5 分钟
    zhwithsweet
        15
    zhwithsweet  
    OP
       70 天前
    @autung #14 D2C 目前在组件化上有点无解,掌握基本的 CSS 还是有用的。
    autung
        16
    autung  
       70 天前
    @zhwithsweet 损失一点 html 结构的可维护性,mvc 分离,html 根本不需要维护
    反观一下没有组件化的时代,像素热区定位,依然跑的很顺畅,
    UI 不是影响组件化的原因,甚至可以让设计更灵活,
    但是问题在于,总有那么种期待,希望足够的可读性,这部分我期待用 ai 解决,有兴趣沟通一下
    MjYwMjY5ODUwNgo=
    mydebug
        17
    mydebug  
       69 天前   ❤️ 1
    nice 来得正是时候
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1001 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 21:55 · PVG 05:55 · LAX 14:55 · JFK 17:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.