In my examples, I will use a variant as the destination to swap it from Switch OFF to Switch ON. In this setting, you can define what will happen when the interaction is activated for interactive components, we will use Change To which allows swapping the variants inside a component. These are known in development as Events and are the different ways we the user can activate an interaction. HotspotĮven though this is not inside the panel, the hotspot is the element where the interaction will happen, in our case, each variant will be an interactive hotspot for which you can define triggers and actions. Figma has a lot of information on their site so I will include links for those of you that want to dig deeper. It’s important to understand the Interaction Details panel because it allows us to define the different interactions and animations for our interactive components. Learn more about Variants → Interaction Details Panel These are the different styles a component can have and are usually used to apply different properties such as size or states. You can also apply overrides to instances (which are basically style changes to the component properties which allow for some customization). Think of these as items that, when duplicated, create a connection with its copy (called instance) and when the component is changed, the instance receives the same changes. It’s necessary to understand some key Figma elements that we are going to use, if you’re already familiar with them you can skip this part and start directly with the first tutorial (section: “Create your first Interactive Component”). Once you join the Beta, you can duplicate my design and follow along more easily.ĭownload the Figma design file → Before Starting I have created a Figma design file with the examples from this article. Joining the Beta is free and once you submit the form, it should not take more than two or three days before you see Interactive Components appear in your Figma design tool. You need to sign up for the Interactive Components Beta program to start experimenting with this new feature as it is not yet available in the current stable release.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |