Real cookie that rotate with scroll

We use cookies.

Back

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
  • Brand your product, website, business uniquely.
    Create Unlimited Beautiful backgrounds.

  • Product

    Social Media Editor

    Geometric Patterns Generator

    Seamless Patterns Generator

    Mesh Gradients Generator

    API Docs

  • Free Tools

    CSS Patterns

    Blob Generator

    Doodle Backgrounds

  • Company

    About

    Blog

    Changelog

    Join Affiliate Program

  • Legal

    Privacy Policy

    Cookies Policy

    Terms

©2021 MagicPattern. Founded by Jim Raptis