本文已獲得原作者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 的方式，但也是個很好的起點。

我希望你喜歡這個小一步一步，它激勵你創造一些新的和驚人的東西！

感謝您的閱讀！

歡迎關注作者微信公眾號：「伍昕宇的筆記本」