How to Edit Components of Templates in Figma

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. 

A Little Bit of this, a Little Bit of That

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. 

How to Edit Components

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? 

71eR7W15nGatknATFD Twxi0PNYBYVnRdM1hMhi4lShtRmGdJFfSrmCtgT7ZMGuZgIAe 9BX eVbKwDcS 8Th3DKU4rrD9aV0vg 6ByIIg3OkJNNENeJ 7BTE7Tg57yCl Is O1 IzvgPfs2JzZFt799JSEis8XdFJz012b2IODI8tfNscmBuv3An42mvVhO

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.

ShR1AY6Fp4derbh0Qm0JgHdB 1DUa0eNvM1AHvalxsHw8 1ZKs SJztEfHVuXiqzO7O1vG2s2x j58Os8fugHhP6AvDZuSn6hIeczAPKInxvkG28gPIkIWibQ

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. 

4GwWcfDALRvSrF7z kijkdaEdJkNFUDo3gKDu4r3s5ONz gbImqI0ZLa5LHplyq4pspEECOHxv0S0Jw6pmoq3zcBy5jO4oMzDWEsr8 3cpPWXS4EKvH8U7FNX7yu7n3b

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. 

rR90PGws QvgZWZfNBvQ7vnFBhthImi8OSuSnRLLD2QFdHJJU rCLuMDSUPmlLBqiJW92BL54BgyE897JoEzzHl9

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!