autorenew
如何在 Figma 主窗口外预览你的移动端设计?

如何在 Figma 主窗口外预览你的移动端设计?

如何使用完全独立的窗口预览你在 Figma 中做的移动端设计。

Figma 在 Config2023 发布了一个更新,你可以在设计窗口内打开一个内联的原型预览窗口,而不需要新开一个标签页了。

在设计窗口内打开一个内联的原型预览窗口

对于做移动端设计来说这很方便,因为不需要单独开一个标签页预览,可以一边设计一边预览了。但是,内联的窗口有一个问题,就是有时候它会遮挡我们的设计区域。比如,当我想要查看预览窗口下方的元素时,内联的窗口就会遮挡住,我得先移动或关闭预览窗口才能看到。

也许你会说,直接使用 iPhone 预览就可以啦。但是对于像我这样没有 iPhone 的设计师来说,这个方法就不太适用了。于是我就在想,有没有什么办法可以让我们打开一个完全独立的窗口来预览我们设计呢?

使用 Xcode 预览

我当时正在开发一款 iOS 应用,而苹果的 Xcode 自带了一个模拟器,我想也许我们可以使用它来预览我们的设计。于是我就询问了一下 AI 老师,它告诉我可以实现一个 iOS 应用,里面只显示一个 webview,用来在 Xcode 模拟器中加载 https://figma.com/mirror 就可以实现预览了。

说干就干,其实也没几行代码。为了方便,我就不教你如何实现并打包了,我直接打包好一个可安装的文件,你直接按照下面的步骤下载安装就可以使用了。

  1. 下载并解压 Figma Mirror
  2. 在你的 Applications (应用程序) 文件夹中找到并打开 Xcode。 在 Applications 文件夹中找到并双击打开 Xcode
  3. 打开后,忽略欢迎窗口,直接看屏幕顶部的苹果菜单栏。点击菜单栏中的 Xcode,在下拉菜单中依次选择 Open Developer Tool -> Simulator。 忽略欢迎窗口,直接看屏幕顶部的苹果菜单栏
  4. 此时我们就能看到一个 iPhone 模拟器显示在我们的桌面上。
  5. 将我们解压好的 Figma Mirror 文件直接拖拽到模拟器中,此时就会自动安装了。 将 Figma Mirror 文件拖拽到模拟器中
  6. 安装完成后,我们就可以在模拟器中看到 Figma Mirror 的图标了。点击它打开,首次使用需要先输入邮箱密码登录一下。
  7. 如果你再输入框内不能输入文字,可以依次点击菜单栏的 I/O -> Keyboard -> Connect Hardware Keyboard,这样就能使用 macOS 的键盘输入了。

登录完成之后,我们就可以在 Xcode 模拟器中预览我们的设计了。

你还可以根据需要,调整预览窗口的大小。

怎么样?是不是很方便?如果你觉得这个方法不错,欢迎分享给你的朋友。