Prototype with variables: Build a configurable volume bar - Part 1
Вставка
- Опубліковано 6 сер 2024
- Figma is free to use. Sign up here: 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:
www.figma.com/community/file/...
Check out the written mini projects from the Figma Help Center:
- Create an onboarding flow with advanced prototyping: help.figma.com/hc/en-us/artic...
- Create a loading animation: help.figma.com/hc/en-us/artic...
- Create a responsive card with auto layout and constraints: help.figma.com/hc/en-us/artic...
To learn more about the advanced prototyping features, check out our video tutorial on advanced prototyping ( • Figma tutorial: Protot... ), the Help Center article (bit.ly/46r2JsX), and play with the Figma community playground file (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 ...
If you're new to prototypes in Figma, check out the prototype tutorial playlist here: 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: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems - Наука та технологія
We're happy to have this awesome yet basic functionality (as someone mentioned earlier, this kind of interaction is quite outdated).
Now the real questions:
1. When we will be able to use relative (%) values instead of absolute (px)? That would make this interaction much simpler.
2. When we will be able to use math in variables aliasing? That would make things even better.
3. And finally, when you will make the actual live values of the objects on the page in a bi-directional connection with variables (so if you change frame's width on your artboard it also updates a relevant variable instead of just detaching from it)? That will be a mind-blowing improvement to any layout design and variables feature.
Yup, we need drag-direction interaction types for prototyping.
Amazing tutorial
Great video👌👌 , I need a logic of interactive video player
Amazing Thanks
Question: Why are you adding formulas to the instance and not the original component?
Yo figma team - where are we going to have advanced prototyping like Axure input forms? Its the last thing Im missing so much!
I know the points of this video is to guide people to learn interactive variables, but you guys make simple things so complex.
Secondly, most of the time users drag the volume sliders, pls make something relevants. pls Make drag interaction controllable like what Protopie are doing right now.
Is it possible to set a conditional interaction, but have it change a variable via "Smart Animate" instead of changing instantly?
🔥🔥🔥🔥🔥🔥
Who uses [+] and [-] buttons to control volume on mobile?!
C’mon Figma fix your drag interaction, make it variable friendly.
And while you’re at, for God’s sake, make input fields and tables part of the application.
Agree 👍
Conditional are Pay feauture. Or must to work in a 2 workplace. ;( IT s interrumped my learning, work, portfolio...
I wish that was free
"buddun"
.....
This seems more time consuming and complex than to use variants 😅