Get started with Framer X in under 10 minutes: Part One

Forms are one of the main elements that you would want to test in your product from time to time, and input fields are one of the main parts of it. We will talk a bit in a second part about the optimization of your testing, yet for now, we will focus on engineering input fields that will actually work. Below, you’ll see an example of the first screen which will accept the data from our users and store it for our further usage.

Framer works with overrides and today we will build one. You can read about the general concept in the documentation here. For now, I will focus on the practical part of creating one to build the solutions we need.

The first step is installing Framer X and navigating to the market to download an input field created by Benjamin den Boer. While we will be installing them, we can navigate to the “components” section and create a new component.

Now we have everything set up to start creating our first component. Let’s navigate to the “components” section and click on “create”. Check out the block of code below:

In the beginning, we are importing the library from Framer.

For each component, we describe every possible parameter (a type of entrance properties for our function) which will be used in displaying components. In this case, it’s displaying text as a string which we will implement in the next lines of code.

Block n.2. Now, we create our “Text” function (component) which receives “props” as parameter with type Props described previously. In return, we use the Frame component to render text from props parameter. Also, we can set ‘style’ property to the Frame component to style the returned view.

Block n.3. Framer does not know anything about parameters that we are using, so we need to give him some adjustments which help in setting up components furtherly. In this block of code, we add property controls to our component “Text”.

addPropertyControls function receives two arguments: first, the name of your component; and second, an object that defines controls for different properties. In our case, it’s a ‘text’ property. More details, here.

We’ve finished our first file and now it’s time to create another one.

Now we have everything set up to start creating our first input field component in which we will be translating data gathered from the user.

Three steps which we need to execute:

1 review of the interaction interface

2 component building

3 reviewing this component for Framer

Step 1. In the beginning, we need to create an override for the input field. For interaction and synchronization of data we are using a type of data “data”. That’s an extended object with which we will be working later.

Step 2 (block of code above). The next step is to create an input function. That’s a function of object synchronization “data” and component on which it will be hanged on, in this case, on a callback action (on value change) appears to change in a synchronization object — “data”.

The last step is to create a function of object synchronization “data” and created the component “Text“.

Now, we will need to apply our overrides on components in the design tab by simply selecting the name of the override, in this case, “input” and “text”.

As a final step, choose our prototype frame and click “Preview”, enter text and check how it displays in a separate field. At this step, we can display results on another frame or the current one. Switch to the next page can be done in the same way as in most of GUI editors, by linking pages that you need.

The whole prototype can be found here. In our next lessons, I will show you how to apply analytics to the prototypes you’ve created.