Immediately sticking out for me is the absence of a “blur” interaction. This is necessary to simulate “focused” states in things like drop-downs and text inputs.
Without this, my components get stuck in the focused state without an elegant solution for having them blur like they do on the web.
My current workaround is to use the “mouse leave” action, but this is suboptimal.
I imagine you could add a trigger called “Click Outside” or something similar.
Besides this, the feature is a golden so far You folks are killing it!
I ran into the same problem just recently. Your “mouse leave” workaround seems like a great idea and I feel like this is something I’ll be using for now, but looking at the bigger picture my overall concern is how do I simulate the experience of typing something into a text input, in general?
Let’s say I have 2 frames in Figma: the first one containing a blank input and a second one with a filled input. At the same time, the text input I’m using is an interactive component that changes its state to “Active” upon clicking.
Now, how do I go from the first frame to the second one? If I click on the input component it will just change its state to “Active”. If, instead, I’d like to go to the second frame (with a filled input) upon clicking, then how do I show the “Active” state in my prototype?
I’d love to be able to do that too. Though wonder if “stateful” components are in the long term vision of Figma at all. As a workaround, if you know the first character your user is supposed to type, you can use the “key/gamepad” trigger using the first character. It would be especially useful if they added an “any key” option, as that would be easier to maintain.
Agreed on the “Click outside” suggestion. The mouse leave workaround works, but with larger forms is causing more trouble complications the more I use it…
And also agreed on the feature being overall awesome
Hey there,
Adam’s proposal of using “mouse leave” is a great start to simulate the experience. But wanted to share a bit more context;
The main goal of interactive components is to introduce the concepts of encapsulation and reusability. But at the moment it’s restricted to interactions being only ‘internally’. So it’s not (except for creating two separate frames) to use interactive components to trigger changes in other objects. A ‘click outside’ is a version of that problem.
It’s definitely something we’re thinking about, but we hope that interactive components is already useful on its own, so we couldn’t wait to get it out.
Though I of course, don’t have any insight into your interactions architecture, I don’t see “click outside” as any different in nature from “mouse leave.” The interaction would not have any knowledge of anything outside of the component, except that the click happened outside of the frame. It would still practically be encapsulated, at least from a least-knowledge perspective.
On the web and elsewhere, you can listen to a “blur” or “unfocus” event without knowing anything about the UI. It is used all the time inside Vue/React/Svelte/etc. components.
I think this is a bit of an omission in that it is absolutely necessary to properly simulate dropdowns, popovers, and all manner of focusable inputs. Your demo examples even show dropdowns closing when the mouse leaves. That’s not how that works in real life and could cause undue frustration during user testing.
All that said, I have an acceptable workaround, so I’m patient and I’m happy to have this feature at all
Thanks for the insight into your thinking with interactive components @nikolasklein
Agree with you and appreciate what you guys have done - it’s awesome that this is out sooner rather than later, and it does let us do/create so much that we couldn’t before already. I’d love to be able to connect component A to component B and link state changes, but I appreciate what you’re going for with the current release and I’m not expecting that one (but please, feel free to surprise me, it is my birthday in a few days :D).
I also agree with “click outside” as @Eli_Crow suggests it, and see it not as a “but” on all your good work, it’s an “and” I am that a “click outside” interaction could be in reach sooner than connecting components, as it is a purely internal to the component and unlocks a lot of value.
Using this approach, I was able to create another hacky workaround for having a “blur” behavior. Although it’s way more tedious than Eli’s “mouse leave” solution, I believe it’s more accurate in simulating an actual implementation.
—
PS. In fact, it’s so hacky it even hacked Figma’s page counter in the prototype mode.
Nice @Adam_Przewoski I was thinking along the same lines this morning, tried created a 2000x2000 1% opaque rectangle in the focused states and put a click action against it to create the blur event. I wanted it to just be part of the component ie. I didn’t have to do any further linking or handling outside dropping the component into a design. Dropped it when I found that just creates multiple layers of overlays if other form fields are higher in the z-order Your way avoids that, but doesn’t keep any text overrides? (hmm, and also would require an overlay per field to align the location?)
EDIT: Had some more playing/trying, and I’m thinking that this is all a bit too hacky and I’m just going to live with multiple focuses (focusii?) for now
I completely agree with the wish for a “click outside” - I just stumbled about the same problem while trying to prototype a focus state.
I was also thinking that a “while focussed” similar to “while hovering” or “while pressed” would be really deluxe on top of the “click outside”. though its problably just another name for the same Idea…
Currently, Interactions work by defining an activation behavior and the subsequent action that the component should take.
For example, you can set a component to catch your Tap, your Hover, Mouse Enter, etc etc, and then perform some sort of animation or reaction as a result.
While designing some interactive inputs, I realized a gap: Tap Outside is not a registered interaction. In essence, I would like to set my component to perform some actions when a user taps inside of them AND outside of them.
Example scenario:
On Tap: My component gets a blue stroke around it and a blue glow.
On Tap Outside: My component loses the blue stroke and blue glow.
This would help to bring to life components which represent interactive objects like components, buttons, and largely other forms…but only when a tap is registered outside the component. A mouse exit simply won’t do.
I’d love to have a trigger called “on click out” or “lost focus”, to make a focus input state go back to its initial state, instead of using the option “on mouse leave” since it’s not the default behavior in browsers.
There is a bad workaround that is placing an overlay and clicking “close when clicking outside”, but it doesn’t work within the same component set and also doesn’t keep an user action (like a triggered checkbox will always be reset when clicking out).
@Adam_Przewoski Is there a way to upload this to the design library? I cant seem to figure that part out. When I prototype this strait in my design library it works, but when I do it on my company’s main page it doesnt work.
I’ve built a bit of a work around for click outside by using a large hidden frame around the component that triggers the un-focused state on mouse down and then use on mouse up to trigger the focus state of the next component, since that seems to follow the order. But z-stacking does get in the way of that and it doesn’t work well with nested items that all need to change on click outside.
Hello,
I think it could be great to have the possibility to change the variant of a component by just clicking outside of it.
It could be used to simulate the behavior of editing softwares when the user wants to deselect a selected items by just clicking somewhere else.
Maybe there’s an existing solution for this that I missed ?
Yeah I’d like this too. For example, on a text field component, transitioning from an unfocused state to a focused state works as expected. But if I want to transition back, IRL this done by either selecting a different field, or by clicking outside the field. Current Interactive Components doesn’t account for this.
You folks are killing it!
that a “click outside” interaction could be in reach sooner than connecting components, as it is a purely internal to the component and unlocks a lot of value.
Your way avoids that, but doesn’t keep any text overrides? (hmm, and also would require an overlay per field to align the location?)