Using your patterns in design tools

Export a seamless pattern, then put it to work in the tools you already use.

Once your pattern looks right in the live preview, export it and bring it into your design software. Export a seamless SVG when you want to keep editing or scaling, and a PNG (up to 8000 pixels) when a project just needs a ready to use image. Here is how the two formats fit common tools, and how to avoid the handful of mistakes that turn a perfect tile into a visible grid.

Decide what the tile is for before you export

The same design can serve a web background, a fabric print and a feature wall, but the export settings are not the same for all three. It helps to answer two questions first: how big will one repeat be in the finished piece, and does anything need to stay editable later?

Screen backgrounds want a small file. One tile at 1000 pixels is usually plenty, because the browser does the repeating for you.
Print and product surfaces want headroom. Export at 4000 or 8000 pixels so the pattern still holds together at full size.
Anything you may recolour later wants the SVG, because the individual shapes stay separate and selectable.

When in doubt, export both formats. They come from the same tile, so they will always match each other.

Vector tools: Illustrator and Affinity Designer

Import the SVG straight into Illustrator or Affinity Designer. Because PatternMaker exports flat vector geometry, the shapes arrive intact and editable rather than as an empty box. From there you can recolour, combine tiles, or define the artwork as a repeating swatch to paint across any object.

In Illustrator, place the SVG on the artboard, select the artwork, and drag it into the Swatches panel. That swatch can then fill any shape or live text. If you want more control over the repeat spacing, use Object, then Pattern, then Make, which opens the pattern editor and lets you adjust the tile type and overlap.

In Affinity Designer, use File, then Place to bring the SVG in as editable curves. Affinity does not use vector pattern swatches the way Illustrator does, so the practical route for a repeating fill is the Fill tool set to a bitmap fill using your exported PNG. Keep the SVG alongside it as the master you edit and recolour.

Recolour individual shapes to match a brand palette.
Make a swatch and fill logos, shapes or type with your pattern.
Scale freely to any print size with no loss of quality.

Figma, Canva and web design

Figma and Canva work best with the PNG export. In Figma, drop the PNG onto a frame, then in the fill settings switch the image mode from Fill to Tile and drag the scale slider until the repeat feels right. Because the tile is seamless, it will keep repeating cleanly however far you zoom out.

Canva has no tiling fill mode, so the approach is slightly different: upload the PNG, place it as a background element, and scale it to cover the page. If you want a tighter repeat than one image gives you, export a smaller tile size from the editor rather than shrinking it in Canva, which keeps the motifs crisp.

For high-density screens, always export a PNG larger than the frame you are filling. A tile that looks sharp on a standard monitor can look soft on a retina display if it was exported at exactly the display size.

Photoshop and photo tools

Open the PNG in Photoshop or your photo editor of choice. Because the export is already seamless, you can use it directly, or turn it into a reusable pattern: go to Edit, then Define Pattern, give it a name, and it joins your pattern library. From there, Layer, then New Fill Layer, then Pattern will fill any layer with a repeat that lines up cleanly, and you can change the scale without touching the original file.

A Pattern Overlay in Layer Styles does the same job non destructively, which is useful when you want to try a pattern behind type or inside a shape and still be able to back out of it.

Tiling a pattern on a web page

For a website you rarely need anything clever. Save the exported PNG or SVG alongside your stylesheet and let the browser handle the repeat:

.hero {
  background-image: url("pattern.png");
  background-repeat: repeat;
  background-size: 400px 400px;
}

background-size is the useful control here. It sets how large one tile appears on the page, so you can dial the density up or down without re-exporting. Halve the value for a tighter, more textural repeat, or double it for something looser and more graphic.

Fabric, print on demand and backgrounds

Seamless patterns are ideal for surface work. Upload a high-resolution PNG to a print on demand or fabric service, or use the SVG where a vector master is preferred. Most services publish a preferred resolution and repeat size, so check those before you export rather than after, and order a sample before committing to a run.

Four things that break a repeat, and their fixes

Faint lines appear along the tile edges. This is nearly always the tool smoothing or resampling the image. Set the fill or background to repeat at whole-number pixel sizes, and avoid scaling a raster tile to an awkward fraction of its original size.
The pattern looks soft in print. The PNG was exported too small for its final size. Go back and export at 4000 or 8000 pixels, or use the SVG, which has no fixed resolution at all.
The scale looks wrong on the product. Motifs that look balanced on screen are often far too large once printed. Check the physical size of one repeat in centimetres, not pixels, and order a sample.
Colours shift between screen and print. Screens are backlit and printers are not, so expect some drift. Keep a little contrast in reserve and let a printed sample be the deciding vote.

Keep a tidy pattern library

Patterns get reused far more than people expect, and the annoying part is never the designing, it is finding the file again six months later. A little order goes a long way:

Save the editable project as well as the exports, so you can come back and change a motif rather than rebuilding the tile.
Keep the SVG as the master and treat PNGs as disposable outputs you can regenerate at any size.
Name files by use and size, for example brand-dots-4000.png, so the right one is obvious at a glance.
Store colour variants together. One tile in three colourways is a small library that covers most projects.

Tip: keep the SVG as your editable master and export a PNG whenever a specific tool or service needs a plain image. Both come from the same design, so they always match.

Start designing: open the editor, or read how seamless patterns work and SVG vs PNG.