Figma is free to use. Sign up here: https://bit.ly/3msp0OV

In this two part series, we're using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time.

In this first video, we're going to set up the foundation of our interaction.

To follow along, grab a copy of the design from the community file here:
https://www.figma.com/community/file/...

Check out the written mini projects from the Figma Help Center:
Create an onboarding flow with advanced prototyping: https://help.figma.com/hc/enus/artic...
Create a loading animation: https://help.figma.com/hc/enus/artic...
Create a responsive card with auto layout and constraints: https://help.figma.com/hc/enus/artic...

To learn more about the advanced prototyping features, check out our video tutorial on advanced prototyping (   • Figma tutorial: Prototype with variables  ), the Help Center article (https://bit.ly/46r2JsX), and play with the Figma community playground file (https://bit.ly/3JhgTT9) created by our Designer Advocates.

If you're new to variables, check out the "Intro to variables" video tutorial here:    • Figma tutorial: Intro to variables  

If you're new to prototypes in Figma, check out the prototype tutorial playlist here: https://bit.ly/3NC30l7

00:00 Intro
01:08 Design breakdown
02:04 Set up the volume variable
03:15 Set up the max volume variable
04:46 Set up the increment variable
05:25 Prototype the plus button
06:20 Preview the prototype
06:53 Conditionals
07:00 Plus button conditional
07:42 Prototype the minus button
08:57 Minus button conditional
09:37 Outro

____________________________________________________

Find us on ⬇
X (formerly Twitter):   / figma  
Instagram:   / figma  
LinkedIn:   / figma  
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems