Hover Button with Design Components in Framer X.

Here is what we are creating with design components in Framer X:

A Framer X Code Component made with design components

1. Create the 3 button states and make them design components.

  • Using frames, design and create the different states for the button.
  • Name the buttons Normal, Hover, and Click.
  • Make the buttons design components.
Using frames create design components named “Normal”, “Hover”, and “Click”

Select the text override field in each design component and name it text.

Click the master override check box and name the field “text”
Note: The design components must be named exactly Normal, Hover, and Click for the code below to work.

2. Copy & paste the code below into a new code component and save it.

🚀 Boom! Just like that you have a working hover button based on your design components.

Create the hover button code component

3. Explanation of the code.

Note: There are multiple ways to do a hover component. This is a brief explanation of one of those ways (the code shown above).

Line 4: This import is bringing in the design components and allows them to be used in the new code component. Any frame that is a component can be imported from the the canvas, just use “./canvas”

Line 6 -10: Here we are defining a new variable called states. This variable is a dictionary. The key just denotes the name of the button state and the value is the actual design component imported from the canvas.

Line 13 - 16: Here we define a new state variable with define: Later in the render() function the correct hover state will be applied to this variable.

Line 17–26: This block of code is defining the overridable properties in the side panel of Framer X when the hover button is selected.

Line 29 - 51: This runs in the render() function and is updating the default properties of the design components. text= is setting the text of the code component to this.props.text which represents the text that was defined in the code button property panel. Setting the width and height equal to this.props.width and this.props.height makes the design component resize properly.

Line 53 - 63: This is where the magic happens. The code component is returning a <div /> where the state changes to the appropriate design component on the canvas depending on hover. Using this.setState and assigning the proper state to the define: variable makes the component come to life when hovering over it!

4. Download the Framer X file

🤙 Enjoy | Show me what you are making! Post your rebound on Dribbble.