Dynamic Chart In Figma | How to use Variables, Variable modes, Single variable multiple usage.

Dynamic Chart | Bar chart using figma variables | Line chart using figma variables | Table with figma variables | variable modes. Figma file link - https://www.figma.com/community/file/1480925695476863851/interactive-dynamic-chart In this video: How to use local variable in figma How to use variable modes in figma How to use single variable in multiple place / multi usage. Local variable - #number variable, #string variable, #boolean variables How to create interactive chart/table How to use overlay / modal window How to assign variable to bar height How to create bar chart component with variables How to create line chart with variables Interactive dynamic chart as per table value it is designed with variables, variable modes, and used single value to create main chart, table and overlay chart. here you can find single variable value for multiple usage. variable and interactions:- In this example there type of variables are used #Number variable #String variable #Boolean variable Interaction is very easy, used boolean variable for Overlay chart to show/hide other variable values. Overlay chart will appear when click on table column with chart icon. Variable Mode: Variable modes made this very easy to create dynamic chart as per table values. only need to assign value to table column and entry on local variable list. Once value is assigned and local variable creation is done Go to appearance and change the variable mode, it will automatically change the values as it is entered in different mode. Dynamic Chart Bar chart is crated as component and the height of bar is assigned the variable, the variable which is entered in local variable collection. Overlay chart The circle / marker / ellipse is created in auto layout. First create bar and keep ellipse inside the bar and convert to auto layout assign variable to bar height The circle / marker / ellipse will move as per assigned value to height Finally apply variable mode