You can now easily draw beautiful spiral and helix shapes in Sketch
UPDATE. The 6Spiral plugin is NO longer supported in Sketch. This plugin also exists for Figma and it DOES work in Figma. If you are using Sketch, you can create the spirals with 6Spiral in Figma and then right click and “Copy as SVG” on the spiral and then you can simply paste it into 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 (or install it via Sketch Runner). 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. - Update: Latest version v1.0.2 works with Sketch 52 (released October 2, 2018). If you’re on Sketch 51.3 use version 1.0.1.
How To Use 🌀6Spiral
- Download the latest release of the plugin.
- Unzip and double click on
6Spiral.sketchpluginto install the plugin. - Make a rectangle and with the rectangle selected go to
Plugins -> 🌀6Spiral - Make Spiralor use the shortcutControl + Shift + 6. - 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.) - You might want to do some suggested common cleanup steps before applying your own style. (More info in next section).
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.)
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).
Where to Use Spirals
Here are a few UI concepts of using spirals as progress bar indicators:
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.
Additionally, you can also combine 🌀6Spiral with other Sketch plugins, like Looper and Sketch Isometric for some interesting effects:
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.
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.
