分享 UI 套件

最佳做法

共用專案前先檢查錯誤並建立已命名版本

準備好共用元件或一頁的元件時,建立已命名版本可讓 UI 套件定義保持穩定。這可防止變更 Figma 檔案而影響實際工作環境元件。

  1. 按一下外掛程式中的「與開發人員共用」選項。

    Android 檢視畫面中的 StatusCard
  2. 開發人員無法使用元件的錯誤會顯示為清單。請先修正錯誤,

  3. 修正所有封鎖錯誤後,您可以儲存版本記錄。這與在 Figma 中儲存版本記錄相同。輸入新版本的標題和說明。按一下「儲存」

    Android 檢視畫面中的 StatusCard
  4. 新版本會儲存為 Figma 內的版本記錄。

    Android 檢視畫面中的 StatusCard

這會將 Android Studio 專案連結至最新的已命名版本,以便順暢更新。如果檔案沒有已命名版本,則 Android Studio 中的更新一律會提取最新的自動儲存版本。不過,建議您使用已命名版本。

準備就緒後,即可透過 Figma 網址連結與開發人員分享 UI 套件。

在單一頁面中共用所有 UI 套件

在左側面板的頁面上按一下滑鼠右鍵,然後選取「複製頁面連結」

網頁上所有的 UI 套件都會共用。開發人員可以選擇在 Figma 頁面中匯入任一或所有 UI 套件。

共用特定 UI 套件

選取元件後,按一下滑鼠右鍵,然後依序選取「複製/貼上為」>「複製連結」。

只有透過網址分享所選的 UI 套件。開發人員只能匯入共用 UI 套件。

在檔案中共用所有 UI 套件

在 Figma 桌面中,在分頁標籤上按一下滑鼠右鍵複製網址,然後選取「Copy link」

https://www.figma.com/file/sample_file_id/FileName?node-id=1234567

移除網址中 node-id 後方的所有內容。與開發人員分享新網址。

https://www.figma.com/file/sample_file_id/FileName

開發人員可在 Figma 檔案中匯入所有 UI 套件。

共用特定版本頁面中的所有 UI 套件

在 Figma 中開啟版本記錄面板。按一下滑鼠右鍵,然後選取「複製連結」

開發人員可使用指定的已命名版本匯入頁面上的所有 UI 套件。

Android 檢視畫面中的 StatusCard

進階用法

Relay 工作流程支援在同一專案中匯入不同的 UI 套件版本,但必須手動建立 Figma 檔案網址。

  1. 將您想要匯入的直接連結複製到元件。選取元件圖層,按一下滑鼠右鍵,然後依序選取「Copy/Paste as」>「Copy link」。例子:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. 選取您想要使用的元件版本。依序前往「File」>「Show version history」,並選取版本。然後按一下滑鼠右鍵,並選擇「Copy link」以複製版本的網址。例子:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. 結合使用兩個網址,為元件建立版本網址。您可以用元件連結中的值取代版本連結中的 node-id 值,或者將 version-id 參數插入元件連結,只要 URL 中的兩個參數都存在即可。例子:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45