Having shown my Rocket component prototype in Figma and received positive feedback during the class critique, I’m happy to go ahead and now transfer that component into Framer.

I soon discovered that even though you can import just about anything from Figma into Framer through a Figma Plugin, components are the one thing that cannot be transferred.

Therefore I had to start over again, beginning with importing each section of the rocket separately from Figma into Framer

and then reconstructed the primary variant (in Framer);

The next step was very similar to what I had to do in Figma, creating different variants which branched off from the primary variant;

Then I ran into some problems with Framer. In Figma, I could select for the different variants to be shown when the user’s mouse “hovers “ over the corresponding sections in the primary variant.

However, in Framer, I could only select the different variants to be shown “ on click “. This means the user has to click on the corresponding sections in the primary variant in order for a variant to be shown. The problem is that without the ability to show change upon hover, how will the user know that the page is interactive and they can click on the labels/rocket? The importance of interactive visual feedback was taught to me by my teacher during the class critique, and I needed to find a way to let users know that they can interact with the rocket.

Initially, I thought of a solution where I write - “ Click on the rocket/labels! “ on the top of the page in order for the users to know that they can interact with the component.

However, after some experimentation, I realised that I could make use of embedded components ( components within components)

Below is an example. The Saturn V rocket and its variants are the “top” component;