Introduction
Prototyping your design is an easy way to show the intent of your design and how each element or component will interact. Being able to show micro-interactions that happens in-between the major interaction goes a long way to show how intensional you are with communicating your design. We in most cases during prototyping of a web design we forget to demonstrate the use keyboard in our design.
In this article, I will lay out guided steps on how we can create an interactive keyboard in Figma that can be used during our design presentation.
Creating Text Input Field
When designing an input field as a beginner who isn't used to auto-layout in Figma you might quickly want to use grouping instead but for the course of this guide and the steps involved wed be using auto-layout to create our input field.
Let us get right into it. For the input field, I’d use the search input field, you can use anyone you're okay with.
Activate the text tool from the toolbar at the top of Figma or by simply pressing “T” on your keyboard, you can either click once on your canvas board to create a text field or hold and drag to create a text field box. Type in “Search”, and click outside the text box to end the typing. Set your font size, font weight, and font color. With your text still selected press “Shift + A” on your keyboard to add auto-layout, add the search icon before the search text, select both elements, and create an auto-layer frame.
Adding Components and Variants to the Text Input Field
You can either create all the variants needed before making them into a component set or make the first search input field into a component and add variants.
Creating the First Components and Adding Variants
With the created search box selected, create a component using the component icon at the top (toolbar) of Figma. With the created component still selected, you'll notice the component icon changes to a plus sign, click on it to add a variant, and remain the variant for easy identification. You can easily add more variants by clicking on the plus (+) icon that shows or by using the keyboard shortcut “Ctrl + D”.
For the new variant created change the search text to a verticle bar “|” sign to indicate the text cursor. From the third variant, choose the word you want to input into the search bar and put one alphabet after the other into a new variant. Say you want to input the word “Flower”, your third variant will have the letter “F” with the verticle bar “|” sign after it (F|), and the fourth variant will have “Fl” with the verticle bar “|” sign after it (Fl|), continue doing this till the word “Flower” is completely spelled, leaving the last search box as “Flower|”.
Creating all the Variants and Making A Component Set
Having the first search box created, duplicate it and change the search text to a verticle bar “|” sign to indicate the text cursor, duplicate that current search bar, and put the first alphabet of your search word before the verticle bar “|” sign (F|). For each new search box created add the next alphabet of your search word, repeat this action till you have spelled your search word completely having your last search box with “Flower|” as its input text.
With all your search boxes selected create a component set, and ensure that each search box is properly named for easy identification during prototype linking.
Creating The Keyboard Interactions
To begin creating the interactions, switch your board from design to prototype. Select the first search box and add an interaction, the first action will be “on click” with a transition of “change to” to the next search box which is the one with just the cursor. While the second search box is active, add interaction with the action as “key/gamepad” with a transition of “change to” to the third search box.
Continue adding interactions to all the remaining search boxes leaving their action as “key/gamepad” and their transition as “change to”. At the last search box where is word is completely spelled, instead of using an alphabet, use the “enter” key so it directs you to a new page, (you can design a simple page to link your last search interaction to test).
Testing the Interaction
To test whether the prototype is working as expected, create two desktop frames, a blank one where the search box component will be dropped and the second one with a color change or text in it where the last keyboard action (Enter) will link to.
Using Figma prototype preview, test that the connection works as expected.
Conclusion
Creating an interactive keyboard is a practical way to showcase the functionality of your design to developers and stakeholders. By following this guide you can create an interactive keyboard for your design. Mastering these techniques will enable you to create more engaging and realistic prototypes in Figma, enhancing your design presentations and user experience.