Concept

I had an idea to design a site where you could zoom in and out on content as a form of navigation. This would have been pretty easy in Flash or JavaScript, but I wanted to challenge myself by prototyping it in Figma using my about me site as a reference.

Implementation

Getting the components and animations to scale appropriately was a challenge as Figma is not built to handle complex interactions. I had to make sure all my components could scale during animations and interactions.

Marquee animaton & integration

One of the most difficult interactions was getting the marquee to keep animating on hover, which should show a text masked animated gradient when doing so. In the first few attempts the mask would break or the timing of the animation would be off when swapping between the black mode and gradient hover. I finally found that I needed to have the two animation components, one of the black marquee and one of the animated gradient, in the same frame and do a component swap on hover and another with a mouse leave interaction to reset the color. Essentially both animations would be going in the background, even thought you only see one at a time, to allow everything to sync.

Wires & Interactions

I wanted to provide keyboard navigation so I had to turn off many component interactions as components scaled or were in different parts of the site to remove unexpected interactions. I also needed to make sure certain frames reset their state to maintain consistency across views. I had to fudge some interactions such as the keyboard navigation tab, but for the most part it feels natural.

Variables

Finally, variables made it easy to create a dark mode and even make my navigation text smart when changing modes. I also used variables to change shadows and glows between modes for floating elements.

Conclusion

There’s some Figma animation and prototype glitches because of all the scaling it has to do, but once it loads into cache, the animations are a lot smoother, although this gives me pause considering complex animations in Figma Slides. Unfortunately the Figma prototype (or at least this one) causes Figma to crash and reload on mobile, so desktop only. For a weekend project, I'm pretty happy with how it came out.

View the experiment: abl.design/exp/

Thanks for reading.