Creating my first Framer X code component

If you’re following my Dribbble or IG, you’d know I occasionally challenge my product design skills by creating concepts in industries I have zero experience. A part of that process is creating interactive prototypes of some user scenarios that are the result of the design user research. I was a long time user of prototyping in Framer Classic to create interactive prototypes, but in the middle of 2018, Framer X was released.

Framer X, powered by React, brought a new challenge to my skill set — if I wanted to continue using Framer, I’d have to learn React. So I did.

Though my knowledge is still basic, I want to share my findings and hopefully, it can help solve a problem you might be having.

By reading this article I assume you already have a basic understanding of React. This article highlights my process of using my React knowledge to build a Framer X code component.

What goes up…

A simple stepper that passes an increment and decrement function. Nothing fancy, but it solved a problem I had.

Step into my process

The simple structure of how I approached my challenge of creating the component.

1. Problem
2. Solution
3. Learnings

1. Problem

One of the flows from Gravity introduced a function where the user can add or subtract a monetary value to set as a budget or top up the account.

Gravity “Top up” screen

The addition and subtract icons (either side of the monetary value), would serve the function of incrementing or decrementing the amount on a tap interaction. Simple.

For my circumstance, there was no available component that I needed on the Framer X store, so I decided to build one myself. Horaay for me.

I had an exponential learning curve ahead, but luckily, I really enjoy programming and learning so, it was game time.

2. Solution

The component essentially passes two functions; increment and decrement, then updates the State to a variable named unit.

constructor(props) {
    super(props);
    this.state = {
        unit: 0
    };
}
Increment = () => {
    this.setState({unit: this.state.unit + this.props.stepperValue               
  });
}
Decrement = () => {
    this.state.unit === 0 ? console.log(“0”) : this.setState({unit:    
    this.state.unit — this.props.stepperValue});
}

An interesting thing happened as I was experimenting with the Framer Interface Properties. I discovered I could make the component customisable and more adaptable to the user needs. (That’s what this.props.stepperValue will pass as a data source.) When customising the code environment, it had an impact on the user interface where the changes could be made by a simple input.

The following section was beyond the scope of what I needed to do for Gravity, but I empathised for a designer, as a designer 😅 and considered, if I were going to use this over again with another instance from, say, a different product — I’d want more flexibility. So, I decided to write a little more code that could transform this freshly made local component and created something that would benefit others.

static propertyControls: PropertyControls = {
    iconColor: {
        type: ControlType.Color,
        title: "Icon color"
  },
    color: {
        type: ControlType.Color,
        title: "Color"
  },
    stepperValue: {
        type: ControlType.Number,
        title: "Stepper value"
  },
    size: {
        type: ControlType.Number,
        title: "Font size",
        min: 11
  }
}

The above code defines the four elements that can be customisable through the Framer X interface property controls.

• Change the colour of the icons
• Change the colour of the number value
• Change the value from X to the power of anything
• The font size for the number value

The final result can be found on the Framer X store.

Gravity “Set a budget flow” with integrated stepper component

Learnings

Though the component I created for my local, personal project was a success, I understand that it’s going to be a complex challenge to regain the level of skill I had with using Framer Classic. That being said, Framer Classic didn’t only empower my interactive design prototypes, but also empowered my ability to code. I’m really interested in React (I’m currently building my portfolio site in React and have aspirations to create some React Native apps) so immersing myself in the environment and having the exposure in my weekly workflow will only empower my engineering skills.

In reflection, there’s probably a lot more useful, customisable features that can be integrated within the stepper component, but there’s no reason for me to build any iterations off assumptions. So, if you have any requests, or ideas for improvement — let’s talk about it. Or, you can go and download the source files from GitHub and tinker away with the code yourself.

Thanks for reading. I hope you enjoyed and learned something from this article. Please leave welcomed feedback in the comments!

Hi, I’m Louis Moody.
I’m a product designer from Shoreditch, London.
Check out my Dribbble, Instagram and Twitter to see my UI designs, follow my process and to stay in the loop.