Advanced prototyping, auto layout, animation, using variables скачать в хорошем качестве

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.