Interaction
Figma Community Hero Interaction in Framer
This is a Framer recreation of the interaction seen on the Figma Community page hero section. The concept was originally designed by Daniel Destefanis. Feel free to remix the project and see how something like this can be created in Framer without writing any code.
About the resource
Creating such interactions in Framer requires zero coding knowledge. I simply drew rectangles on the page and utilized components and variants with interactions in a smart way.
The way I usually start these projects is by creating all the necessary components I'll need and also creating variants for them.
For example, here, I knew that the interactive parts of the text could be a component with a "Default" variant and a "Hovered" variant where the color changes to blue.
About the resource
Creating such interactions in Framer requires zero coding knowledge. I simply drew rectangles on the page and utilized components and variants with interactions in a smart way.
The way I usually start these projects is by creating all the necessary components I'll need and also creating variants for them.
For example, here, I knew that the interactive parts of the text could be a component with a "Default" variant and a "Hovered" variant where the color changes to blue.
About the resource
Creating such interactions in Framer requires zero coding knowledge. I simply drew rectangles on the page and utilized components and variants with interactions in a smart way.
The way I usually start these projects is by creating all the necessary components I'll need and also creating variants for them.
For example, here, I knew that the interactive parts of the text could be a component with a "Default" variant and a "Hovered" variant where the color changes to blue.
The "Interactive Text" component and its variants.
The "Interactive Text" component and its variants.
The "Interactive Text" component and its variants.
Once I have these variants within a component, I can connect them with interactions if needed. In the case of the "Interactive Text" component, I connected the "Default" variant to "Mid" on mouse enter, and from "Mid" it goes to "Hovered" automatically (appear trigger) with a 0.15s delay. I created the "Mid" variant because I wanted to add an extra light shimmer effect on top of the simple color change.
Heading component
The next component I needed was a "Heading" component that wraps three "Interactive Text" components (libraries, plugins, icon-sets) and regular non-interactive text layers. These layers are just placed right next to each other within a stack with a horizontal direction and wrapping set to "yes," so once I set the width of the component to something smaller, the text elements will nicely break into multiple lines.
Once I have these variants within a component, I can connect them with interactions if needed. In the case of the "Interactive Text" component, I connected the "Default" variant to "Mid" on mouse enter, and from "Mid" it goes to "Hovered" automatically (appear trigger) with a 0.15s delay. I created the "Mid" variant because I wanted to add an extra light shimmer effect on top of the simple color change.
Heading component
The next component I needed was a "Heading" component that wraps three "Interactive Text" components (libraries, plugins, icon-sets) and regular non-interactive text layers. These layers are just placed right next to each other within a stack with a horizontal direction and wrapping set to "yes," so once I set the width of the component to something smaller, the text elements will nicely break into multiple lines.
Once I have these variants within a component, I can connect them with interactions if needed. In the case of the "Interactive Text" component, I connected the "Default" variant to "Mid" on mouse enter, and from "Mid" it goes to "Hovered" automatically (appear trigger) with a 0.15s delay. I created the "Mid" variant because I wanted to add an extra light shimmer effect on top of the simple color change.
Heading component
The next component I needed was a "Heading" component that wraps three "Interactive Text" components (libraries, plugins, icon-sets) and regular non-interactive text layers. These layers are just placed right next to each other within a stack with a horizontal direction and wrapping set to "yes," so once I set the width of the component to something smaller, the text elements will nicely break into multiple lines.
The "Heading" component with its variants.
The "Heading" component with its variants.
The "Heading" component with its variants.
As you can see, the "Heading" component also has a mobile variant, so the design will be nicely optimized for mobile devices just by switching to this variant at the phone breakpoint.
Decorative component
Okay, so what else do we need? Some more components for the elements that display around the heading when specific "Interactive Text" components are hovered.
I created three separate components for each text (libraries, plugins, icon-sets).
In each component, I placed the little icons and logos in their appropriate positions and created "Hidden" and "Shown" variants.
In the "Hidden" variant, I simply scaled down the items to 0.5 and changed their opacity to 0. Then in the "Shown" variant, I changed the scale back to 1 and the opacity to 1 as well.
As you can see, the "Heading" component also has a mobile variant, so the design will be nicely optimized for mobile devices just by switching to this variant at the phone breakpoint.
Decorative component
Okay, so what else do we need? Some more components for the elements that display around the heading when specific "Interactive Text" components are hovered.
I created three separate components for each text (libraries, plugins, icon-sets).
In each component, I placed the little icons and logos in their appropriate positions and created "Hidden" and "Shown" variants.
In the "Hidden" variant, I simply scaled down the items to 0.5 and changed their opacity to 0. Then in the "Shown" variant, I changed the scale back to 1 and the opacity to 1 as well.
As you can see, the "Heading" component also has a mobile variant, so the design will be nicely optimized for mobile devices just by switching to this variant at the phone breakpoint.
Decorative component
Okay, so what else do we need? Some more components for the elements that display around the heading when specific "Interactive Text" components are hovered.
I created three separate components for each text (libraries, plugins, icon-sets).
In each component, I placed the little icons and logos in their appropriate positions and created "Hidden" and "Shown" variants.
In the "Hidden" variant, I simply scaled down the items to 0.5 and changed their opacity to 0. Then in the "Shown" variant, I changed the scale back to 1 and the opacity to 1 as well.
The "Plugin Items" component and its variants.
The "Plugin Items" component and its variants.
The "Plugin Items" component and its variants.
Putting it all together
Once I had every single component set up, all I had to do was create a "Main Component" that wraps every component and has all the variants we need: "Default," "Mobile" for smaller devices, and one for each hover state: "Library," "Plugins," and "Icons."
Putting it all together
Once I had every single component set up, all I had to do was create a "Main Component" that wraps every component and has all the variants we need: "Default," "Mobile" for smaller devices, and one for each hover state: "Library," "Plugins," and "Icons."
Putting it all together
Once I had every single component set up, all I had to do was create a "Main Component" that wraps every component and has all the variants we need: "Default," "Mobile" for smaller devices, and one for each hover state: "Library," "Plugins," and "Icons."
The "Main Component" with its variants.
The "Main Component" with its variants.
The "Main Component" with its variants.
Once these are set up, I can connect these variants with interactions. For example, when we hover over the "libraries" text, we transition into the "Library" variant, and when the mouse leaves the "libraries" text, we transition back to the "Default" variant.
Once these are set up, I can connect these variants with interactions. For example, when we hover over the "libraries" text, we transition into the "Library" variant, and when the mouse leaves the "libraries" text, we transition back to the "Default" variant.
Once these are set up, I can connect these variants with interactions. For example, when we hover over the "libraries" text, we transition into the "Library" variant, and when the mouse leaves the "libraries" text, we transition back to the "Default" variant.
