How to Use the Android Template in Figma: Components

There are two kinds of UI designers: those that use Android Templates and those that don’t. If you identify as Team Android, this tutorial will show you the different components we can find inside Android Templates and how to use them briefly.

Components of Templates 

There are several reasons to use Templates. The main one is that it saves us a lot of time, and the second is that most of them go with the Android guideline for application design, meaning what the user is familiarized with visually. 

ayKqukZvvbEppgHt8I9Xrc AHwOVyWoA3M 9jgdc06NoAgcatP cxMAC uN1xxwMqkPKKOhTPPY3tw7CEZBNqDGSqgwEY3Ik0TV9aHQJwg M3Bbce7lwcOG9VzXRubUDiuuWdaQK5jOmW7FV

An open Template will look like this, and Components will be distributed by sections, as you can see. We can define them as the essential elements available to build the application design. Some Android Templates will include more components than others, but you should generally find the basic ones such as the Navigation Bar, the Bottom Bar, Sliders, Texts Fields, and so on.  

31AnAb AUgwl0c9S UsBLDThDU3WXuB2gVgKfgrFCPtKfI wPhR IdLb4Qi4amttjovya190kjaGOF9V TrZ5JeDwAQgsdL37HQHuUKPbjjhRw0Un7GEV3vrjNq5bUfoQYhmCp umsrJg8Vendxv5JLuiVydP12OL6zjr8hQ J2

You can check the Components at the left sidebar and work with them. From there, each component will display the specific elements attached to them.

How to Use Components

Now that you have selected a template, you can go to the left sidebar. To use the elements within the component, open the component, click on the element you want, and copy/paste it into your application design, or take the entire component group and repeat the process. 

r9EYfK91RO2EnubTubR2GcQdIaOpK D8XsvWcs1Dh6w4W8dbOV6Sir0q4lsAuhp9vXtuF4okH7zXuO3AhMb89ZTjiu9Gy1qvw2wOEGHRJji7M6E jIR1WLjTMDwXw8pFMl7l8f77jnEt6xFMmqGt4L1UEoOMbagj1wvF6Ayd0mjQSYlRcOh0ViUJ 2cZbduf

Another way to interact with them is to click once the component and get the entire group selected. If you want to make a deeper selection, double-click the component to access each element within the component.

Rn6ltKKQ5mVlF9sloueXl1gHhEE7C4MNmSXzVMUpFu5o cqtQDWJ6qKCqiMFaRMTM9y4MdafCBwwIc I hcnfMINh4gLwOgzfT9T77ZFBiSBmc648N4hYkChVeX1wya2aSSnhFjRyp6d60 SLeiUGYTKpUR1VdXBp6GAMWsr8z8TfrJN b gy8P8ew6rsQvr

In conclusion, we can do a great job by switching between implementing components from templates and customizing them for our best use. Stay tuned to learn more about Figma!