Day 23. 透过 Constraints 机制，实作出能够拉伸的响应式卡片设计

前一篇我们实验 Constraints 各种设定会造成的影响後，相信大家已经对於 Constraints 有所理解了。今天我们来将昨天学到的，实际应用在真实的设计当中。

卡片式的设计在 RWD 网页中相当常见，像是 IG、FB、电商网站，经常会见到它的身影。咱们就来实作一个可以自由缩放的卡片式 UI 吧！

1. 首先制作出下图这张卡片布局 (记得所有的物件一定都要放在一个 Frame 中，之後设定 constraints 才会起作用)

2. 接着将中间方块填入一张图片 (因为待会要做 RWD 缩放，故这张背景图需要设定成 Fill )：

3. 将此 Frame 中的每个物件都设定好对应的 constraints

4. 都设定好了之後，任意缩放最外层的 Frame，来测试看看这张卡的是否如我们预期吧？

太好了，一切看起来都是我们预料中的缩放布局方式，响应式卡片设计 easily done！

上面这个案例是为了此篇教学而特别简化的案例，实务上其实也可以用这个方法来设计更复杂可拉伸的响应式网页，像是这样 (一样做了一些简化方便理解)：

此篇教学我们综合应用了上一篇所讨论的 constraints 机制 (RWD 响应式设计的利器- 理解 Figma 的 Constraints 机制)，实作出一个能够拉伸的响应式卡片。如果对於 Constraints 机制还是不了解，或是这篇看的有点吃力，记得再回去复习一下再回来试试看喔！

T G I F !
终於周末了，祝大家假期愉快，咱们明天见！