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.
Changes in Figma
Let’s make an update in the Figma component. Back in your Figma file:
Select the Title text layer and in the Text section, change the style to Bold.
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:
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
Update the component code
Let’s now re-import the component:
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.
Wait for the loading bar at the bottom right corner to finish:
Click
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.
Run the app to view the same updates 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.