Make and propagate design updates

In this section, you will learn how to change a component in Figma (in this case, change the formatting of the text) and see the changes propagate to the codebase in Android Studio, by building on your previous project.

Before and after comparison

Changes in Figma

Let’s make an update in the Figma component. Back in your Figma file:

  1. Select the Title text layer and in the Text section, change the style to Bold.

    Title text selected and bolded in Figma

Save named version

Now let’s integrate your updated component into your codebase. To ensure that developers use the new version of your component, create a new named version:

  1. Go to File > Save to Version History, and then enter a title and description for your new version.

    Example Title: Hello World Card V2

    Example Description: Added text styling

    Save to version history option in the menu

Update the component code

Let’s now re-import the component:

  1. In Android Studio, make sure the Project tool window is in Android view. Then right-click on app/ui-packages/hello_card/, and select Update UI Package.

    Update UI Package option in the context menu

    Wait for the loading bar at the bottom right corner to finish:

    Android Studio loading bar
  2. Click Make Project button to build your project, and see the updated component in the preview of app/java/com/example/hellofigma/MainActivity.kt. Note that the text is now bold.

    Build button in the toolbar
    Preview of the component
  3. Run the app to view the same updates in the emulator.

    Run button in the toolbar
    App preview in the emulator

Next step

Now that we've updated a design and seen how the resulting code is also updated, we can turn our attention to annotating our design with content parameters that allow variable data in our components.