Advanced prototyping, auto layout, animation, using variables
Let's build an advanced prototype using auto layout, smart animate, and variables. Use Figma features to build clickable play, pause and volume controls, a playback status bar, an animated sound icon, and a working elapse timer. There is something here for anyone interested in building realistic prototypes.
0:14 - Making the buttons
2:31 - Volume controls
5:41 - Playback status bar
7:42 - Animated audio icon
10:06 - Working elapse timer
13:22 - Putting all the pieces together
NOTES (as of March 22, 2024): Figma now allows values of Zero (0). Before, if a variable was set to 0, it would default to 1 (one pixel) when you applied it to the width or height of an object. I set the volume to go up and down 16, this is why I place the volume level layer at x=(-16) instead of 0 and why the conditionals are set at 16 (min volume) and 272 (max volume) to compensate for this single pixel. NOW that it will display zero (invisible) and not have a single 1 pixel visible in the volume bar, we can modify this. The volume level layer can now be placed at x=0; conditionals can be set to 0 (min volume) and 256 (max volume). This makes the math easier and make sense.
This is also why the playback layer is placed at x=(-1). Now that it will display 0, we can place that at x=0 as well.