- 90
- 36 020
curdweb
India
Приєднався 17 вер 2022
Figma components using variables.
www.figma.com/@navinwebworld
about figma variables
- Building a Design System
- Creating design solutions
- UX Concepts
- UX case studies
- present ideas as ux case studies
- Interaction design
- Next level prototyping
- be expert in rapid prototyping
- dynamic prototype
- How to use variables to create rapid prototyping
- Data visualization through prototype
- chart, map, video to enhance customer experience
-chatbot to enhance customer experience
interactive components tutorial
ui elements, mobile / web app widgets, plugins, patterns
Figma reusable components to build design system
learn to create dynamic and interactive components
figmavariables.blogspot.com/
Axure RP is a powerful design tool for creating highly interactive HTML prototypes for web, mobile, and desktop application projects.
Learn to create rapid prototyping, Sitemaps, Personas, User Workflows, Customer journey maps, Wireframes, Prototypes,
curdweb.com/
www.figma.com/@navinwebworld
about figma variables
- Building a Design System
- Creating design solutions
- UX Concepts
- UX case studies
- present ideas as ux case studies
- Interaction design
- Next level prototyping
- be expert in rapid prototyping
- dynamic prototype
- How to use variables to create rapid prototyping
- Data visualization through prototype
- chart, map, video to enhance customer experience
-chatbot to enhance customer experience
interactive components tutorial
ui elements, mobile / web app widgets, plugins, patterns
Figma reusable components to build design system
learn to create dynamic and interactive components
figmavariables.blogspot.com/
Axure RP is a powerful design tool for creating highly interactive HTML prototypes for web, mobile, and desktop application projects.
Learn to create rapid prototyping, Sitemaps, Personas, User Workflows, Customer journey maps, Wireframes, Prototypes,
curdweb.com/
Multiple line chart in figma | interactive Graph and charts components |
Multiple Line Chart | Smart chart components | Data visualizations
How to create interactive Graph and charts in figma
Figma file link : www.figma.com/community/file/1392729402929613649/multiple-line-chart
In this video :
multiple line chart is created with component property
easy to switch different marker using swap instance property
easy to enter value in component property
easy to edit/customize and use
Display tooltips when hovering over points / marker
easy drag and drop component with interactive hover effects
instant swap property helps to swap marker easily
easy to scale the marker to exact axis
Figma file links :
List of other chart components / UI Kit
Interactive Data Visualization : smart chart UI
Horizontal stacked bar chart
www.figma.com/community/file/1378951271834608450/horizontal-stacked-bar-chart
Horizontal bar chart
www.figma.com/community/file/1378114372543570155/horizontal-bar-chart-using-figma-variables-modes-collections
Material column charts
www.figma.com/community/file/1371324356039712287/material-column-charts-using-figma-variables-mode-collections
Area Chart
www.figma.com/community/file/1379551321362526426/data-visualization-area-chart
Positive Negative bar chart
www.figma.com/community/file/1371944045534707819/positive-negative-bar-chart-with-figma-variables-collections
Stacked Column Chart
www.figma.com/community/file/1370691660612418661/stacked-column-chart-using-variable
Column chart
www.figma.com/community/file/1338968126385146596/data-visualization-column-chart-using-figma-variable-concepts
interactive Line Charts
www.figma.com/community/file/1388868904250405345/interactive-line-charts
Donut Chart using variables
www.figma.com/community/file/1391698705295426667/donut-chart-using-variables
Figma components
multiple modal window using figma variables
www.figma.com/community/file/1338976840473959158/multiple-modal-window-using-figma-variables
multiple add to cart, side nav interactions
www.figma.com/community/file/1349271861489396828/multiple-add-to-cart-side-nav-interactions
Quiz system with score card using figma variables
www.figma.com/community/file/1338984231382370065/quiz-systm-with-score-card-using-figma-variables
how to create dropdown menu in figma step by step process
www.figma.com/community/file/1345203880108959369/how-to-create-dropdown-menu-step-by-step-process
customer support landing page design in figma
www.figma.com/community/file/1349782725342410269/customer-support-landing-page
interactive star rating component in figma using local variables and component property
www.figma.com/community/file/1391748746430137472/interactive-star-rating-component
interactive spin box ui kit in figma
www.figma.com/community/file/1386665813691876441/interactive-spin-box-ui-kit
data table with row selection and deletion
www.figma.com/community/file/1338969294393519847/data-table-with-row-selection-and-deletion
table with pagination controls in figma
www.figma.com/community/file/1338985680694973202/table-with-pagination-controls
table Row Filter using advanced figma variable concepts
www.figma.com/community/file/1338986853260089110/table-row-filter-using-advanced-figma-variable-concepts
Tabs using figma variables
www.figma.com/community/file/1338987700136454935/tabs-using-figma-variables
pagination with figma variales
www.figma.com/community/file/1338982056076699398/pagination-with-figma-variales
Interactive Checkbox component - www.figma.com/community/file/1374512299973321967/interactive-checkbox-ui-kit-interactive-checkbox-component
Scroll Container with animated scrollbar component - www.figma.com/community/file/1377146586379377090/scroll-container-with-animated-scrollbar-component
Multi Select Dropdown Widget - www.figma.com/community/file/1376219418100547389/multi-select-dropdown-widget
Radio Button UI KIT - www.figma.com/community/file/1374093038929419110/radio-button-ui-kit
Dropdown UI Kit - www.figma.com/community/file/1371196077284288995/dropdown-ui-kit
watch figma beginner to advanced tutorial
ua-cam.com/play/PLWm6ko1H5_6yGaZWRAacLW3r9MeT--Dxn.html
How to create interactive Graph and charts in figma
Figma file link : www.figma.com/community/file/1392729402929613649/multiple-line-chart
In this video :
multiple line chart is created with component property
easy to switch different marker using swap instance property
easy to enter value in component property
easy to edit/customize and use
Display tooltips when hovering over points / marker
easy drag and drop component with interactive hover effects
instant swap property helps to swap marker easily
easy to scale the marker to exact axis
Figma file links :
List of other chart components / UI Kit
Interactive Data Visualization : smart chart UI
Horizontal stacked bar chart
www.figma.com/community/file/1378951271834608450/horizontal-stacked-bar-chart
Horizontal bar chart
www.figma.com/community/file/1378114372543570155/horizontal-bar-chart-using-figma-variables-modes-collections
Material column charts
www.figma.com/community/file/1371324356039712287/material-column-charts-using-figma-variables-mode-collections
Area Chart
www.figma.com/community/file/1379551321362526426/data-visualization-area-chart
Positive Negative bar chart
www.figma.com/community/file/1371944045534707819/positive-negative-bar-chart-with-figma-variables-collections
Stacked Column Chart
www.figma.com/community/file/1370691660612418661/stacked-column-chart-using-variable
Column chart
www.figma.com/community/file/1338968126385146596/data-visualization-column-chart-using-figma-variable-concepts
interactive Line Charts
www.figma.com/community/file/1388868904250405345/interactive-line-charts
Donut Chart using variables
www.figma.com/community/file/1391698705295426667/donut-chart-using-variables
Figma components
multiple modal window using figma variables
www.figma.com/community/file/1338976840473959158/multiple-modal-window-using-figma-variables
multiple add to cart, side nav interactions
www.figma.com/community/file/1349271861489396828/multiple-add-to-cart-side-nav-interactions
Quiz system with score card using figma variables
www.figma.com/community/file/1338984231382370065/quiz-systm-with-score-card-using-figma-variables
how to create dropdown menu in figma step by step process
www.figma.com/community/file/1345203880108959369/how-to-create-dropdown-menu-step-by-step-process
customer support landing page design in figma
www.figma.com/community/file/1349782725342410269/customer-support-landing-page
interactive star rating component in figma using local variables and component property
www.figma.com/community/file/1391748746430137472/interactive-star-rating-component
interactive spin box ui kit in figma
www.figma.com/community/file/1386665813691876441/interactive-spin-box-ui-kit
data table with row selection and deletion
www.figma.com/community/file/1338969294393519847/data-table-with-row-selection-and-deletion
table with pagination controls in figma
www.figma.com/community/file/1338985680694973202/table-with-pagination-controls
table Row Filter using advanced figma variable concepts
www.figma.com/community/file/1338986853260089110/table-row-filter-using-advanced-figma-variable-concepts
Tabs using figma variables
www.figma.com/community/file/1338987700136454935/tabs-using-figma-variables
pagination with figma variales
www.figma.com/community/file/1338982056076699398/pagination-with-figma-variales
Interactive Checkbox component - www.figma.com/community/file/1374512299973321967/interactive-checkbox-ui-kit-interactive-checkbox-component
Scroll Container with animated scrollbar component - www.figma.com/community/file/1377146586379377090/scroll-container-with-animated-scrollbar-component
Multi Select Dropdown Widget - www.figma.com/community/file/1376219418100547389/multi-select-dropdown-widget
Radio Button UI KIT - www.figma.com/community/file/1374093038929419110/radio-button-ui-kit
Dropdown UI Kit - www.figma.com/community/file/1371196077284288995/dropdown-ui-kit
watch figma beginner to advanced tutorial
ua-cam.com/play/PLWm6ko1H5_6yGaZWRAacLW3r9MeT--Dxn.html
Переглядів: 116
Відео
Interactive Star Rating Component using variables and component properties | Star Rating
Переглядів 8514 днів тому
Interactive Star Rating Component Figma file link for Component - www.figma.com/community/file/1391748746430137472/interactive-star-rating-component #figmacomponents #figmacommunity #figmaredesign #config2024 there are various varieties of star rating using two different concepts Component property Variables rating with count rating with customer reactions simple rating easy to edit/customized ...
Figma interactive Date Picker Component
Переглядів 14521 день тому
Figma file - www.figma.com/community/file/1388584634619363691/date-picker-as-dropdown Date month year selector Interactive Date Picker as Dropdown Conditional dropdown with example of date picker Created with local variables interactions has given in all date, day, month using the format of Year, month and date dropdown interactions created with considerations of leap / non leap year as well as...
Figma Line Chart | data Visualization | Chart UI Components | Chart UI Kit
Переглядів 16221 день тому
Data Visualization as "Line chart" with an example of profile visits analytics report. Figma file - www.figma.com/community/file/1388868904250405345/interactive-line-charts Line chart created with Local variable, collections, components, component set, Swap instance and more Marker is component easy to set local variable to set the height to y-axis value Local variable made it easy to change/up...
interactive indeterminate checkbox | dynamic indeterminate checkbox in figma using local variables
Переглядів 95Місяць тому
interactive indeterminate checkbox figma file :- www.figma.com/community/file/1387133654950161776/indeterminate-checkbox How to create interactive indeterminate checkbox 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 figma reusable components indeterminate Check Box (partially c...
Spin box component UI Kit |
Переглядів 168Місяць тому
interactive Spin Box UI Kit figma file link : www.figma.com/community/file/1386665813691876441/interactive-spin-box-ui-kit In this video will see How to create interactive Spin Box how to create interactive add to cart button how to create conditional add to cart button date spin box month spin box day spin box year spin box figma local variable figma variable mode figma pass through layers fig...
Multi Select : Selected items count | Multi Select component
Переглядів 147Місяць тому
Count Selected Values in a Multi-select | select multiple items in drop down list figma file : www.figma.com/community/file/1384109074269802964/selected-item-count-in-multiselect Get count of items in a multi select dropdown Multi select selected item count How to create multiselect with selected count Features :- checkbox with 4 variants Checked Unchecked Unchecked disabled Checked disabled an...
horizontal stacked bar chart component | Chart UI Components | Data and information visualization |
Переглядів 60Місяць тому
horizontal stacked bar chart component Figma file link :- www.figma.com/community/file/1378951271834608450/horizontal-stacked-bar-chart Ready to use chart Easy to edit & customized Variables, modes, collections hover effect as tooltip auto layout add more modes in local variable as value of bar it will increase / decrease bar width as per local variable. Multiple uses in single page / in multi ...
figma interactive toggle switch component | UI Kit
Переглядів 115Місяць тому
interactive toggle switch component figma file www.figma.com/community/file/1379640815868546320/toggle-switch-ui-kit Toggle Switch variant : On, Off, Text on top, Disabled (with constraint message) component property to show on / off label, icon, constraint message, enter label for on and off both state Toggle switch variant : On, Off, text on top, disabled (with constraint message) how to crea...
horizontal bar chart | data visualization | Chart UI Components | figma variables, modes, collection
Переглядів 78Місяць тому
Horizontal bar chart Chart UI Components is created with figma variables, modes, collections. Figma file :- www.figma.com/community/file/1378114372543570155/horizontal-bar-chart-using-figma-variables-modes-collections Horizontal bar chart :- Easy to edit / customize Multiple uses in single page / in multi page Horizontal bar is created as component which carry all the interactions and values as...
Multi select dropdown using figma variable, modes & collections | multiselect dropdown UI Kit
Переглядів 2582 місяці тому
Multi select dropdown Figma file link free to use - www.figma.com/community/file/1376219418100547389/multi-select-dropdown-widget multiselect dropdown widget designed with variable, modes & collections. it is easy to use. easy to edit, update, delete the options uses is not limited, it can use more than 1 in single page or multiple pages just need to add mode enter data as options and change th...
figma Interactive checkbox UI kit | interactive checkbox component | checkbox with 4 variants
Переглядів 1512 місяці тому
interactive checkbox component | checkbox with 4 different variants Enabled selected, Enabled Unselected, Disabled selected, Disabled Unselected | interactive checkbox ready to use UI kit Figma file free to use - www.figma.com/community/file/1374512299973321967/interactive-checkbox-ui-kit-interactive-checkbox-component Features of this component : Select number of options Constraint message on ...
figma radio button UI Kit | Interactive Radio Button | Radio Button Component
Переглядів 812 місяці тому
Figma Radio Button Component Interactive Radio Button Component Get figma file - www.figma.com/community/file/1374093038929419110/radio-button-ui-kit View Figma community - www.figma.com/@navinwebworld - About radio button component Easy to use - from right panel (properties panel) change number of options 2-10, mark default selected state Text property to enter Radio Label Name / Title Text pr...
Figma Dropdown UI Kit | Interactive dropdown component using component Text, Variant property
Переглядів 1732 місяці тому
Interactive dropdown menu Get figma file - www.figma.com/community/file/1371196077284288995/dropdown-ui-kit Dropdown UI Kit Easy to use - from right panel (properties panel) change number of options 2-10 Enter desired options value for view the entered values check & uncheck clip content while publishing file check the clip content In this video: how to create component in figma how to create c...
Device Control Panel UI Radio List View | Smart Lock, Smart Watch OR Printers button interface
Переглядів 755 місяців тому
Device Control Panel UI Radio List View using figma advanced variable concepts Custom design for control panel button interface In this video - Button interface device design - Button interactions - How pattern / prototype create for device / control panel - Smart watch, Smart lock & Printers - Using figma advanced variable concepts How to create button interface design in figma how to create p...
Column chart with figma variables | variable modes example in figma
Переглядів 1665 місяців тому
Column chart with figma variables | variable modes example in figma
Vertical Tab System Using figma Variables | Figma vertical tabs components with variables | #figma
Переглядів 3206 місяців тому
Vertical Tab System Using figma Variables | Figma vertical tabs components with variables | #figma
Bar Chart with figma variables | Data Visualization : Bar Chart #figma #figmatutorial #chart
Переглядів 5656 місяців тому
Bar Chart with figma variables | Data Visualization : Bar Chart #figma #figmatutorial #chart
Table Row Filter | Row Filter in table | #figma #datatable #figmatutorial #filters #data
Переглядів 3076 місяців тому
Table Row Filter | Row Filter in table | #figma #datatable #figmatutorial #filters #data
Data Table With Row Selection & Deletion with figma variables | #figma #figmatutorial #datatable
Переглядів 6626 місяців тому
Data Table With Row Selection & Deletion with figma variables | #figma #figmatutorial #datatable
Table with pagination controls using figma variables | #figmatutorial #figma #datatable #table
Переглядів 3256 місяців тому
Table with pagination controls using figma variables | #figmatutorial #figma #datatable #table
Popover widget with Figma Variables | figma tips and tricks #figmatutorial #figma #popover #widget
Переглядів 1577 місяців тому
Popover widget with Figma Variables | figma tips and tricks #figmatutorial #figma #popover #widget
Tooltip with figma Variables #figma #figmatutorial #tooltips #figmacomponents #widget
Переглядів 1487 місяців тому
Tooltip with figma Variables #figma #figmatutorial #tooltips #figmacomponents #widget
Multiple Modal with figma variables #figma #figmatutorial #figmaplugins #figmaprototype #components
Переглядів 3007 місяців тому
Multiple Modal with figma variables #figma #figmatutorial #figmaplugins #figmaprototype #components
pagination with Variables in figma | #pagination #components #concepts | #figmatutorial #figma
Переглядів 9858 місяців тому
pagination with Variables in figma | #pagination #components #concepts | #figmatutorial #figma
interactive quiz system with dynamic scores and results in figma using variables | #figmatutorial
Переглядів 1,4 тис.8 місяців тому
interactive quiz system with dynamic scores and results in figma using variables | #figmatutorial
Expand And Collapse component using figma variables | collapsible content #figmatutorial #components
Переглядів 1,4 тис.9 місяців тому
Expand And Collapse component using figma variables | collapsible content #figmatutorial #components
carousel slider component using figma variables | carousel slider with navigation controls | #figma
Переглядів 5809 місяців тому
carousel slider component using figma variables | carousel slider with navigation controls | #figma
Tabs component using #figma variables | interactive tab component | fully functional tab bar
Переглядів 2,4 тис.9 місяців тому
Tabs component using #figma variables | interactive tab component | fully functional tab bar
Accordion | 3 easy steps | Interactive Accordion Component using variables and conditions in figma
Переглядів 6589 місяців тому
Accordion | 3 easy steps | Interactive Accordion Component using variables and conditions in figma
Please help me I have a question about the new 2024 updates in Figma, in the prototype are the figma conditional else if it isn't become free?? 😢 How can I implement this explanation now? 😢
conditional else if is available in figma free version, easily can implement/use this example below is figma file link www.figma.com/community/file/1338984231382370065/quiz-systm-with-score-card-using-figma-variables Thank you
@@curdweb thanks 🌹
Cool, but does it make sense to create variables for, say, 60 elements? I'd rather just create a separate component with a label and settle it out with front-end. This is basically duplicating their work
You are absolutely right, here is the another component for 60 & more elements please check the link Multi Select Dropdown Widget - www.figma.com/community/file/1376219418100547389/multi-select-dropdown-widget Selected item count in multiselect - www.figma.com/community/file/1384109074269802964/selected-item-count-in-multiselect indeterminate CheckBox - www.figma.com/community/file/1387133654950161776/indeterminate-checkbox Please check more solutions - www.figma.com/@navinwebworld I appreciate your comments and feedback. Thank you
I am not able to get layer varaible option?
You are right, here is updated figma file link : www.figma.com/community/file/1338976840473959158/multiple-modal-window-using-figma-variables Appreciate your comments and feedback Thank you.
Thanks for the great video and for sharing the file link on figma. Highly appreciated. How do we link the dropdownlist 1 to 2 and then to 3 and make them dependent and interactive. What i mean is this, if i choose maths and english in ddlist 1, i can only be presented with e.g. class locations where maths and english will be offered in ddlist 2 as options and ddlist 3 will only present me with teachers who are stationed in those classes in ddlist2 as the options for ddlist3. DDlist 1- Subjects DDlist 2- Class Location where selected subjects in DDlist1 selected options will be offered DDlist 3- Teachers teaching at those locations as per selected class locations in DDlist2 will be available for selection. Is this possible to do in figma Thanks in advance.
Here you can check - www.figma.com/community/file/1388584634619363691/date-picker-as-dropdown
This is exactly what I needed, thank you!
Glad it helped!
Would be so much faster just making a component and reusing it. Imagine doing this for 20-30 checkboxes. Would take ages. Making a component you could just do it once and then copy.
Yes right, even you can create component here also. for checkbox component please check this figma file - www.figma.com/community/file/1374512299973321967/interactive-checkbox-ui-kit-interactive-checkbox-component
Figma is a real programming language resembling RPG and Cobal
you are right.
Best Tutorial SO FAR! Thank you
Glad it helped!
Thank you so much for this. Finally someone who explained and showed this clearly. However, I wonder now if the effort of pulling this is higher than the way we can manually set the condition. I would've preferred to see figma have an option to 'have only 1 active state at a time' feature. They already have all the features necessary to pull this off. I wonder why they haven't done it yet.
Great point!
This works only if you are trying to hide or show a layer. How could it work to change the component itself, specially when the "selected" state have shadows, borders and colors?
Please have a look for more component www.figma.com/@navinwebworld
Thank you! Clear instructions and complete explanation of all steps - much appreciated!
You're welcome!
Just what I needed. Thank you
You're welcome!
Can you please make a tutorial how to make a card of a product and then open detail product using variables? thank you so much love your tutorial
Please have a look here - www.figma.com/@navinwebworld
Hands down the best communicator on youtube reg axure tutorials, everyone else's accents are confusing or examples are just straight weird and presentation feels unprepared.
Thanks
Very useful and clear explanation. Thank you so much ❤
You're welcome 😊
Thank you!
You're welcome!
Please can you do a tutorial on add to cart using variables for items of different categories? Thank you
Great suggestion!
will post soon...
www.figma.com/community/file/1349271861489396828/multiple-add-to-cart-interactions
This is super amazing. Thank youu soo much
Glad you like it!
Thank you this. isso helpful , just the background music is. a bit to laud .
Sorry for that
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Download figma files from - www.figma.com/@navinwebworld
Figma variables Love it
Designers wont like this 😅 Next level designer
😮
Started .....😂
Trick trick trick ...... It is really easy
Awesome! Plz create some videos related to data visualization.
Your videos is part of my dowload folder Looking more tricks
Beautiful day ahead Looking for more trick
Using this tick, it made my day
Hit, hit, hit the solutions