4.为 Figma 配置浏览器

入门篇翻译者:Neko查看原文

为 Figma 配置你的浏览器

谁可以使用这些特性

免费/付费的任何用户皆可以通过 Chrome、Safari、Microsoft Edge 与 Firefox 使用 Figma — 你需确保浏览器的 WebGL 功能已打开。通过这个网站可以测试你的 WebGL 是否开启 http://webglreport.com/

在使用 Figma 前,你可能需要配置你的浏览器。

  1. 确认 WebGL 是否安装并打开
  2. 设置浏览器缩放至 100%
  3. 确保你的浏览器已更新至最新版本
  4. 关闭 向左/向右 的手势  (macOS)
  5. 安装 Figma Font Helper 以使用本地字体(点击在新标签打开)

以下是一些浏览器的具体配置介绍

**想使用 Figma's Desktop(Figma 桌面端)代替浏览器?**使用桌面端程序你可以不必在意浏览器的配置。如果你仍有可能使用使用浏览器版本,我们也推荐你阅读文档并配置,如此,不论桌面端或浏览器都可以随意切换。

Google Chrome(谷歌浏览器)

打开 Chrome 浏览器并前往设置页面

macOS:  从顶部的菜单栏前往 Chrome Preferences(偏好),或使用快捷键 ****Command + , 来打开设置页面

Windows:  打开浏览器窗口顶部右侧的菜单并选择设置。

外观

  • 外观菜单分区内,确认浏览器的页面缩放是否设置为 100%

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bae5c3b2c7d3a04dd5b187a/file-L2DVRAzUF7.png

高级设置

向下划动并点击高级设置来展开菜单

  • 系统菜单分区内,打开使用硬件加速选项

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bae714f042863158cc6e0ee/file-tvdzMi6XZI.png

开启 WebGL

如果 WebGL 未开启,你在使用浏览器地址栏前往 Chrome Flags 设置: chrome://flags/

找到并更改 Override software rendering list 选项的为 Enabled(开启)。

这个选项一般离页面顶部不远

https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bae7141042863158cc6e0ec/file-9dgTUrDPGh.png

当然,你也可以通过搜索来找到该项并将其更改为 Enabled(开启)。

Mozilla Firefox(火狐浏览器)

  1. 打开 Firefox 浏览器并打开窗口右上角的菜单

  2. 你可以在该菜单查看当前 Zoom(缩放) 等级。使用左右的 +/- 来 增加/减小 缩放等级。确保缩放为 100%。

  3. 在菜单中选择 Preferences(偏好/设置):

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bae7007042863158cc6e0db/file-MTfKkeVty2.png

  4. 向下划动至 Firefox Updates(火狐浏览器更新) 区域。你可以检查浏览器的版本是否已是最新。

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bb20f47042863158cc6ec28/file-91eVqDcdPE.png

  5. 你可以点击 Check for updates(检查更新) 按钮来检查是否有可用更新

  6. 我们推荐将 Firefox(火狐浏览器) 自动更新开启,如此浏览器会始终保持在最新版本。

Safari

当有新版本可用时,macOS 会自动更新 Safari 。在更新 macOS 系统时,Safari 也会随系统一并跟新。

  1. 在 Safari 中打开 Figma

  2. 从顶部菜单栏前往 Safari > Preferences(偏好设置)

  3. 在菜单窗口中选择 **Websites(网站) ,**前往 Page Zoom(页面缩放)

  4. Currently open website(当前打开网站)  确保 Figma 的缩放等级为 100%

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5baec59a2c7d3a04dd5b1c9a/file-OuVw4lpURo.png

小贴士:  You'll need to be using at least V10.11.1 (El Capitan) if you want to use pinch-and-zoom functionality.

Microsoft Edge(微软 Edge)

Figma 不再支持 Internet Explorer: Figma 支持的浏览器

如何更新 Microsoft Edge 浏览器至最新版本

  1. 打开开始菜单并选择 设置 > 更新与安全
  2. 在列表顶部找到 Windows updates(Windows 更新) 点击检查更新
  3. 如果有新版本存在,系统会开始下载更新。Microsoft Edge 会在更新后自动重开

Microsoft Edge 不支持默认缩放等级的设置,取而代之的是自动记忆你最后使用的缩放等级。你可以在更多设置中来设置这个等级。以 25% 每阶来增减缩放。你也可以通过按住 Ctrl 键并使用鼠标滚轮或键盘上的 ↑/↓ 键来控制缩放,使用这种方法你可以以 5% 每阶的精度放大或缩小。

MacOS

如果你在 macOS 上使用 Trackpad(触摸板),你可能需要关闭 向左/向右 划动的手势。

关闭该选项可以避免在使用手势时,意外关闭 Figma 文件。

  1. 打开系统偏好并前往触摸板设置:

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bb20fc2042863158cc6ec2e/file-p0hUhjXmrM.png

  2. 前往更多手势标签:

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bb20fbf042863158cc6ec2d/file-xTTyZeOqeb.png

  3. 关闭在页面中划动选项:

    https://d33v4339jhl8k0.cloudfront.net/docs/assets/5aa962fe2c7d3a2c4983093d/images/5bb20fd32c7d3a04dd5b24d4/file-1NG4k1mLyb.png