无需代码，设计师也能在VR里测试原型！

本文已获得原作者Albert mauri aragonés 的翻译转载授权，根据原作者要求，这里放上他的Linkedin主页：https://www.linkedin.com/in/albert-mauri

原文地址：https://medium.com/user-experience-design-1/lets-design-xr-ui-in-figma-and-bring-it-to-xr-with-no-code-a123b9b647ab

自 1973 年以来，UI 一直在不断发展。当时，施乐帕洛阿尔托研究中心（Xerox Palo Alto Research Center）创建了我们现在所知道的第一个 UI 界面。

现在，我们正面临着 UI 演进的下一步，我们正从平面跳到 3D 空间，无论是用 AR 进入现实世界，还是用 VR 进入虚拟世界，UI 都会给这些空间带来平面世界的一些功能，当然，在新的环境中，也会诞生新的交互方式。

往期干货：

写这篇文章的目的

本文的目标非常简单：向对 XR 行业感到好奇的 UI 设计师展示如何使用他们的日常工具之一（Figma）为 XR 设计 UI，并将此 UI 带到实际的 XR 空间。如果你是设计师，本文将让你了解要使用的字体和按钮大小，并了解 UI 与用户之间的距离。

要完成本练习，你需要：

FloatGrids Figma 组件库

ShapesXR（XR 原型工具）

Meta Quest VR 眼镜

万事俱备，让我们开始吧！

一、VR 中的 UI 组件

在 3D 中，你不会以像素为单位工作，而是以米，厘米或毫米为单位。但是有一种方法可以让你仍然可以像往常一样用像素来做设计。正确理解这个概念非常重要。

1. dmm

dmm 是由谷歌创建的单位，用于测量 XR 中的尺寸。它定义了每个像素在一米的距离处都是一毫米。这意味着你的只需要默认你是在 1m 的距离上设计 UI 的。比如，根据 dmm 的定义，800x800 px 的卡片在 1 米处将是 800x800 mm 的卡片。如果你打算将 UI 放到 4m 远的距离，只需将 800 乘以 4（译者注：切 4 倍图或让开发放大四倍）。

这里有一份 VR 设计组件库，请访问 Figma 社区搜索 FloatGrids，它是一套 VR 设计系统文件。查看“如何为 VR 设计”页面以获取更多指南。

二、使用 FloatGrid 在 Figma 中自定义 UI

像平面 UI 一样在设计系统中自由调整 UI，更改颜色并添加自己的样式，为自己的设计做好准备。

下面几个视频是教学如何修改文件中的 VR UI 样式

三、快速浏览 FloatGrid 组件

设置颜色

设置版式

最终设置

设计阶段

使用“Examples/Viewports”页面中的示例之一作为布局。之后，你只要按需将组件填进去就好

快速浏览设计流程

来自谷歌的这张图片，完美地展示了根据用户的视点放置不同的 UI 面板

VR 中的 UI 不应该把画面的中心放在用户的视线中心，用户可能有些许不适。你应该把你的 UI 放得更低一点，根据谷歌的说法是 260 毫米。一旦我们进入 Shapes XR，您将有机会对此进行测试，并了解设计中心就在您眼前是多么不舒服，我们往往会不自觉地向下看。尽管 Figma 在直接解决这个问题上可能选择有限，但它对于确保积极的用户体验至关重要。一定要在移交给开发人员时传达这一原则。

四、使用 ShapesXR 在 XR 环境中测试 UI

1. 将你的 UI 从 Figma 导入到 ShapesXR

首先，你需要在 ShapesXR 官网中注册一个帐户：https://www.shapesxr.com/

在 ShapesXR 的网页工作台中，转到主菜单中的“imported”（导入）按钮，点击“Import from Figma”（从 Figma 导入）；

点击后，会弹出下面的对话框。

第一次导入时，需要将 Figma 与 ShapesXR 同步。转到你的 Figma 设置并创建个人访问令牌（new personal access token）。

回到刚才 ShapesXR 的对话框中，将 token 粘贴进去。

回到 Figma，首先需要将你想导入的 UI 合成一个 frame 或者组，然后右键，选择下图的选项 copy link。

回到 ShapesXR，将连接粘贴进去

完成！你的 UI 已经可以在 ShapesXR 的 VR 应用被直接导入。当你在 Figma 中进行更改时，你的所有更新都将在 ShapesXR 中被同步。

在 XR 空间中导入你的设计

ShapesXR 主页视图

进入应用后，从大厅中选择一个示例，或创建一个新的空间。进入后，使用控制器上的跟手菜单找到你的 UI，将它们丢进空间中。

这里是一个“像素密度”的下拉列表。此功能可以根据你的想法缩放 UI。以 1：1 导出，1px 在 1m 距离处为 1mm。

在下图中，你可以看到 UI 面板在 Figma 上的宽度为 240px，通过在 1 m 处导入 UI，ShapesXR 里为 24cm。为了方便起见，我将设计的距离设置为 1m。

可以通过 ShapesXR 里的捕捉功能，来对齐 UI。

最后，将视点设置为您希望看到设计的距离（比如 1m），并测试开发后的 UI 外观。

结语

通过这种方式，你可以在 10 分钟内将 UI 导进 XR 环境里，这只是将 2D UI 引入 3D 的方式，但也是个很好的起点。

我希望你喜欢这个小一步一步，它激励你创造一些新的和惊人的东西！

感谢您的阅读！

欢迎关注作者微信公众号：「伍昕宇的笔记本」