Figma gratis untuk digunakan. Daftar di sini: Interactive Components adalah fitur canggih yang memungkinkan Anda menentukan koneksi prototipe antar varian dalam kumpulan komponen. Dalam video ini, kami akan menunjukkan kepada Anda dasar-dasar cara membuat komponen interaktif, dan menggunakannya dalam desain sederhana dan kompleks. Lihat video tutorial varian Figma kami sebelumnya: Bermain dengan komponen interaktif dengan file komunitas kami: File komunitas Tripma: File taman bermain komponen interaktif: Pelajari lebih lanjut di Pusat Bantuan kami: Forum komponen interaktif: Lihat contoh tambahan dari Komunitas Figma: – oleh Ryan.Jyu dan : – POP IT! oleh Emil: – 360′ Rotate Hero Slider oleh Dhanushka Suchhara: – Interaksi Mikro UI oleh Abel Hancock: Stempel waktu: 00:00 Varian mundur 00:17 Pengenalan komponen interaktif 01:37 Contoh komponen interaktif tambahan 01:45 Contoh komponen interaktif sederhana 03: 27 Mengganti komponen interaktif 04:25 Komponen interaktif dengan animasi cerdas 05:30 Komponen interaktif dalam desain skala besar 08:08 Outro #Figma #FigmaTutorial #InteractiveComponents .
source
Even if I place the text under checked and unchecked, the checkbox and the text are not highlighted together when I try to prototype it. I can only prototype either the checkbox or the text to switch, but not both. Anyone know what might be going on?
☘ Irish Honey Badger – Need emoji's
👋 Goodbye exponential screen permutations! 🙁 As I did in countless design prototyping software before.
👍 Hello interactive components! 🙂 Nice!
I am just one month old to figma and after seeing this I feel that I discovered this pretty late in life! Thank you guys. this was really helpful and very easy to understand.
When I add the text in the component frame, it is not visible. Please help out.
Any plans to make it possible to change a component state when the user interacts with another component (ie. user clicks on a checkbox -> it changes the state of a form button from disabled to enabled)
This is amazing, thank you very much
somehow i cant set some button outside of components to change component variants inside said component… kinda sad
How did you get the pointer cursor to appear on something that's not a click action? Would like to add for hover states.
WOW this amazing feature! Thanks!
She talks like she's busy daydreaming or something. Her voice is really annoying.
How do I place an instance
Thank you!!! The video is super helpful, love you all <3
Hiii I have a question! When I try to add text and drag it into the component (they show it in this video as 'label') they don't show at all? What can I do about that? Thanks in advance!
This is something spectacular you've created. You lot are innovating hand over fist, far faster than Sketch (which I've now converted from, after 10+ years), the variants, the styles, basically, everything is so much more intuitive than Sketch. OMFG my days of wrangling Sketch are finally over. Thank you 🙂
I just realized that Adobe XD sucks
I do EXACTLY the same but it won't switch between states in prototype. Been repeating the process ten times. It's just no way to make it happen. I'm heading back to XD. Figma is just too unstable and down right messy.
"change to" option in interaction details is not active. How can i make it active?
Good tutorial, but you're going too fast and don't explain where you're going or what's edited. I keep getting lost.
Where is the 'Combine as variants' step, love ..?
Wow! Thanks Figma team!💟 I only have one question, how can I use these interactive elements and make me navigate to another screen in the same project when I click on a button? For example, in the classic header you can see on a website. It would be VERY helpfully to me!
FYI I couldn't get this to work for about 20 minutes, restarting figma and reloading the prototype seemed to fix it. Classic design platform bug, that major interactive features like this require you to restart the program, but once you get it work, pretty cool feature.
Figma is a great tool. But not for prototyping. I'll stick with Axure, thanks.
Great. Now do radio buttons and text inputs
How to create variants https://www.youtube.com/watch?v=cE2fCeWqjnY
If anyone's struggling make it work, then make sure to watch the Figma Variants tutorial first before this one. Here's the link, https://www.youtube.com/watch?v=y29Xwt9dET0
Please consider making these tutorials WITHOUT the background music. It's fine for a short demo but super distracting for a longer tutorial.
Guys, your boxes here are different than the ones in the variant video.
Here it appears the checkboxes are within another frame, in the variant video they are not, so when you try to follow it leads to the text being clipped off and it is unclear to beginners how to stop the clipping.
Adobe Xd does this WAAAAY better and more intuitively.
Alright but how about radio buttons or a nav bar where only one option needs to be active at once? There should be a way to set a "reset with the next click" rule for these components.
when i drag the 'label' text into component in layers section, that text gets disappeared. What to do for that?
This is a game-changer, funny take – this feature is helping in reducing carbon footprint globally – fewer hours spend on having multiple versions – less power usage – less carbon footprint.
It's quite frustrating to not have variant interactions AND prototype interactions work at the same time. Plenty of use cases for that, like if you toggle something that is instantaneous.
Is it possible to use Slide In instead of Smart Animate?