How to Use Templates in Figma: The Keyboard

Updated on: October 20, 2022

An essential aspect of templates will include the Keyboard. Important to point out that not every application or website design has one. If it’s your case and you want to know more before using one, you got the right place. This tutorial will teach you how to use the Keyboard feature on templates.

For us to Use it

If the template includes the Keyboard feature, it will come in handy since you won’t have to do it on your own or search for references to do it. In addition, templates usually will give you the tool just to copy/paste, which saves us a lot of time.  In this case, we selected an IOS template that includes this feature, so let’s take a look at it briefly.

NOTE: Check How to Access Templates in Figma if you don’t know how to.

The first will be to select a Template, and you can preview what kind of features include so you need to open them one by one and look for the Keyboard.

T2PodKgMNbDWYG pCZM7yS5vHKFdftHGCOAdwHEMHyPYQRtCWUeyE t9xWhBjPZf8b5o2mJieVoVShm j Tyb62gi6QVtYN78g8RSn6UYx1uy03IkNTW 6aqHIUPuRlDU11S7qGIpnuKoxvUkPWqXiGx2kSQBiYoD2RRSF

A world of possibilities opens in front of you. Inside the keyboard, the features available will include the  Key Container, the Key, and the Molecules, which will contain the default Keyboard.

How to Use the Keyboard 

The Key Container literally means what contains the letter and its color. For example, when you press a letter on the keyboard, it turns a different color, and that’s how you know you pressed the letter, so this feature will provide the standard colors for the Key Container. In this case, since we chose an IOS template, you will see the standard color of the keyboard in IOS applications, how it looks when you press the letter, how it looks in dark mode, and if some options such as enter or shift have a different color too. In addition, the Key feature will have a similar function, showing how some special characters will look.

GB9d8g9r5omgT7WG8tWlvYOF52MYDlRyA9 1qJst 8O3fWO3Wohz8Xb081eZTGy6yreGHF5sO0JF 6YatfMKyz0Kp1l07JHcwkRd2vC4JUBPUc zvnZ92vMzqtJcUjp27ixvwH6iC 0RNmDMFsXHXlYMvXPkuydjLlE SWV3UcMGSf7h 2raf4k52G7l

And finally, we have the Molecules. This feature will provide the whole keyboard for you to copy and paste. In addition, it will provide Light and Dark mode, Uppercase, lowers case, symbols, and so on.

And that’s all you need to know about the Keyboard feature when using Templates in Figma. Stay tuned for more.

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram