Figma Interaction Component

University:
American Baptist College
Course:
CIT340 | System Analysis and Design
Academic year:

2024
Views:

172

Pages:

2
Author:

Muthia M.

Interaction Component What is Interactive Component? The utilization of interactive components facilitates the generation of prototype interactions among different variations within a group of components. Whenever an instance is incorporated into one's designs, the corresponding interactions are established and prepared for execution. This approach enables users to optimize their time during the prototyping process and avoid superfluous complexity. Before Variant Interaction In the given illustration, we have incorporated all conceivable linkages in order to create a prototype of a framework featuring five checkboxes. In the absence of interactive components, it would be necessary to replicate the identical frame on 32 occasions and establish 160 links among them in order to prototype all conceivable combinations. With Variant Interaction By including interactive elements, the inclusion of a checkbox instance in our design suffices to provide several interaction options. When the prototype is seen, Figma seamlessly transitions between the selected and unselected versions. Create Interactive Component The naming scheme can also be utilized for the purpose of converting pre-existing components into variants. In order to achieve precise conversion, it is imperative tha component names adhere to the prescribed structure: Interactive components introduce a new prototype action: Change to. 1. Choose the initial option for the interaction from the available set of components. 2. Proceed to access the Prototype tab located on the right sidebar. 3. To move the frame's bounding box to the desired variation, locate the (+) symbol on the right side of the frame and click on it. Then, drag the bounding box to the target variant. Additionally, users have the option to navigate to the Interactions part of the Prototype panel, where they can select the action "Change to" and proceed to choose the desired destination variation from the available options in the dropdown menu. 4. After establishing the connection, utilize the Interaction details panel to modify the trigger and action.