fbpx

How to Use Templates in Figma: Colors

Templates can come with several features. Most will include tools to help you with the application or website design. This tutorial will explore the Colors feature included in some templates and how to get the best from it.

Templates are Cool

Templates can be maaaaaajor life saviors, and you will see why. In this case, we choose an IOS template to exemplify the Colors feature. However, it’s good to remember that it is best to stick to specific color palettes when it comes to application or web design, not only because you don’t need to overthink about it, but also because some color palettes do not match every screen device. 

4zH5N ONGpSV6rR C ZJxxc FZA2VhErAg80jBTMT27uVG2lUGHYAqfy 3CtOIMD 16DgPEKfgIQe0wuT7uCI ZSZ7Rn0Xmry7TZP5PJroDJlsMU4DKgXZLzXxBb4gMnb5F6yPHWx6N2M2vjoPMgOym2DI EFX76Kpdzt19XUoaeyMhY1PMo hPv3OMt

As you see in this example presented, the default colors are the ones that will generally match any screen device and what most iPhone apps will commonly use. If you use a color that is very different to Iphone’s identity colors, the app will feel unfamiliar with what the user is used to when it comes to Apple products. In most templates, you will see the color swatch and the hex code to copy/paste the same color in any project.  

NOTE: Remember that we go for what feels familiar to us as users. 

The full-color palette offers lots of options for us to play as designers. The range of colors is presented as how they’re seen in the light spectrum. So we have the Default option, the light color palette, and the dark color palette. 

Accessible Colors

Then we have the Accessible Colors, which present little variations from the Default colors. However, you can still use them, ensuring they won’t be away from the iPhone identity colors and will match any screen device.

And now we are done with this feature. Keep it simple. Keep it fun. Keep exploring Figma, and stay tuned!

user