Real cookie that rotate with scroll

We use cookies.

How to create a custom pattern pack

Written by Jim Raptis

Aug 24, 2021

How to create a custom pattern pack

Follow this tutorial to learn how to create and import a custom pack into MagicPattern tools.

📼 TLDR: Watch the in-depth tutorial video


The process to create your custom shapes for a MagicPattern pack is pretty straightforward. However, there are a few things to keep in mind to make sure that your shapes are imported 100% correctly!


For this tutorial, I'm gonna use Figma because it's a free tool that anyone can use. But everything is applicable to other tools (like Sketch, Adobe Photoshop, Adobe Illustrator) as well.


And to make the process more fun, I'm gonna recreate a tile from this awesome pattern.

notion image

1. Create a 100x100px Frame

Keep in mind, that a frame is an equivalent to artboard for other design tools
notion image
  1. Draw your SVG inside the Frame
  1. Use only one color
  1. Use opacity to create a duotone effect
  1. Remove the frame background
  1. Outline everything

All your layers inside your frame will have the same


Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview

©2024 MagicPattern. Founded by Jim Raptis

We also build