發布及推送設計更新

在本節中,您將在之前專案上進行建構,藉此變更 Figma 中的元件 (在這個例子中會變更文字的格式),以及查看套用至 Android Studio 中程式碼集的變更。

前後比較

Figma 中的變更

對 Figma 元件進行更新。返回 Figma 檔案:

  1. 選取「標題」文字圖層。在「Text」區段中,將樣式變更為「Bold」

    選取標題文字並在 Figma 中以粗體顯示

儲存已命名版本

現在,將更新的元件整合至程式碼集。為確保開發人員使用新版元件,請重複執行儲存版本的步驟。

  1. 開啟 Figma Relay 外掛程式 (如果尚未開啟)。

  2. 按一下「與開發人員分享」

    選單中的「Save to version history」選項
  3. 在「與開發人員共用」畫面中,您可以在「儲存版本記錄」部分輸入新的版本名稱和說明。

    選單中的「Save to version history」選項
  4. 在 Mac 上輸入 CMD-L,或在 Windows 中輸入 CTRL-L,即可將新連結複製到剪貼簿。

更新元件程式碼

現在重新匯入元件:

  1. 在 Android Studio 中,確認「Project」工具視窗位於「Android view」。然後,在 app/ui-packages/hello_card/ 上按一下滑鼠右鍵,並選取「Update UI Package」

    在內容選單中更新 UI 套件選項

    等待右下角的載入列完成操作:

    Android Studio 載入列
  2. 按一下 「Make Project」按鈕 即可建構專案,然後在 app/java/com/example/hellofigma/MainActivity.kt 預覽中查看更新後的元件。請注意,文字現在以粗體顯示。

    工具列中的建構按鈕
    元件預覽
  3. 執行應用程式,即可查看模擬器中的相同更新。

    工具列中的「Run」按鈕
    模擬器中的應用程式預覽

下一步

現在,我們已更新設計,並且瞭解到產生的程式碼如何更新,因此可以使用允許元件中變數資料的內容參數,將設計加上註解