Components included in Templates won’t always fit the specific needs of our application design, and the good news is that we can always edit them how we like! This tutorial will show you How to Edit Components of Templates in Figma.
The fantastic thing about Templates is that they save us a lot of time by providing the basics to build from and no need to design from scratch, but when our design has something particular that isn’t available in the Template, we can always complement it with some edit.
NOTE: We suggest checking How to Use the Android Template in Figma: Components to look at each separately.
Let’s say we want to re-do the Alert (for IOS) and Dialogs (for Android) button that displays the exact text for both, which is, Are you sure?
What follows next is to select the entire group and copy it by pressing Comman+C/Cntrl C and paste it into the current design.
Oh no, sad face. It seems the component from the template is smaller than our design, has a different text, and the color is wrong, but we still need this component. What should we do? An easy way to edit is to directly click on the component and generate the change.
As you see, we added the actual Are you sure? Text, modified the action buttons, and applied some boldness to it. To change the size of the component, simply select the entire group, and by holding shift+dragging the mouse, the group will scale evenly.
What about changing other aspects of the component? When you select the component, a right sidebar menu will display, habilitating the entire options.
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!
