Skip to main content
Question

Change images to code layer on Figma Sites

  • January 9, 2026
  • 0 replies
  • 3 views

Abril Adell

I’m building a portfolio/website using Figma Sites. On my homepage, I have different containers for each project, and my goal is that when I click on a project, instead of opening a new page, it triggers an overlay on top of the homepage showing that project’s text and images.

I created an interactive banner using code so I could reuse the same template for every project. Now that I’m starting to replace the content, I’ve realized I need a better way to update the images for each project.

Right now, the only method I’ve found is to manually drop the images into the Figma file, convert each one into code, and then copy that code as an import into the original banner so the component knows where the image is coming from.

I’m wondering if there’s an easier way to manage this—ideally a place where I can store all my images and update them whenever needed. Everything else on the site can be changed with simple copy/paste, so I’m hoping images can work the same way.

If anyone has a solution or a better workflow, I’d really appreciate it. Thanks in advance!