Use a component as a repeating background

Share an idea
1

1. Describe the problem your experiencing and how your idea helps solve this
I’ve created decorative patterns with nested components and auto-layout to produce the repeating and spacing and it causes terrible performance issues which is understandable given their complexity and scale. I’ve attempted to remedy this by flattening the output as large vector shapes thinking this would to reduce the computational needs to render them with auto-layout. Unfortunately, this hasn’t helped all that much. In any file that uses these large vector shapes I find that as soon as I select a page that contains it Figma freezes up and panning around the document is very difficult (pretty much unusable with auto layout).

I’m aware I can produce a similar effect using and image fill with tiling on any shape or frame but this is limited to using raster graphics as the source. Aside from the fixed resolution of raster graphics, not having the ability to set different fill colors to my patterns is another downside to this solution.

Ideally I’d be able to use a component as the source for a tiled background so it would allow for adjusting the fill color of the component and (in theory) require less resources to render. Currently I’m making a huge vector shape inside a frame with content clipping to make it seemingly “infinite” in size but proper tiling of a background would offer true infinite scaling to the pattern.

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)
Here’s a link with both the auto layout and flattened implementations. To demo the performance issues I have two pages, one for each implementation where you can see how when there are 12 instances of these patterns performance really suffers. In the case of the auto layout implementation, simply trying to duplicate the auto layout frame takes about 4-5 seconds.

3. Ask questions to bring the community into the conversation
Creating scalable repeating patterns across your designs seems like a pretty common need. Being able to do so with vector objects and the flexibility that comes with that seems like a really powerful feature. I’m curious to learn how others have addressed this issue or if my use case is nutty.

1 Like
2

As a newer Figma user, this was an immediate pain point. Definitely need a way to use components or vector shapes as fills to create seamless patterns.

Exporting to bitmap and then using that bitmap as a fill is just so inefficient. :weary:

3 Likes
3

I’d agree bitmaps work but is a bit tedious when refining a pattern. But to do that I just make a test grid of a pattern components so I can refine the pattern in vector/components and then when happy rasterise it. I use a plugin to easily create a grid of components. The rasterisation makes a big difference to the final look of the pattern so if you are designing vector patterns that will be raster make sure pixel rendering is turned on.

1 Like
4

Hi

It would be great to make patterns/tiles with vectors.
At least, being able to use a SVG as an image (in Tile mode). Uploading it or even copy/pasting it - since Figma is able to copy/paste SVG code.

And a way to preserve the Settings (exposure, etc). Maybe with 2 new ones: vertical and horizontal gap.

Or as an Effect…?

Thanks

5

Hi @Tyson_Rosage

My previous reply was moved here by a Figma moderator because I’ve created one called “Vector Patterns / Tiles” which is similar. I haven’t previously seen your post, probably because I was focusing on being a vector not a component.

In order to not loose more similar ones, what do you think on adding to your title more keywords so it gets to more people?

And let’s hope Figma gets there someday :slight_smile:

6

Thanks for the feedback!

We’ll pass this onto our team for future consideration.

1 Like
7

SVG as a tiled image would be such a QoL update. Please Figma overlords, give us this option

8

Copy how Adobe XD did it. Now that it’s a dead product. It was intuitive and useful.

9

This would be great for multi-brand/theme design systems. Our team is using colours with different opacity in different modes depending on the background. 1 less thing our devs need to custom code!

It’s frustrating to have the file hang for over 2 minutes, giving no sign whether it’s going to freeze indefinitely, or eventually apply the colour variable to the tiled SVG.