行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

提示

2

阅读时间

如何同时调整容器和子图层的大小

了解子图层的位置或大小如何与容器一起更改。

利亚·韩, 中国业务负责人

你好!这里是 ProtoPie 教师 Leah。

你知道吗,在 ProtoPie 中有一个名为 Constraints(约束)的功能?通过它,你可以定义子图层的位置或大小是否应随容器一起变化。


Changing Sub-layer's position and size gif


更改子图层的位置和大小

步骤 1:定义子图层将如何随容器变化。

在你的容器中,可能有多个子图层,例如背景层和文本层。首先,你应该决定当你更改容器大小时,子图层将如何变化。


Sub-layer and Container


子图层与容器

在这个例子中,我们希望背景子图层随容器大小进行缩放。

这意味着背景子图层边缘到容器边框的距离应始终保持一致。不过,文本层不会随容器大小而变化。

步骤 2:选择子图层并设置约束

最重要的一点是,你应该设置的是子图层的约束,而不是容器的约束。

选择子图层后,你可以在属性面板中找到约束设置。如果你希望子图层大小与容器一起变化,你应该勾选该选框(见下图)。


Checkbox image


复选框图片

但是,如果你不想改变子图层的大小(在本例中为文本层),我们只需要勾选“固定宽度”和“固定高度”设置。


Check the Fixed Width and Fixed Height setting


勾选“固定宽度”和“固定高度”设置


Constraints feature demo gif


Constraints 功能演示

目前就这些!

如果你还想看到我们讲解其他技巧,欢迎直接回复告诉我们。