Figma Progress Bar Prototype & Walk-Through

Figma progress bar prototype with walk-through

The designers at Three29 have been diving headfirst into Figma’s new variables features since their recent launch. We’re continuing to pass along this knowledge to the Community with a new Figma Progress Bar Prototype walk-through. 

We are exploring ways of utilizing these tools for animation, prototyping, and implementation into our existing process. These capabilities will allow us to show more articulated designs earlier in a project for the same budget. They will also give greater clarity to both clients and development before resources are spent building a live site or application.

Combined with the new development mode feature, the evolution of this design tool is empowering creative teams to do a lot more with the same resources. As with any new tool in Beta, we’ve also encountered a few bugs along the way.

Clear Progress Bar Prototype Objectives

We started with a few simple objectives for an animated prototype:

  • A percentage loading counter that increases from 0% to 100% 
  • A progress bar animating from a sliver to a full bar at the same time the counter reaches 100%
  • A ‘Loading…’ text field that would include an animated elipsis and change to ‘Complete’ when the first two conditions were met. 
  • When all three conditions are met, execute an animated change.

We’ve detailed the step-by-step process for creating your own Figma progress bar prototype in our Figma Community file. To help anyone new to Figma Variables, we’ve documented a substantial bug to consider when taking our prototype a step further. We’ll be updating our community design documents to reflect the state of these bugs as they are resolved.

There are some powerful conditional expression tools in this latest Figma Beta release, but they’re still working out the kinks!