interactive quiz system with dynamic scores and results in figma using variables | #figmatutorial
how to create interactive quiz system with dynamic scores and results in figma using variables. figma file link - https://www.figma.com/community/file/1338984231382370065/quiz-systm-with-score-card-using-figma-variables In this video will see figma local variable figma variable mode figma pass through layers figma assign / apply variables figma show/hide features figma interactions Dynamic score calculations Dynamic result of quiz figma reusable components In this video, I have explained how to create interactive and dynamic quiz system using figma variables technique. Creating card with question and answer as options like a, b, c Selecting right answer will increase / update the quiz score same way if selecting wrong answer it won't impact on the score board. While selecting right answer it will display "Right Answer" as well as lock the card. Same way if it is wrong answer it will display "Wrong Answer" as well as lock the card. Footer having two buttons like "Try again" which will reload / refresh the quiz to play again, and "Result" will show your achievements like if all answers are right "well done", if only few are right "Try Again". Here in this Trick and Tips we can reuse the interactions of one card to another using variable mode. if we are increasing number of card (Questions) need to just increase / add the mode and pass through mode / switch the mode. Score panel will be separate collection as it is impacting on overall Quiz System. For score we will create number variable and for result/achievement we will use Boolean variables to show and hide as per the score board. Figma Community free resources Table Row Filter using advanced figma variable concepts https://www.figma.com/community/file/1338986853260089110/table-row-filter-using-advanced-figma-variable-concepts Table with Pagination controls https://www.figma.com/community/file/1338985680694973202/table-with-pagination-controls Multiselect widget using figma variables https://www.figma.com/community/file/1338978506689491709/multiselect-widget-using-figma-variables Data Table With Row Selection And Deletion https://www.figma.com/community/file/1338969294393519847/data-table-with-row-selection-and-deletion Bar Chart Using Figma variables https://www.figma.com/community/file/1338965256845684447/barchartusingfigmavariables Dropdown using figma variable concepts https://www.figma.com/community/file/1338974782290532078/dropdown-using-figma-variable-concepts CheckBox List Using Figma Variables https://www.figma.com/community/file/1339774171860048309/checkbox-list-using-figma-variables Toggle Switch UI Kit https://www.figma.com/community/file/1379640815868546320/toggle-switch-ui-kit Date Picker as Dropdown https://www.figma.com/community/file/1388584634619363691/date-picker-as-dropdown interactive Line Charts https://www.figma.com/community/file/1388868904250405345/interactive-line-charts Multiple Modal window using figma variables https://www.figma.com/community/file/1338976840473959158/multiple-modal-window-using-figma-variables Donut Chart using variables https://www.figma.com/community/file/1391698705295426667/donut-chart-using-variables Interactive Star Rating Component https://www.figma.com/community/file/1391748746430137472/interactive-star-rating-component Multiple Line Chart https://www.figma.com/community/file/1392729402929613649/multiple-line-chart interactive accordion component https://www.figma.com/community/file/1396823334264862920/interactive-accordion-component Tab navigation Component https://www.figma.com/community/file/1400974695221428827/tab-navigation-component Tab Control with Radio buttons https://www.figma.com/community/file/1402003968974672985/tab-control-with-radio-buttons Curved line chart / graph https://www.figma.com/community/file/1404218708556371192/curved-line-chart-graph Pyramid chart https://www.figma.com/community/file/1409398915763540199/pyramid-chart Stacked bar chart using figma variable and components https://www.figma.com/community/file/1417967695297172204/stacked-bar-chart-using-figma-variable-and-components scroll carousel https://www.figma.com/community/file/1422584425566119206/scroll-carousel Table component in figma (3 variant to create components) https://www.figma.com/community/file/1422200201892752453/table-component-in-figma-3-variant-to-create-components Table component with variables and collections in figma https://www.figma.com/community/file/1424837239549914669/table-component-with-variables-and-collections-in-figma Dynamic Table with dynamic values https://www.figma.com/community/file/1424850737996162609/dynamic-table-with-dynamic-values Collapsible Row Table Component https://www.figma.com/community/file/1430396100037433609/collapsible-row-table-component Collapsible panel https://www.figma.com/community/file/1431884911958753664/collapsible-panel figma beginner to advanced video tutorial https://www.youtube.com/watch?v=3gb_q30HJz8&list=PLWm6ko1H5_6yGaZWRAacLW3r9MeT--Dxn&index=1
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.