进行设计更新并进行传播

在本节中，您将学习如何在 Figma 中更改组件（在本例中，更改文本的格式），并通过在您之前的项目的基础上构建，观察更改传播到 Android Studio 中的代码库。

Before and after comparison

Figma 中的更改

让我们在 Figma 组件中进行更新。回到你的 Figma 文件

  1. 选择标题文本层。在文本部分，将样式更改为粗体。

    Title text selected and bolded in Figma

保存命名版本

现在，将更新后的组件集成到你的代码库中。为了确保开发人员使用你的组件的新版本，请重复保存版本的步骤。

  1. 如果 Figma Relay 插件尚未打开，请打开它。

  2. 点击与开发人员共享。

    Save to version history option in the menu

  3. 在与开发人员共享屏幕上，你可以在保存版本历史记录部分输入新的版本名称和描述。

    Save to version history option in the menu

  4. 在键盘上，按 Mac 上的CMD-L或 Windows 上的CTRL-L，将新链接复制到剪贴板。

更新组件代码

现在让我们重新导入组件

  1. 在 Android Studio 中，确保 Project 工具窗口处于Android 视图。然后右键点击app/ui-packages/hello_card/，并选择更新 UI 包。

    Update UI Package option in the context menu

    等待右下角的加载栏完成

    Android Studio loading bar

  2. 点击创建项目按钮 构建你的项目，并在app/java/com/example/hellofigma/MainActivity.kt的预览中查看更新后的组件。请注意，文本现在是粗体。

    Build button in the toolbar
    Preview of the component

  3. 运行应用程序以在模拟器中查看相同的更新。

    Run button in the toolbar
    App preview in the emulator

下一步

现在我们已经更新了设计并看到了生成的代码是如何更新的，我们可以将注意力转向使用内容参数注释我们的设计，这些参数允许我们的组件使用可变数据。