Skip to main content
Question

Linking individual elements or components to specific frames

Rachel16

We’re creating a pattern inventory. Essentially, we have a bunch of screenshots of individual elements, and are wanting to link an individual element or component to a frame that shows that element in context. We’d like our client to be able to click on any one of the elements and have a path to seeing the page in which that element appears. We figure this could be achieved one of 2 ways:

  1. If we could attach a link to the individual element, we could link to the appropriate frame (looks to be not possible?)

  2. We could add a description in the metadata with a link to the appropriate frame (also does not appear to be possible)

If anyone knows if either of these methods are actually in fact possible, or if you have another solution to achieve this, we’d be grateful.

Thanks, community!

3 replies

ntfromchicago

To clarify, are the screen shots in the same Figma file, and you want to click on a screen shot to navigate to a different frame on the same page in that same file? Or navigate to a different page/file?

To answer your question, 1 is possible but may require a bit of a hack if navigating to a different page/file.

2 is also possible if you use the “Documentation link” field, but then you have to make every screen a separate component.

In both 1 and 2, the link will open in a new browser window.

Option 3 is to build a custom plugin for your team that does this for your client; all they have to do is download the plugin. (Since I’ve built plugins before, this would be my route).

Rachel16
  • Rachel16
  • Author
  • 1 reply
  • April 3, 2022

The screenshots are gathered together in Frames based on category. So the buttons frame has maybe 10 screenshots of different buttons. We’d like the client to be able to click on each button ss and be able to find a path to see the webpage we grabbed it from.
Our original thought was to have a ss of each full web page located on another Figma page @ 1 screenshot per frame. We wanted to embed the frame link into the individual screenshot.
But now we’re a bit worried about the final file size and looking to possibly link to an external location.

Next-best would be the ability to attach a file name to the element. That’s where we were hoping we could have a metadata field or notes field for the file info. Then, even if we can’t link to the file, there’s at least a reference that the client can access and then go find in the archive we send.

Third-best would be a separate index file that lists or shows the elements and the associated full-screen shot. I don’t even know how we would do that so it would make sense.

Thanks for any advice you can give. Very much appreciated. (We’re not in a position to build a plug-in:))

ntfromchicago

OK, so I think I’m getting your use case. One technique to pull this off is a bit of a hack but I use it for images quite a bit. It’s basically faking a hotspot with a box of transparent text. Here’s a link to a file you can duplicate to your drafts:

Figma – 4 Apr 22

Basically, create a single-letter or single-word box frame at super large font size (enough to cover the image) then make the text transparent. Then, add a link to the text.

If you make this a component, then you can reuse it to swap out the images and links as needed.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings