Figma 学习笔记 – Image

参考：

Figma Tutorial: Images

 

3 Ways to Insert Image

1. rectangle / frame + fill 

画一个 rectangle / frame 然后去 fill 选择 image then browse an image to insert.

注: rectangle 就是 HTML 的 <img>, frame 就是 HTML 的 div + background-image

2. ctrl + shift + k

使用 keyboard shortcut 可以快速实现第 1 个 way

3. drag & drop, copy & paste

 

图片配置

Fill 是 css 的 cover (填满框, 牺牲图片的内容)

Fit 是 css 的 contain (保留所有图片内容, 让框留白)

Crop 是截图咯 

Tile 是重复图片填满框

右边是旋转

下半段的配置就是亮度, 倒影等等了