在 ProtoPie,我们始终重视两大支柱:你的生产力与表达力。考虑到许多设计师已经形成了固定的工作流习惯,我们尝试通过引入更多熟悉的体验来消除不便。同时,我们也希望帮助你实现一个呼声很高的使用场景:制作完整的媒体播放器原型。
因此,在 ProtoPie 5.5 中,每个人都能找到自己需要的内容。
提升生产力的功能与改进,并进一步弥合你已熟悉的设计工具之间的差距。
为精通公式艺术的高手增强表达力的功能。
让我们深入了解这些新功能与改进。
Playback 响应中的公式支持
在创建媒体播放器或流媒体应用原型时,一个可用的拖动条(scrubber)对于让原型更真实至关重要。借助 Playback 响应中的公式支持,你可以在音频、视频或 Lottie 文件中定位到特定时间戳并从该处开始播放。
在 Playback 响应中你可以选择三个操作——Play、Pause、Seek。请将公式用于 Seek 操作。要让拖动条生效,只需将拖动条的 x 坐标与对应时间戳进行“关联”。
[IMG url="https://cdn.sanity.io/images/qyzm5ged/blog/1b7073baa8e586aa74ea5a62e6f2ebbc69a9fb9a-1634x1272.gif"]
我们还单独撰写了一篇文章,教你如何亲手制作一个完整的视频播放器原型。
进一步了解Playback 响应和公式。
图像填充
当你从 Figma、Sketch 或 Adobe XD 导入设计时,可能会遇到图片按导入尺寸被拉伸,或带有图像填充的图层显示为空白的情况。现在,ProtoPie 及这三个插件都支持图像填充,你不再需要担心这些问题。
你也可以在 ProtoPie 中创建一个形状图层,并选择一张图片作为填充。图像填充有三种类型——fill、fit 和 stretch。选择 fill 或 fit 选项,即可在不失真的情况下保持原始比例。

了解更多关于图像填充的信息。
点击并拖拽以创建图层
很多设计师都习惯这种操作方式:通过点击并拖拽来创建形状图层。现在 ProtoPie 已完整支持这一行为。
可在画布任意位置、光标所在处创建形状图层。你不必再浪费时间去调整图层大小或移动图层。

快捷键弹窗
拥有实用的键盘快捷键是一回事,知道它们又是另一回事。这就是我们推出快捷键弹窗的原因——你的键盘快捷键一站式中心。
一眼发现所有快捷键,提升生产力并让工作流更轻松。要打开快捷键弹窗,请使用 ⌃ + ⇧ + /(macOS)或 Ctrl + ⇧ + /(Windows)。
你也可以在文档中找到快捷键列表。了解更多所有键盘快捷键。

更多新快捷键
几个月前,我们引入了一些提升生产力的新快捷键。此次发布中,我们将延续这一趋势。
左对齐、右对齐、顶对齐、底对齐、水平居中与垂直居中的快捷键
使用快捷键对齐图层是许多设计师的习惯。现在,你无需再在属性面板中寻找正确的对齐图标即可完成图层对齐。
了解更多对齐快捷键。或者使用 ⌃ + ⇧ + /(macOS)或 Ctrl + ⇧ + /(Windows) 打开快捷键面板。
取色快捷键
使用吸管可轻松取色,无需先进入属性面板。选中图层后使用快捷键:I(macOS & Windows)或 ⌃ + C(macOS)。
了解更多关于取色快捷键。
变量的公式支持
对于各位公式高手来说,你可能知道公式有时会很长且繁琐。你经常需要多次复用某些特定公式。现在,每次再次使用时,你都不必再去记忆、查找或复制粘贴公式。
创建一个变量(针对此场景),选择数据类型,并勾选 Use Formula。输入你想使用的公式。要真正复用这个公式,只需使用变量名即可。

新的公式函数
要释放公式的真正威力,往往需要引用其他图层及其图层属性。因此,为了更高效地使用公式,我们引入了两个实用的新函数。
公式函数:parent
到目前为止,如果你对公式中使用的父图层做了改动(例如重命名,或父图层变成了其他图层),你就得修改公式。现在不需要了。借助 parent 函数,你可以引用父图层——无论父图层是什么,或父图层发生了任何变化。
你可以引用父图层(例如容器或组件),或返回它的图层属性。比如,让椭圆在点击 Red 或 Blue 时移动(两者都是内部包含文本图层的容器)。由于 parent 函数,椭圆会移动到这些文本图层各自父级的 y 坐标。
其好处在于可扩展性强。设想你有 10 或 20 张卡片,而不是示例中的 2 张,为所有卡片创建这类交互的方式完全相同。

公式函数:initial
公式使用中的一个问题是记住或计算图层属性的初始值。现在你不必再这样做了。使用 initial 函数可获取特定图层属性的初始值——无需记住任何数值,也无需回到属性面板查看原值。
返回特定图层属性的初始值(任何交互发生之前)。例如,如果你想获取 Oval 的初始 x 坐标,使用 initial(Oval, "x") 即可找到其初始 x 坐标。

ProtoPie 5.5——其他功能与改进
记住下拉菜单上一次选中的选项
改进图层与交互面板渲染
移除取色器卡顿
在属性面板中显示音频、视频和 Lottie 文件长度
加入我们的发布活动
观看 5.5 发布活动,帮助你更好地理解本次更新。ProtoPie 不仅演示了新功能的实际效果,也更深入地介绍了我们如何选择功能。
主题 1 —— 我们如何选择功能来打造更好的 ProtoPie。
主题 2 —— 视频播放器原型:新 ProtoPie 功能实战演示。




