If you haven’t used templates before, we will give you reasons to do it. In this tutorial, we will show the Switches and Sliders aspect of the template and how to implement it into your design.
Two major reasons to use Templates: #1 It saves time, and reason #2 Practicality. There are functions aside from the application design that you don’t need to spend time drawing or implementing, such as the tutorial’s subject. There’s no other way to better describe how these features work and their use. When it comes to the application design, there’s information that needs to be visually as straightforward as possible, and then Switches and Sliders go into the scene.
NOTE: To exemplify, we will use an iPhone template, but most templates should include these features. If it’s not the case, copy/paste them from another template.
The use of these features will go accordingly to the application design. For example, let’s say the application requires the user to allow permissions; you can add a switch to the prototype version to demonstrate how that function works. The template will include both light/dark mode switches following the identity -in this case- of iPhone and IOS applications.
NOTE: Important to follow the visual identity. Remember, the user goes for what feels familiar, and we want our application or web design experience to feel as organic as possible for them.
Sliders have a more comprehensive range of possibilities. This feature is handy when we have interactive content with more variables than On/Off stuff. For example, let’s say our application includes a podcast, then at the prototype, we add a slider for the user to go back and forth on it. We can also add sliders if there’s an attribute with a size like text or controlling volume if the application plays music.
Does your application work with any of these attributes? Please go and check some templates and get creative with switches and sliders now that you have learned their function. We promise they will save you time! So stay tuned, and let’s keep exploring Figma.
