Help With Figma?

Software
#1

Hello fellow designers!

I’ve been taking some UX courses online and in the course they taught the basics of how to use figma to set up wire frames.

I’ve been inspired to try to build my own website portfolio using the figma to web flow plug-in which I’m hoping works out well.

The vision that I have to showcase my portfolio is basically having a side bar that is able to scroll, and when you select a project from the sidebar it opens up what figma calls an overlay that will include an image gallery and a space to read the information about the project.

I’ve looked into sooooo many tutorials and I feel like none of them are the kind of straight forward tutorial that I need. I’ve learned how to create a component, and variants, but when it comes to getting multiple elements to do what I want them to I’m hitting a road block.

Basically when I select one, I have to click the box twice in order to get the overlay to show. Then when I try to click on the next button, for some reason I’m not able to click it, but it’s the exact same format as the first one I click. If anyone has any advice or pointers on how they would approach solving this problem I would be very grateful!

I was going to upload a video, but I just saw that it looks like it’s not doable here, so here is the YouTube link. https://youtu.be/EbsYo6fg6Vk

#2

Hey ccoltons7,
It sounds like a great idea. To troubleshoot the issue you’re facing, check that the element you want to interact with are properly grouped and have the appropriate interactions set up and double check the interaction setting to confirm they’re consistent across all elements and don’t forget to check their official documentation. Best of luck with your portfolio project!

#3

Thanks! I did double check and I guess I didn’t realize that I would have to link each copy of the component to the overlay that I want to show on click. I thought it would copy the flows as well.

Now the new issue I’m running into is, I have all the components inside a scrolling frame and for some reason the overlay part that shows on click, even though it’s not in the frame itself, scrolls with the frame and it’s a little wonky. Will it always do that because it’s connected to components in a scrollable frame? Or is there a work around so I can make the overlay not move when I scroll down the frame to view the other buttons?