Figma 的画布缩放功能说明

大家好，我是前端西瓜哥。

画布缩放是图形编辑器的基础功能，作用是放大图形编辑细节，缩小总览全局。我们来看看 Figma 是如何做画布缩放设计的。

zoom

使用 zoom 表示画布的缩放比。

比如 zoom 为 1（即 100%），表示画布不进行缩放，为原始大小。zoom 为 2 表示画布放大一倍。zoom 为 0.5 表示画布缩小一倍。

放大画布对应 zoomIn 方法，zoom 值是变大的。

zoomIn 的 in 是指将镜头靠近场景的意思，近所以图形大，所谓 “近大远小”。

缩放画布则是 zoomOut，zoom 值变小。镜头远离场景，因此图形会变小。

快捷键或按钮缩放画布

通常我们会在 UI 界面上提供画布缩放和放大按钮，点击它们会 以画布中心为缩放中心，进行缩放。

快捷键为：

• 放大画布：Ctrl/Command +
• 缩小画布：Ctrl/Command -

我发现 Figma 实际上直接用 + 或 - 就能缩放了，但它在 UI 上并没有提示。

Figma 在这种情况下会让 zoom 值落在几个特定的值上。

const zoomLevels = [
  0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5, 
  1, 2, 4, 8, 16, 32, 64, 128, 256
]

你应该看出规律了，这是一个等比数列，公比为 2，其中的中间值是 1（即 100%）。同时 256 和 0.015625 也是 zoom 的最大最小值。

比如当前 zoom 为 198%，放大会变成 200%，缩小会变为 100%。

下面是找到排序数组中，在目标值两边的数组元素的方法。

const getNearestVals = (arr, target) => {
  let left = 0;
  let right = arr.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) {
      right = mid - 1;
      left = mid + 1;
      break;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  if (right < 0) right = 0;
  if (left >= arr.length) left = arr.length - 1;
  return [arr[right], arr[left]];
};

getNearestVals(zoomLevels, 1.98) // [1, 2]

这样用户就能快速、大幅度地更改 zoom，快速抵达最值，查看跨度较大的不同 zoom 的设计稿效果。

你可能发现 UI 上的 zoom 好像对不上，比如应该是 0.125 的，但 UI 上却显示为 13%。这里其实并没有在数据层做舍入，而是在 UI 显示上做了四舍五入。

如果想拿到真实 zoom 值，可通过 Figma 的插件 API 的 figma.viewport.zoom 属性获取。

但有些情况下，用户会觉得这样缩放幅度可能有点大了，需要幅度更低的缩放，这时候可以用鼠标滚轮缩放。

鼠标滚轮缩放

Figma 也支持通过滚轮的方式缩放，且会 基于缩放比率 zoomRatio，并以光标位置为缩放中心进行缩放。

按住 Ctrl 或 Command，滚轮向前为放大，向后为缩小。

// 缩放比率
const zoomRatio = 1.23
// 放大画布
zoom * zoomRatio
// 缩小画布
zoom / zoomRatio

zoomRatio 不是写死的，和 鼠标滚轮灵敏度 有关。

（下面是 Windows 设置鼠标滚轮灵敏度的方式）

鼠标滚轮灵敏度会反应到 WheelEvent 滚轮事件对象的 deltaY 上，灵敏度越高，每次滚动的 deltaY 就越大。

我们需要定义一个函数：传入 deltaY，拿到一个缩放比率 zoomRatio。

这个函数的返回值在 0 到 2 之间，且为对数关系，即 x 越大，y 的值越平缓。

顺带一提，mac 触控板不是常规输入设备，所以不在滚轮事件标准之内。

但触控板的缩放操作会倍浏览器里转换为 ctrl + 滚轮 的滚轮行为，也是可以拿到 deltaY 的，但值非常小，所以你会看到它的缩放幅度是滚轮是不一样的。

其他

Figma 也支持其他的缩放操作。

• 输入框输入新的 zoom 值回车，即可应用；
• 缩放为 50% / 100% / 200%。比较常用的一些 zoom 值，其中 100% 最常用，也叫 “缩放为原始大小”；
• 缩放为适应画布大小，这样就能总览所有的图形。图纸第一次打开时，也会进行适应画布的操作，但 zoom 最大为 1，你可以理解为只能缩小（相比初始的 100%），但不能放大。
• 适应选中图形，将选中的图形缩放为适应画布大小，作用是查看指定图形的细节。

Figma 没有做专门的缩放画布工具，应该是认为没有必要的，比较多余，用快捷键就够了。

偏好设置有一个 Invert zoom direction（翻转缩放画布方向）勾选项。勾选后，向前滚轮反而会减小 zoom 值。

结尾

我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。