Exploring the new **[Automator](https://automator.design/)** plugin for Figma. I thought exploring a minimal generative series using pixels and mapping equations would be a fun way to try it out.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F341209bd-9ffd-445e-89ac-2fc7da4ff75b.png?alt=media&token=819579db-db6c-494d-a8d3-85aa23635377","id":"341209bd-9ffd-445e-89ac-2fc7da4ff75b","width":4800,"height":2560,"filename":"gen-grid@2x.png","type":"image/png","caption":"Some select screens from my automation explorations ","border":false}]}
```

### Process

I started by pushing on nesting shapes – How does it look when you nest and rotate shapes continuously? I got some cool outcomes like below, but I realized that most of the gens would end up looking pretty similar, relying so heavily on rotation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Fb73b6629-fddf-4034-8285-bd96ec06b148.png?alt=media&token=3c3f7619-6a25-4b5c-aab9-698b2fa1c038","id":"b73b6629-fddf-4034-8285-bd96ec06b148","width":3456,"height":2232,"filename":"CleanShot - 2021-11-06 at 00.01.06@2x.png","type":"image/png","caption":"","border":false}]}
```

Exploring a different direction, I remembered playing with graphing calculators back in high school – Using trig functions like sin, cos, and tan, I got some exciting results right off the bat.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Fe07de2b4-907a-4ec9-9861-e60886b81541.png?alt=media&token=c84137ec-0772-4d72-9c5e-bd77e2ef1b63","id":"e07de2b4-907a-4ec9-9861-e60886b81541","width":2420,"height":1868,"filename":"CleanShot - 2021-11-06 at 01.00.45@2x.png","type":"image/png","caption":"The points are quite small, you might need to open this image larger to see it well.","border":false}]}
```

Once I found a few directions I liked, I realized that these gens would probably show best in some sort of frame, especially if I wanted to show a few together. I went with the simplest outline possible to keep everything monochrome and on theme.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Ff83f9955-29c9-4b3a-8fa8-4d49990bfc64.png?alt=media&token=7aa3f9b7-252c-4716-aadb-6cc8fe56f3d4","id":"f83f9955-29c9-4b3a-8fa8-4d49990bfc64","width":1600,"height":1600,"filename":"gen-21@2x.png","type":"image/png","caption":"","border":false}]}
```

In the end, I didn't use any nesting to create each gen. Frames 1px tall and 1\~6px wide (randomized) are charted in 2D along the x-axis using the repeat's {{index}}.

The generative functions are mostly created using sin, cos, tan, a randomizer variable, and {{index}} combined in different ways.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Fef1088f2-cfed-41bf-81dd-4f3720d55f90.png?alt=media&token=45d05730-815f-4b25-b182-921d0a9fd2f8","id":"ef1088f2-cfed-41bf-81dd-4f3720d55f90","width":3456,"height":2164,"filename":"CleanShot - 2021-11-06 at 02.54.58@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F3f4b9e7c-735d-4269-92d0-a45aa1ff6398.png?alt=media&token=96e22f3c-fc50-4b77-bb1e-525b8e14793a","id":"3f4b9e7c-735d-4269-92d0-a45aa1ff6398","width":658,"height":1276,"filename":"CleanShot - 2021-11-06 at 02.55.08@2x.png","type":"image/png","caption":"","border":false}]}
```

My favorite thing so far about Automator is how quickly I was able to explore a ton of variations. I was able to create over 60 gens with some really wide variation in under 2 hours.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F26e8dde3-280a-4e3a-88a3-c8c7aa885910.png?alt=media&token=8a3c413b-3adc-4cc9-9794-6b586f5e17c1","id":"26e8dde3-280a-4e3a-88a3-c8c7aa885910","width":3332,"height":1662,"filename":"CleanShot - 2021-11-06 at 03.01.23@2x.png","type":"image/png","caption":"","border":false}]}
```

### Outcome

Here are some of my favorite gens:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Fa6f19515-0662-4568-a055-2fd8c6a4ba8b.png?alt=media&token=75e99dbc-2d48-47cb-9ecb-7dc1ac6badf5","id":"a6f19515-0662-4568-a055-2fd8c6a4ba8b","width":1600,"height":1600,"filename":"gen-76@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F7f80dc0f-4214-4cab-8898-e35a7a20f2e7.png?alt=media&token=24b740db-7008-49e8-a9f6-8736ebd8c1ef","id":"7f80dc0f-4214-4cab-8898-e35a7a20f2e7","width":1600,"height":1600,"filename":"gen-32@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F7886a82d-c8b7-47a5-98fa-10cb860f1b14.png?alt=media&token=5694575f-5fa0-4ad2-80fd-a2d4abb63274","id":"7886a82d-c8b7-47a5-98fa-10cb860f1b14","width":1600,"height":1600,"filename":"gen-36@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F07c37999-cf3c-4022-8a04-b3aa0e3740bd.png?alt=media&token=9c9b13b6-ac8e-4069-a333-e67332149b4e","id":"07c37999-cf3c-4022-8a04-b3aa0e3740bd","width":1600,"height":1600,"filename":"gen-21@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2Fce2dc427-4813-4454-b56a-42f432ef608f.png?alt=media&token=1507934d-ca34-4d3f-828c-92116ca2db69","id":"ce2dc427-4813-4454-b56a-42f432ef608f","width":1600,"height":1600,"filename":"gen-11@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F506jO5gdgrYj3cUmt3ShGTp65ag2%2FamkK5itPyDCD8tu6ewsn%2F33ab0d98-c2f8-4cd5-b121-c038f56bcad2.png?alt=media&token=198dbed4-5e0b-427c-bd66-9d4545c2564c","id":"33ab0d98-c2f8-4cd5-b121-c038f56bcad2","width":1600,"height":1600,"filename":"gen-96@2x.png","type":"image/png","caption":"","border":false}]}
```

I'm looking forward to exploring another generative series soon, following everything I learned with this one!

You can find some of the JSON import files I saved as I was exploring in the [fig-gen repo](https://github.com/iamnbutler/fig-gen).

---

[Jordan Singer](https://twitter.com/jsngr)'s [Automator](https://automator.design/) plugin is currently in closed beta. I can't wait to see what everyone is able to create once they get their hands on this!

Fig-gen

Designer

I joined this episode to chat with Anthony & Katie about all things design, engineering & the intricacies of making interfaces for developers. 

Complementary is a podcast about the principles and practices of interface design hosted by Anthony Hobday & Katie Langerman.

46: Design for Developers with Nate Butler

Worked on numerous internal productivity tools and contributed to our Internal design system, with a focus on navigation and layouts.

Productivity Tools & Internal Design System

Bring your Facebook page to the rest of the web.

Page Plugin

Shipped our first site for Zed! We are currently in deep development, but wanted a way for people to learn more about what we are building, and have a way to know when new info drops. Check it out!

Zed.dev

We are already pretty damn good at manipulating text at Zed... We think AI is just another way to do that.

We went deep on a no-magic approach to editing using large language models, where you are in full control.

Featuring a sweet site revamp by the one and only @danilobleal

Zed AI

Social, prompt based lists. Share your favorite games, TV shows, hangover food or travel destination, then get your friends to do the same!

Lists

Lead design on Facebook Avatars from it's inception in early 2017 until 2019. Helped build the Avatars team from the ground up from a team of 2 to what is over 20 today.

Avatars

Hey 👋 We're the team behind the Atom editor... and we're building something new!

This was a quick little project to tease Zed in the earliest days. The goal was clean & simple–let the content speak over fancy visuals.

Zed.dev Pre-alpha Teaser

Exploring the new Automator plugin for Figma. Thought a minimal generative series using pixels and mapping equations would be a fun way to try it out.

Carving out a new role for people who want to collect and share others content over creating their own. Collections empower the Curator role to become trendsetters with their sharp eye and keen taste.

Collections

Unlocking custom content for creatives and their portfolios.

Custom Pages

Putting some color into your news feed 🎨

Super Awesome Text Posts

An open source design doc site focused on helping early career designers and new grads on their journey into the design industry.

DesignDocs

I designed a series of abstract 3D backgrounds that were used in the FB iOS 11 GUI, and distributed separately as a wallpaper pack.

iOS 11 Backgrounds

Worked on teams like News Feed, Productivity Tools & Facebook Stories.

Product Designer

Designed and managed home pages, navigation, information architecture and individual pages for the new sites of the York University Design & Fine Arts Programs.

Web Developer

We're building the first collaboration-first code editor – Ex-atom founders and a whole score of talented folks are getting together to build you the best code editor you could imagine.

Designed & shipped the Facebook Page Plugin to help website owners and developers connect their websites and apps to their Facebook content.

Product Design Intern

Worked on product for fashion in a pre- Instagram world. Designed upload flows, homepages, profiles, navigation. Front end web design & development.

LOOKBOOK

Designer & Developer

Designed a more friendly way for people to create the layouts they want on their creative portfolios by using prebuilt mix-and-match blocks.