Project Download

Project Download

Fast paced design thinking

Why am I doing this?

To challenge myself, to see my design/animation skills develop and to commit to a repetitive task.
I’m going to start off with the goal to create 5 buttons in a week, then aim for a months worth and if I haven’t lost my mind, I’ll aim for a year.

The Rules

  • No Repeats.

 Every button must have a unique concept, visual identity, or motion style.

  • Similar ≠ Same.

 Effects or animations may share principles (e.g., easing, bounce), but each design must introduce a new idea or variation in behavior.

  • Categorical Exploration.

 Buttons should fall into clear categories (e.g., Minimal, Playful, 3D, Futuristic, Organic, etc.), showcasing range and versatility.

  • Number Every Creation.

 Label each design like an experimental series — Download_01, Download_02, etc.

  • Typography Reset.

 No identical typefaces two days in a row. Explore how typography impacts tone and personality.

  • Quality Over Quantity.

 Complex interactions deserve time. A “multi-day” button counts if it pushes boundaries.

  • Creative Health First.

 If burnout hits, pause. Revisit with fresh energy — this is a creative exploration, not a sprint.

Day 1

Day 1

Day 1

Played around the mouse enter / exit. Wanted to see how the interactions differ to hover state.
I experimented with timers, in component Rectangle 4 you you kept the cursor in the square then it would change to green.
If the cursor left the square before changing green it would turn red. I created a download button that uses these functions.
Once the mouse entered, an animation would play and if the cursor stayed in the button, the the downloaded completed, if it moved out the the download cancelled.

Played around the mouse enter / exit. Wanted to see how the interactions differ to hover state.
I experimented with timers, in component Rectangle 4 you you kept the cursor in the square then it would change to green.
If the cursor left the square before changing green it would turn red. I created a download button that uses these functions.
Once the mouse entered, an animation would play and if the cursor stayed in the button, the the downloaded completed, if it moved out the the download cancelled.

Day 2

Day 2

Day 2

I have previously experimented with buttons that had a moving stroke effect but I wanted to elevate this one. This is different as I created a circle with an angular gradient and masked it over a rectangle. I layered 2nd rectangle, removed the fill and added a stroke. I then added a 3rd rectangle and filled the center to give the angular circle an interesting path., I then created components and rotated the masked circle on a delay to give it a fluid feel.

I have previously experimented with buttons that had a moving stroke effect but I wanted to elevate this one. This is different as I created a circle with an angular gradient and masked it over a rectangle. I layered 2nd rectangle, removed the fill and added a stroke. I then added a 3rd rectangle and filled the center to give the angular circle an interesting path., I then created components and rotated the masked circle on a delay to give it a fluid feel.

Day 3

Day 3

Day 3

I saw a 3D animated button when researching and wanted to recreate it. It was relatively simple however I had issues with the button placement when I hovered over it. The button would expand to the left when I actually wanted it to expand from the center. To counter this, I created the button states on separate frames and used create component set.

I saw a 3D animated button when researching and wanted to recreate it. It was relatively simple however I had issues with the button placement when I hovered over it. The button would expand to the left when I actually wanted it to expand from the center. To counter this, I created the button states on separate frames and used create component set.

Day 4

Day 4

Day 4

I have previously experimented with Figma Draw and wanted to create a spinning download button similar to a vinyl record playing. While it looks basic, remembering how to complete this task took time. The key steps to recreate this is to Right click the text, outline stroke, union then flatten (both top right), go into Figma draw, right click and create stretch brush.

I have previously experimented with Figma Draw and wanted to create a spinning download button similar to a vinyl record playing. While it looks basic, remembering how to complete this task took time. The key steps to recreate this is to Right click the text, outline stroke, union then flatten (both top right), go into Figma draw, right click and create stretch brush.

Day 5


I really wanted to experiment with confetti. I was thinking of efficient ways to create confetti that wouldn’t take an hours to animate but I eventually gave up and used a plugin (plugins are the obvious answer dummy). Mocked up a button relatively quickly. Used a simple loading animation with confetti and a colour change to show the user the download has been completed.


I really wanted to experiment with confetti. I was thinking of efficient ways to create confetti that wouldn’t take an hours to animate but I eventually gave up and used a plugin (plugins are the obvious answer dummy). Mocked up a button relatively quickly. Used a simple loading animation with confetti and a colour change to show the user the download has been completed.

Create a free website with Framer, the website builder loved by startups, designers and agencies.