V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
justis
V2EX  ›  前端开发

无需 Dev Mode,在 Figma 上轻松查看代码

  •  
  •   justis · 39 天前 via iPhone · 751 次点击
    这是一个创建于 39 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自 Figma 的 Dev Mode 开始收费后,没有购买 Dev Mode 席位的开发者在设计交付过程中的效率大幅下降,甚至还不如 Dev Mode 推出之前的体验。

    为了解决这一问题,TemPad Dev 提供了一款 Chrome 扩展,目标是在 Figma 上为所有用户打造一个简单易用的 Inspect 面板。

    GitHub · Chrome Web Store · Discord

    检查 CSS 代码

    选择任意元素,即可通过插件的代码面板获取其 CSS 代码。除了标准的 CSS 代码外,TemPad Dev 还提供以 JavaScript 对象形式呈现的样式,方便在 JSX 等场景中使用。

    你可以配置 CSS 单位和根字体大小,将 CSS 中的 px 尺寸转换为 rem 单位。

    深度选择模式

    在 Figma 的只读视图中,选择节点需要双击才能向下深入,且往往需要多次双击才能选中最底层节点。尽管 Figma 提供了 ⌘ + 单击 的快捷键,但许多用户并不了解此功能,因此每次都需要额外操作按键。为了解决这一问题,TemPad Dev 在设置中提供了深度选择模式。

    测量模式

    在 Figma 的只读视图中,用户需要按住 ⌥ 键并移动光标,才能显示选中节点与其他节点之间的间距。出于与深度选择模式类似的原因,TemPad Dev 在设置中提供了“测量到选中模式”,以优化这一操作体验。

    滚动选中项到视图中心

    当您将鼠标悬停在 TemPad Dev 检查面板中的节点名称区域时,会出现一个对应的按钮。点击该按钮,即可将当前选中项滚动到 Figma 视图的中心位置。虽然 Figma 提供了类似的快捷键 ⇧2 ,但该功能会将视图放大至填满整个视口,往往无法满足需求。实际上,Figma 在插件 API 中暴露了一个接口,可以将视图移动并缩放至 100%,因此我们也提供了这一功能,作为现有操作的补充。

    代码输出插件

    TemPad Dev 在近期新增了一个内置的轻量级插件系统,可以通过插件实现对代码输出的自定义,适配特定设计系统的 design token 输出或者转换为特定的 CSS 语法(如 Tailwind CSS 或 UnoCSS )。

    支持深色主题

    TemPad Dev 的 Inspect 面板直接采用 Figma 的 CSS 变量实现,与 Figma 样式融为一体,可以根据 Figma 偏好设置同步切换到深色主题。

    2 条回复    2024-11-19 00:56:46 +08:00
    abram
        1
    abram  
       37 天前
    那这个只能在浏览器里使用对吗
    justis
        2
    justis  
    OP
       36 天前 via iPhone
    @abram 是的,是一个 Chrome 扩展。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:41 · PVG 17:41 · LAX 01:41 · JFK 04:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.