Deletion

I challenged myself with advanced prototyping involving variables. The buzz around Figma variables are quite loud, and I'm well aware of the dimensions they unlock in prototyping. However, for this challenge, I felt that Figma might not be the right tool yet. So, I opted for ProtoPie, which offers advanced interaction properties including variables and functions.

How I got the idea for the UI?

A few days ago, I was watching some Webflow tutorials and noticed its seamless UI for project deletion. I decided to attempt recreating a similar UI in my day-to-day design tools. I replicated the design in Figma and even attempted a deletion animation (link in comment). Unfortunately, I faced issues exporting it via the LottieFiles plugin.

Process

For me, Protopie stands out as the best tool for prototyping. I've used it extensively and am well-acquainted with its powerful features, especially functions and formulas. To execute this interaction, familiarity with functions is advantageous and I use to code when I'm not designing. To delve deeper into how functions operate in Protopie, check out their documentation.

Here's how I initially planned it:-

• Generate a random integer within a specified range.

• Convert the number to ASCII code and extract letters from it.

• Concatenate the letters to form a random string.

• Utilise this string for deletion.

However, Protopie lacks the necessary conversion function. So, I chose to set the string as "delete-" and concatenate it with the random number (which must be converted to a string beforehand).

Consequently, I ended up initialising just 2 variables: one for random number generation and another for reducing its value. Of course, I incorporated multiple conditional logics for properties like color, opacity, movement, etc.

I'll be publishing a detailed blog outlining each step of this interaction. I'm open for feedback and suggestions about this interaction!

Thanks for reading 🙏