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. In the Text section change the style to Bold.

    Title text selected and bolded in Figma

Save named version

Now, integrate the updated component into your codebase. To ensure that developers use the new version of your component, repeat the steps for saving a version.

  1. Open the Figma Relay plugin if it's not already open.

  2. Click Share with developer.

    Save to version history option in the menu
  3. From the Share with developer screen, you can enter a new version name and description in the Save version history section.

    Save to version history option in the menu
  4. Type CMD-L on a Mac or CTRL-L on Windows, on the keyboard, to copy the new link to the clipboard.

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.