原文地址：https://mp.weixin.qq.com/s/jlQjKVPVLZgM9JDAXBSnWA

Content is like water。

这是描述响应式最著名的一段话。

它的意思是，**在响应式设计下，如果将屏幕看成容器，那么内容就会像水一样自由适应。**由此形成我们常说的多端无障碍连续体验。

比如figma官网，大家可以去感受下它是如何实现响应的。

而在设计执行层面，sketch可以用Resizing功能实现动态响应（我在一篇文章帮你搞定组件的动态响应中有很多的讲解，想了解的老铁可戳），而figma要想实现动态响应布局，constraints约束是方法之一。

01   什么是约束

what

约束的字面意思：被束缚、被捆绑、被固定。

官方对约束的定义是，允许你将设计元素固定在父框架（frame）的不同位置，以此来控制设计在不同屏幕尺寸和设备上的外观。

注意被我重点标记的父框架frame。这是使用约束功能的唯一前置条件。

如果你之前看过我的【6000字超干干货】没搞定这个概念，figma就真的白用了！→这篇文章，你应该记得**只有frame才会有约束功能面板。**也就是说，约束功能必须在frame中才能实现。

02   约束有什么用

usage

约束的用处和它名字一样，可以将子级元素固定到边缘，不论如何改变其父级frame尺寸，子级元素都会像被一根绳子牢牢绑到一边一样纹丝不动。