Figma Community Hero Interaction in Framer

Copy component

Copy component

Figma Community Hero Interaction in Framer

Copy component

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.

image of Nandi Muzsik
image of Daniel Destefanis

Created by

Figma Community Hero Interaction in Framer
Figma Community Hero Interaction in Framer
Figma Community Hero Interaction in Framer

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

The "Interactive Text" component and its variants.

the interactive text component

The "Interactive Text" component and its variants.

the interactive text component

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

The "Heading" component with its variants.

the heading component

The "Heading" component with its variants.

the heading component

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 decorative components

The "Plugin Items" component and its variants.

the decorative components

The "Plugin Items" component and its variants.

the decorative components

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

The "Main Component" with its variants.

the main component

The "Main Component" with its variants.

the main component

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction