You can now easily draw beautiful spiral and helix shapes in Sketch

TLDR;

  • 🌀6Spiral is a free plugin for Sketch to easily draw spiral shapes.
  • You can also draw helix shapes at a specified angle in parallel projection to use in the ever more popular 3D-ish isometric illustrations.
  • You can get the plugin here. There’s also a separate Sketch file with a tutorial and some examples that you can download.
  • The shortcut for the plugin is Control + Shift + 6. The initial point of the spiral is positioned at the center of the current shape.

How To Use 🌀6Spiral

On the Left: Making a Spiral. On the Right: Making a Helix.
  1. Download the latest release of the plugin.
  2. Unzip and double click on 6Spiral.sketchplugin to install the plugin.
  3. Make a rectangle and with the rectangle selected go to Plugins -> 🌀6Spiral - Make Spiral or use the shortcut Control + Shift + 6.
  4. Change the parameters to get the shape of the spiral/helix that you’d like as seen in the above GIFs.
    (Other than changing the line width you can not apply styling options while creating the shape.)
  5. You might want to do some suggested common cleanup steps before applying your own style. (More info in next section).

Make sure only one simple shape you made is selected when you run 6Spiral. Plugin won’t work if you select a group, artboard, text layer or any shape layer that you didn’t make yourself (like outlined text).

Cleanup After Spiral is Made

6Spiral will always make an origin point, which can then be deleted.
(If the inner radius is set to zero there will be two points at the origin point of the shape and you should delete one.)

You’ll likely want to change the border properties to to have rounded ends and joins.

A nice way to make a completely smooth spiral is to set a large corner radius on all points (except on the last and first points).

Applying the finishing touches on the spiral shape. The example in the gif uses really low point count to better illustrate the effect of corner radius. Use a larger point count if your goal is to make a smooth spiral.

Where to Use Spirals

Here are a few UI concepts of using spirals as progress bar indicators:

Conceptual progress / status bar UI design using spiral shapes. For square or circular displays, spirals are really good in terms of space utilization if you need to show a longer progress bar on a small screen.

Spirals can be useful for smart watch UI design for progress bars and data visualization where space is limited.

On larger screens there’s potential to use them in game HUD design.

Still, using spiral progress bars is not a common design pattern and it’s important to consider if it introduces more friction for your users and how long it would take them to understand and become familiar with the interface.

Spirals are more commonly used in icon and logos design and in illustrations and hopefully this plugin can improve the design process in those cases.

Examples of some of the existing spiral icons that can be found on thenounproject.com.

Additionally, you can also combine 🌀6Spiral with other Sketch plugins, like Looper and Sketch Isometric for some interesting effects:

On the left: 6Spiral + Looper. On the right: 6Spiral + Sketch Isometric

How to Use Spirals

For the web and browser based apps you can export as SVG and then you can animate / control the stroke-dasharray and stroke-dashoffset properties with CSS and Javascript. It’s useful to work with SVGs for prototyping even if for the final product you’ll need to export and work with different formats.

Animation is made using only CSS.
GIF of above CSS animation.

Now it’s your turn to make great looking spirals 😎

It would be great to see what people end up making with this plugin.
Posting any work made with the help of this plugin in the comments section of this article is highly encouraged. 👍
Feel free to include a link if you also posted that design on your Behance / Dribbble / UpLabs, etc. profile.

Wrapping Up

Happy to hear about any suggestions for future features you’d like to see in the plugin. You can reach me by email at matej.marjanovich@gmail.com or @MatejMarjanovic on Twitter. Bugs are best reported through Github 🐛.

Hope you enjoy the plugin and the content.
If you do, giving a few 👏👏👏 will help other readers like you find this article.

Like what you read? Give Matej Marjanovic a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.