Figma 学习笔记 – Frame

Frame = <div>

Frame 就类似 HTML 中的 div, 它和形状 rectangle 特性上蛮相识的, 但是使用场景其实差很多, 所以不要搞错哦. (除了图片很少会用到 rectangle 的)

Keyboard F 或者右上角选 Frame 就可以画出一个 frame 了.

Frame 基本配置

上面是 frame 的全部基本配置. 我们一个一个看.

第 1 个是可以选常用的 frame 尺寸, 比如 iPhone, Android 手机尺寸

第 2, 3 是 width height 对调

第 4 是把 frame 变成一个 wrapper, 修改 frame dimension 依据 wrap 它的内容.

x, y 坐标, 它这个对的点是中心点哦. 0, 0 的时候是在正中间. 一般上很少会手动调这个.

配置 width, height

它有一个小技巧哦, 可以直接写简单 formula 比如 197 + 50, 它会算出答案然后赋值.

右边的 icon 是一个锁定比例, 开启之后修改其中一个 dimension, 另一个会依据比例自动一起修改.

第 1 个是 frame 的角度旋转

第 2 个是调 frame 的圆角 border-radius (4边)

右边的小 icon 可以指定每一个角不同的 radius

隐藏/显示超出 frame 的内容. frame 就像 div 当内容过长的时候可以有 scroll bar 的概念.