行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

发布

8

阅读时间

ProtoPie的新内容?回放中的公式、图像填充和快捷键模态窗口

推出可提升生产力并通过公式增强表达能力的新功能。

朱莉·柯, 增长营销人员

在 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。选择 fillfit 选项,即可在不失真的情况下保持原始比例。


Image fill options in ProtoPie

了解更多关于图像填充的信息。

点击并拖拽以创建图层

很多设计师都习惯这种操作方式:通过点击并拖拽来创建形状图层。现在 ProtoPie 已完整支持这一行为。

可在画布任意位置、光标所在处创建形状图层。你不必再浪费时间去调整图层大小或移动图层。


Creating layers by clicking and dragging

快捷键弹窗

拥有实用的键盘快捷键是一回事,知道它们又是另一回事。这就是我们推出快捷键弹窗的原因——你的键盘快捷键一站式中心。

一眼发现所有快捷键,提升生产力并让工作流更轻松。要打开快捷键弹窗,请使用 ⌃ + ⇧ + /(macOS)或 Ctrl + ⇧ + /(Windows)。

你也可以在文档中找到快捷键列表。了解更多所有键盘快捷键。


Shortcut panel in ProtoPie Studio

更多新快捷键

几个月前,我们引入了一些提升生产力的新快捷键。此次发布中,我们将延续这一趋势。

左对齐、右对齐、顶对齐、底对齐、水平居中与垂直居中的快捷键

使用快捷键对齐图层是许多设计师的习惯。现在,你无需再在属性面板中寻找正确的对齐图标即可完成图层对齐。

了解更多对齐快捷键。或者使用 ⌃ + ⇧ + /(macOS)或 Ctrl + ⇧ + /(Windows) 打开快捷键面板。

取色快捷键

使用吸管可轻松取色,无需先进入属性面板。选中图层后使用快捷键:I(macOS & Windows)或 ⌃ + C(macOS)。

了解更多关于取色快捷键。

变量的公式支持

对于各位公式高手来说,你可能知道公式有时会很长且繁琐。你经常需要多次复用某些特定公式。现在,每次再次使用时,你都不必再去记忆、查找或复制粘贴公式。

创建一个变量(针对此场景),选择数据类型,并勾选 Use Formula。输入你想使用的公式。要真正复用这个公式,只需使用变量名即可。

进一步了解变量公式


How to use formula support for variables

新的公式函数

要释放公式的真正威力,往往需要引用其他图层及其图层属性。因此,为了更高效地使用公式,我们引入了两个实用的新函数。

公式函数:parent

到目前为止,如果你对公式中使用的父图层做了改动(例如重命名,或父图层变成了其他图层),你就得修改公式。现在不需要了。借助 parent 函数,你可以引用父图层——无论父图层是什么,或父图层发生了任何变化。

你可以引用父图层(例如容器或组件),或返回它的图层属性。比如,让椭圆在点击 Red 或 Blue 时移动(两者都是内部包含文本图层的容器)。由于 parent 函数,椭圆会移动到这些文本图层各自父级的 y 坐标。

其好处在于可扩展性强。设想你有 10 或 20 张卡片,而不是示例中的 2 张,为所有卡片创建这类交互的方式完全相同。


Example of parent formula function

亲自试试这个示例了解更多关于 parent 函数。

公式函数:initial

公式使用中的一个问题是记住或计算图层属性的初始值。现在你不必再这样做了。使用 initial 函数可获取特定图层属性的初始值——无需记住任何数值,也无需回到属性面板查看原值。

返回特定图层属性的初始值(任何交互发生之前)。例如,如果你想获取 Oval 的初始 x 坐标,使用 initial(Oval, "x") 即可找到其初始 x 坐标。


Example of initial formula function

亲自试试这个示例了解更多关于 initial 函数。

ProtoPie 5.5——其他功能与改进

  • 记住下拉菜单上一次选中的选项

  • 改进图层与交互面板渲染

  • 移除取色器卡顿

  • 在属性面板中显示音频、视频和 Lottie 文件长度

加入我们的发布活动

观看 5.5 发布活动,帮助你更好地理解本次更新。ProtoPie 不仅演示了新功能的实际效果,也更深入地介绍了我们如何选择功能。

  • 主题 1 —— 我们如何选择功能来打造更好的 ProtoPie。

  • 主题 2 —— 视频播放器原型:新 ProtoPie 功能实战演示。