How to Use Templates in Figma: Editing Boxes and Contextual Menu

The wonderful thing about templates is that they include every element you need to create an accurate prototype. The Editing Feature and the Contextual Menu are examples of that. This tutorial will explain the purpose behind these features and how to get the best from them.

Road to Creativity

Templates save us time when adding elements included by default in every app and are part of our application design. Templates can consist of default elements such as switches, sliders, alerts, text fields, colors, keyboard, etc. Usually, they are visually aligned with the operative system you are designing for; If you are creating an application for IOS, trust that every element in the template will correspond to what iPhone devices actually use. 

NOTE: Don’t know how to open a Template? Go check How To Access Templates in Figma. 

Editing Boxes and Contextual Menu 

Why do I need to know about Editing Boxes and Contextual Menu?  Hold on there. We’ve seen people design these features from scratch without knowing they were actually available in the template, so it allows us to save you some time. First, let’s check the Template.

mIxW0WYXiN15LqWF0kZj51GeFbOyzFVmcSgtViAPt5TVHHr7JSlA 6Z Rk7tpFd5rVpMYmobfvl7eLXnBmfijQyEVKRP ZV0o 4cq21Py023eaLbIS5y 3bNVnD6yuPADfCP6fhX

This template shows an iPhone design. The Editing section will provide the options that fit the best IOS brand identity. For example, you can choose between dark-light mode and replace the text box with what you need. The section below shows how each option will display depending on your design.

Contextual Menu gives Context to What?

Long story short, Contextual Menu comes in handy when your application includes a section for Favorites, or you want to habilitate an option for the user to customize a section. For example, when you long press your phone's screen, a contextual menu appears with quick displayable actions, and you can quickly choose between them.

ig1tQpq78fZDLRjg2fssO7gSah3EAKwnJsKN8AwYnAyyKqdMCACV 9z91uZmr7DbhPaJ9ERnJYywIUh5TBQYgv84 R569fBFYF2HlKPim24k07i0tFNr76mTLyd4pq tHCgIYlt16l8FcNmYgdDPALAg0k5

In conclusion, only some templates will include these sections, but when they do, better to take advantage of them. So, let’s keep exploring more of these features and make our projects a reality with Figma. Stay tuned!