Skip to main content

Hi all,


I’m pretty new to Figma and self taught, so if I don’t have the terminology right please go easy on me. I’m having any issue with component varients which I need help with.


I have a component with several veriants which I would like to “place” overlays in-between to gather additional information from a user.


For example, I have a drop-down with multiple “bubble options” a user can select. Once the user selects one of those “bubble options”, an overlay will pop-up to get more details on the selection from the user.


After the user fills out the additional information, I’d like to have them click on a Save button within the overlay; which would close the overlay, and transition the component from Varient 1 to Varient 2.


So in essence:

Click un-expanded drop down (Varient 1) → drop down expands (Varient 2) → user selects a “bubble option” within expanded drop down (Varient 2) → overlay appears → user fills out additional information → user clicks on Save button → overlay closes → “bubble option” is now within the “Selected” section of the drop down (Varient 3).


I’ve been able to figure out how to add an overlay when selecting the “bubble option”, but I can’t figure out how to move from “clicking the save button” to “bubble option is now within the ‘selected’ section of the drop down” (Varient 3).


Can someone please help me with this?

Thanks,

Mike

Hey @Michael_Malczewski, thanks for reaching out! Are you able to share a copy of you file please?

Hello @Gayani_S,


I’ve saved a local copy of my figma file, but I’m not seeing where this forum allows me to upload the local copy. Can you help me with this?


Thanks,

Mike

Correction here since this forum doesn’t allow me to edit my posts. My figma file saved from the figma site as a “.fig” but this forum doesn’t allow me to upload .fig format via the uploader. How would I provide this file to you?

Feel free to share a link. Each file and prototype has a unique URL. Copy this link and send it here.

Hi again @Gayani_S,


Here you go: https://www.figma.com/file/qPT4b9Uq5EMRnQu6QcaiHs/Overlay-Example?type=design&node-id=0%3A1&mode=design&t=5a6hbnJn12aotEuD-1


Thanks,

Mike

Hi @Michael_Malczewski ,

If I understand correctly, here a workaround: you can create an instance from the Variant 3, and then create an interaction from this instance.


(In order to make this instance: Click on the Variant 3 > Drag the Variant 3 outside of the component with Option on your keyboard.). Then, apply the interaction.

Capture d’écran 2023-07-25 à 15.36.05


Hope it helps!


(please disregard my request to edit the file)

Hi again @Celine_Figma,


I don’t think that would help, as I want to transition from the “look” of varient 2 to the “look” of varient 3 within the same frame after clicking on the “Save” button within the pop-up.


From what I’m seeing in your screenshot, wouldn’t that interaction be restricted to “navigate to”, “open / Close overlay”, etc.? I don’t want to change from the frame (page) I’m within when the varients change.


Unfortunately I’m not allowed to add any editors within our Figma instance, so any additional suggections / guides / videos / would be greatly appreciated.


Thanks again,

Mike

Hey @Michael_Malczewski, apologies for the delayed reply! I’d suggest here to reach out to our support team, so they can give you a better solution: here.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings