Figma interactive components1/8/2024 You’ll see the same blue prototyping nodes on the component variants that you see when making prototypes using frames. Select the “default” variant inside the component.If you’re new to variants, check out this guide from Figma first. To start, create a button component with variants for “default” and “hover”. You’ll need to have signed up for the Beta to use the feature currently. I’ll use a hover state on a button as an example. This results in just 1 screen and 2 interactions. Using the checkbox example again, with the new Interactive Components feature, the 8 screens and 24 interactions are replaced by defining the interaction at the component level. This allows you to produce animations after a predefined delay, i.e. “After delay” is a useful one that I’ll discuss later. These interactions can be set to work, based on a variety of triggers, most commonly “On click”, but also “On drag”, “While hovering”, “While pressing” and other triggers. The new Interactive Components feature builds on the Variants feature, allowing us to create interactions between the variants within a component. We would also need 24 interactions defined between those eight screens. This still meant using workarounds to simulate interactions though.Īs you can see above, to demonstrate interaction with three checkboxes, we would need 8 screens, which would all be the same, except for the checkbox selection. Then last year, Figma launched its Variants feature, allowing us to have multiple states of any single component. Previously, we would link entire frames to create our prototypes. These interactions are then baked into the component and will be available in all instances of it. The difference with the new feature is that you can define interactions between variants at the component level. It was not an efficient process when it came to making updates. This feature, currently in Beta, will allow us to quickly assemble reusable interactive components and bring our designs to life as clickable prototypes.īefore this feature was developed, you could create interactive prototypes, but it involved workarounds and a lot of effort duplicating and tweaking multiple frames to demonstrate interactivity. Now all instances of our switch will have the same interactive properties thought the design.Figma has been busy working on a lot of new features recently and one that has captured our attention is Interactive Components. Set to smart animate for smoother animation.However, if you want your component to transition to the new one on hover (for button components), then switch the action to On hover. By default, the action is set to on click, this means that our component will transition to the new state once it is pressed. Toggle Prototyping tab and connect the components to each other.Click on the + button to add a new variant, and change the design to inactive state.To illustrate how to create an interactive component, I created this basic switch component in Figma. Micro interactions on icons and other components.Here some are examples of using interactive components. Interactive components allow states to the component itself instead of having to create a unique art board just to show a new state. It allows designers to create more interactive prototypes very quickly without adding unnecessary complexity to the design files. Interactive components are one of the recent and most welcomed features in Figma. 1 min read Interactive components in Figma.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |