How to repeat/tile a PNG image as a pattern fill in Figma?

Question

Hi! I’m trying to create a grid-style wallpaper in Figma.

I designed a single square tile and exported it as a PNG. My goal is to use this image to fill a larger rectangle with a repeating pattern (tiled multiple times at the original size).

Here’s what I’ve tried so far:

I created a rectangle and, in the Fill section, changed the fill type to Image and selected my PNG. However, this results in the image being scaled up so that only one large square appears inside the rectangle instead of repeating.
I also tried setting the fill type to Pattern, but when I click Select source, nothing happens and I’m unable to choose the image.

Is there a way to make an image repeat automatically as a tiled pattern in Figma without manually duplicating the image? If this isn’t supported natively, are there recommended workarounds or plugins?

Thanks in advance!

reinaonme · Accepted Answer

I figured it out!Instead of exporting the square as a PNG and re-importing it, I went back to the original layer with the single grid tile and used Ctrl + Shift + C to copy it, then pasted it directly (Ctrl + V) into my file.After that, in pasted PNG settings, I changed the fill type from Image to Tile, which allowed the pattern to repeat correctly and adjust the tile frequency/scale as needed.Posting this in case it helps anyone else.

Tom Reem · Answer

Great to hear you got it sorted, ​@reinaonme! 🎯I’ve marked your update as the best answer so it’s easy for anyone else running into this to find yoursolution. Thanks for sharing and helping out the community.Feel free to reach out anytime if more questions pop up.

Sign up

Login with SSO

Login to the community

Login with SSO