V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
PxCook
V2EX  ›  问与答

涨姿势!让你一分钟玩转 XD 切图

  •  
  •   PxCook · 2019-09-09 17:08:44 +08:00 · 4270 次点击
    这是一个创建于 1938 天前的主题,其中的信息可能已经有所发展或是发生改变。

    1

    "关注像素大厨,把繁琐的事情交给我"👉

    闲言碎语不要讲,接下来我们话端详~

    这次给大家带来 XD 切图+自动标注+线上协作<1 分钟!

    相比较上一版本 XD 导入速度至少提升5 倍

    2

    那么让我们来看看如何玩转 XD 切图吧!!

    大幅提高工作效率

    XD 切图流程视频

    • 导出切图到 PxCook

    您可以在 Adobe XD 的图层中,激活“添加导出标记”图标,或在 Adobe XD 的右边栏中最后一个分栏中,将“添加导出标记”勾选上。在 Adobe XD 中,导出当前设计稿到 PxCook 中。

    新版本中,我们加入了对 Adobe XD 的切图支持,同时彻底优化了从 XD 到 PxCook 的导入过程,使得导入速度比之前提升了5 倍!!让设计师和工程师之间的衔接更加紧密高效~

    • 定义切图的范围

    在有些情况下,可能需要特殊定义切图的范围,以固定切图的尺寸。我们可以通过将一个“描述范围”的形状图层放置于需要切图的组内,然后将该形状图层变为透明即可,如下图所示:

    3

    支持自动标注

    • 支持工程师查看自动标注

    在 PxCook 软件开发模式下,工程师可通过点选画板中元素的方式,直接查看元素之间的间距「图 1 」。同时在软件右边栏中可查看该元素的详细尺寸,样式,及相应代码「图 2 」,最后工程师可直接选择并下载相应切图「图 3 」

    4

    • 切换百分比标注

    在开发模式下,工程师可以通过画板右下角开关来激活百分比标注模式。百分比标注的参考层是通过查看标注的两个元素自动计算得到的。您也可以通过在画板中右键来设置当前选中的元素做为百分比标注的参考层。要注意的是在同一个画板中,只允许同时存在一个手动设置的参考层。

    5

    在线协作效率提升

    设计师可添加协作人员进入项目,完成的设计稿及切图可直接导入到 PxCook 协作项目中,并自动适配工程师所需的尺寸,工程师可直接查看相应代码,一键复制所需代码!

    iOS 类型下: 支持 Objective-C SwiftReactNative 类型的代码生成。

    Android 类型下: 支持 XMLReactNative 类型的代码生成。

    Web 类型下: 支持 CSS 类型的样式代码生成。

    6


    -End-

    以上就是本次 PxCook XD 切图功能的优化成果,

    感兴趣的小伙伴们快来体验一下吧!为“产●设●研”而生!

    微信关注公众号:像素大厨 PxCook

    可获取更多设计资讯,和各种作图小技巧

    7

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2613 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 15:14 · PVG 23:14 · LAX 07:14 · JFK 10:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.