How to Make a Seamless Pattern in Figma

When a tile repeats, its right edge sits against the left edge of the next copy, and its bottom edge sits against the top of the copy below. A pattern is seamless when whatever is cut off at one edge continues exactly on the opposite edge. Three numbers control that.

• Tile size (W × H): the repeat unit. Every copy of a wrapped shape moves by exactly W horizontally or H vertically. If the tile is 400 px wide, a shape at x = 380 that pokes 30 px past the right edge needs a copy at x = −20.
• Bleed: the part of a shape that crosses the edge. Clip content hides it on this tile, and the wrapped copy supplies it on the neighbor. Shapes can bleed off any side, as long as each one has its partner.
• Offset: a straight grid repeats tiles in rows and columns. A half-drop shifts every other column down by H ÷ 2, and a brick layout shifts every other row by W ÷ 2. Offsets hide the grid, but the wrapping math changes to match.

Seams usually come from three mistakes: a copy moved by 399 px instead of 400, a tile with fractional size like 400.5 px, or a shape near the edge that has no partner at all.

Set up the tile frame

Create a frame with the Frame tool (F) and type the size in the right sidebar. Square sizes that divide nicely, like 200, 256, or 400, keep the math simple. Turn on Clip content so bleeding shapes are cut at the edge. Add a background fill if the pattern has one.

Wrap shapes with exact offsets

Select a shape that crosses the right edge, duplicate it with Cmd/Ctrl + D, and in the X field type the current value followed by -400 (or your tile width). Figma evaluates simple math in number fields, which is how you avoid off-by-one errors from dragging. For the bottom edge, change Y by the tile height. For a shape on a corner, make three copies: one shifted by W, one by H, and one by both.

Preview with Figma's Pattern fill

Figma has a native Pattern fill on every plan. Draw a big rectangle, add a fill, switch the type to Pattern, click Select source, and pick your tile frame. You can set the tile type, scale, spacing, alignment, and opacity. The fill is linked to the source, so edits to the tile show up immediately. That makes it the fastest way to spot seams while you work. You can also apply the same pattern fill directly to backgrounds, cards, or strokes in your designs.

Watch for more than seams. Repeats also show clumps and empty holes that line up across tiles. Move a few motifs, rotate some, or vary their size until the eye stops finding the grid.

Export

Select the tile frame and export it. SVG keeps it sharp for web backgrounds. PNG at 1x and 2x is safer for tools that don't handle SVG. If you use it as a CSS background, set background-size to the tile's 1x size so the 2x file stays crisp.

Many patterns are a grid of one motif with some variation, like confetti, scattered icons, or dots. For those, you can avoid wrapping entirely. Place each motif inside its own cell of a regular grid, keep it smaller than the cell even after rotation, and make the tile exactly columns × step wide and rows × step tall, where step is the distance from one motif to the next. Because nothing crosses the tile edge, the gap between the last motif and the next tile's first motif matches the gap inside the grid. Every cell can have its own rotation, scale, or opacity, and the tile still repeats without a seam.

Building that grid by hand means duplicating and rotating dozens of copies. This is the part Snappattern automates.

Select a motif (a shape, icon, or component instance) and open the Grid mode. Set rows, columns, and x and y spacing, then choose how each cell varies.

• Rotation: random from a list of angles (for example 0, 90, 180, 270), a sequence that cycles by grid position, or Perlin noise for smooth, organic change across the grid.
• Scale: a gradient across X and Y, random from a list like 1, 0.5, 0.25, or a random value between a min and max.
• Opacity: a start-to-end range across cells, or random from a list of values.
• Variants: if the motif is a component instance, each clone can take a random variant or cycle through variants in order. That gives you mixed icons from one component set.

Click Generate grid. Running it again replaces the previous result, so you can tweak settings and regenerate until it looks right. Then wrap the result in a frame sized to columns × step, turn on Clip content, and preview it with a Pattern fill as above. Keep the maximum scale small enough that rotated motifs stay inside their cells. There's also a Repeater mode for lines and spirals of clones, which suits borders and radial designs more than tiles.

Snappattern arranges the clones; it doesn't wrap shapes across tile edges for you. For patterns with large overlapping motifs, use the manual wrapping method. The free tier includes 10 generations. If you haven't used plugins before, here's how to install a Figma plugin, and the full options are in the Snappattern docs.