Arrange icons in phyllotaxis pattern with IconFlower Sketch App plugin

This weekend I made this little plugin. It arrange tons of icons in formations like the petal arrangement pattern in a sunflower.

I love sunflowers 🌻

They call such patterns phyllotaxis pattern.

Phyllotaxis describes spiral like patterns — it occurs repeatedly throughout nature. Arrangement of petals in sunflowers for instance. You can read more about Phyllotaxis in case you find it interesting.

The name of this plugin says IconFlower, but it can be used to arrange text, images, shapes layers or even groups.

Here is how it works

1. Install the plugin. Here is link to GitHub Repo. Or you can use Sketchpacks or Runner
2. Inside sketch create an art-board *(the plugin needs an art-board)

2. Place loads of icons / objects / layers on the art-board. (More layers the better — I am using Iconjar to drag — drop icons in the .gif above)

3. Select all icons / objects / layers you want to arrange.

4. Run the plugin.

Done! You get selected stuff arranged in a formation to that of a sunflower petals.

Some examples:

use shape layers or layer groups

use image layers

use text layers

I learned about the concept of phyllotaxis patterns long back but it hit me when I saw Daniel Shiffman in one of his coding challenge.

Translating it from JS to Cocoascript for Sketch was straightforward.

Code for this plugin is nimble and well commented, please feel free to modify and experiment. I would love to see what you might do with it.

Here is the GitHub repo

avadhbsd/IconFlower

You can also install the plugin using @sketchrunner or Sketchpacks just search for IconFlower.

That’s it for now.

Next I am working hard on another plugin that will arrange icons with precise control over opacity, colour and scale for each icon, jamming them all in any shape of your choice, something like this —

Share, Recommend, Tweet, you never know who might find it useful and save hours of pixel pushing.

Thanks so much for your time.