Prototyping overlay transitions in Figma
Вставка
- Опубліковано 15 гру 2022
- In this Figma tip, learn to prototype overlay transitions for thumbnails using interactive components. This tutorial is intermediate and covers use of overlays, auto layout, interactive components, and placing images.
Duplicate the demo file here: www.figma.com/community/file/...
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #FigmaTip #Prototyping #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems - Наука та технологія
Thank you . Clear and you make it easy.
Simple and clear instructions.
Clear and easy description. Thanks
love the video. We need scroll event function in figma soon.
I’m overwhelmed I hope I can create this by tonight 😢
Thanks for teaching
i appreciate
Brilliant!
Great tutorial, crystal clear and very useful to get used to prototyping with Figma. Thanks!
awesome!
thank you!
Why using the 3 variants for the overlay? Couldn't we just return to the first variant on mouse leave?
Can you give us an example where these thumbnails trigger an overlay switch of a similarly looking thumbnail? and when you scroll is the trigger. Either drag or native vertical scrolling. If hidden object appears, the thumbnail changes value to the overlay witch and when moving back, it retains the new state. Possibly requires adding Setions
What advantage is there to creating an overlay on top of another component? Can't you just create a thumbnail component with two variants, one small and one large and then have it grow on mouse enter and shrink on mouse leave?
Same thought
If using only variant states and If there was adjacent content it would sometimes be covered by that adjacent content unless your layers were ordered properly, or could be cut off if clipping was on. If you had multiple rows of thumbs then they couldn't be all at the front. But overlay will let the animation always be on top. However I agree I like the simplicity of just one component.
It can grow, but it cannot overlap. The benefit here is the z-index, and ignoring the autolayout container. Similar to a netflix video hover.
@@miggi-from-figgi Ah that makes sense! Thank you for the clarification! :)
@@BigYoof I am also using the overlay like a sequence to have an animate in and animate out and self close of the sequence.
Its subtle, but gives a lot of additional flexibility for custom overlay transitions.
Thanks for the tutorial! (how are you working without snapping to the pixel grid? :D)
As always - very helpful! Thanks for that. We're almost in 2023(soon), there are no customizable presets in Figma for many "animations" you see every day on the internet. Many users can't get into that much detail. They need a solution quickly. As good as the tutorials are. But they also need a lot of time. And then when there are "problems" because it doesn't work as expected, they look for help. That also takes time. And who has time? Figma users in production or Figma users, as "hobby" users. Maybe someone can think about it ;-)
I just started using figma and everything worked, but I have problem with coping this to other imagies like you did it on video, like I'm using alt, it makes copy, but this copy is still connected to the first one (don't know how it's called correctly, but this overlay icon on the left upper corner). Can you help with this.
Use the context menu right click to copy properties and make properties if unsure of the shortcut (demonstrated on the last thumbnail). Make sure you are deep selecting into the image within the instance.
Do you have examples of how to work with a lot of photos?
Hey Miggi , I tried the interaction. apparently it only works for 1 thumbnail but doesn't work for others. Any specific reason for that?
Also check to see if you are deep selecting to select the image within the instance. I am command (ctrl) clicking on it to select the shape within the instance itself.
@@miggi-from-figgi cool will try this out and let you know :) thanks a ton
@@miggi-from-figgi it worked :)
i wanted to make it without variant, is it possible?
I find the closed captions distracting. I think youtube captions are enough because I can turn them off and focus on the video, and others can turn it on if they need to.
Why the duplicate image under. One image could just scale up and down.
I unterstood only shift K V S Control V shift click alt control shift C click enter shift V S control
In figma we can't attach diffrent actions into one button click function. XDD
Why you just didn't used the hover option instead of mouse in? And why there is a 3rd state of thumbnail? With hover you don't need the 3rd state.
So this method is meant to solve a few specific problems.
1. z-index, using the overlays, I can place them over everything and not be concerned about stacking or auto layout.
2. Overlays only allow you to dissolve or move in, I wouldn't be able to have a scale transition.
3. "While hovering" doesn't allow me to have a chain reaction of events, it just goes back to the previous state.
4. The third interaction allows the overlay to 'self-close.' In Figma, I can't assign two interactions to happen at the same time, so I daisy-chain the interaction of the overlay, when I mouse out, it animates out, when its done animated out the after delay closes the overlay allowing me to interact with other objects and not immediately cancelling the subsequent interactions.
🙇♂