Unicorn Express: Framer.js for Everyone
Introducing Maji Studio — a new platform for interaction design on Windows, Linux and OS X. (Powered by Framer.js and Atom).
I grew up with Windows. Our first PC…actually it wasn’t personal in any way. It was communal. Our first computer ran Windows 98 and had a 4GB hard drive. It was magical. Not just playing Freddi Fish, but the whole concept of computers. I loved it. I grew up a Windows man. Played games on Windows. Learnt to code on Windows. I even developed for Windows Phone 7 at my first proper job.
Fast forward to 2017. I don’t really use Windows anymore. I bust it out to play my yearly PC game and to do some testing on IE 11. That’s about it. All my design and dev work takes place on either OS X or Ubuntu. As I continue to learn all the new tools as a newly minted designer, I remember the sadness of seeing yet another tool only on OS X. Those days are behind me (for now) but some of my comrades are still fighting the good fight.
Chrome: A New Hope
It’s an open secret that browsers are “slowly” taking over. Many of our favourite programs or apps are just browsers in disguise. One such app is
’s Atom. Guess who’s not too bad at writing JavaScript?The good folks at
already did the hard work of making Atom available on Windows, Linux and OS X. So I thought: “Why not stand on the shoulders of giants?” And so I made a thing…Introducing Maji Studio
Maji Studio is a new design tool based on Framer and powered by
’s Atom. Maji helps you view, run and build Framer prototypes through Atom. Unfortunately, the prototypes made using Maji don’t work too well in Framer Studio. At least for now. The one made in Framer are real smooth. But more importantly you can make your own.
A Brief History
I had the pleasure of meeting Framer’s founder
earlier this year. The thing that struck me the most about him was his passion for giving the world access to better design tools. That was when the idea started to percolate: Framer.js is open source, surely I could do something for all the design kids out there who couldn’t afford to get Framer (and the required Mac).And then a month later I found the motivation. I needed to give one of my grads a crash course Framer. It’s kinda hard to teach someone Framer who is stranded in a different country (#visaStruggles). Especially given that she only had access to the Framer trial (which was 8 hours at the time). So I used my only superpower: Code.
So that’s how Maji Studio was born.
What’s in a name?
Maji is the Swahili word for water. Civilization has historically flourished around rivers and major waterways. My hope is that, much like with water, the design community world wide will flourish as free and cross-platform design tools become more readily available. This will mean more career opportunities, more diversity and a lower barrier to entry.
Current features
Maji is a work in progress so the features are rough around the edges, but we’ll get there. Without further ado, here they are:
New Maji Studio Project
Shortcut: Shift + Alt + N
Show Preview
Shortcut: Shift + Alt + M
And voilà! There is your preview window. The preview will refresh each time you save the file.
Close Preview
Shortcut: Shift + Alt + C
This closes our preview window and takes back to our usual text editor view.
Present Project
Shortcut: Shift + Alt + P
This connects your browser to the project. Open developer tools, toggle the device toolbar and preview the prototype using the iPhone 6 or 7. After a reload or two it’ll all be peachy fab.
Installing Maji Studio
Installing Maji Studio is like installing a regular package on Atom. Head to Settings or Preferences (depending on your OS) and click on Install and you’ll see a search bar. Search for maji-studio and hit install. After it installs restart Atom and you’re good to go!
The Future
Apart from the usual optimizations and bug fixes, the next step is to allow Maji Studio to be able to import visual designs and turn them into code. I’m hoping to try this out with Gravit (a free and cross-platform vector design tool). I take my hat off to the awesome people at
.I hope someday the design community will not be bound so tightly to one manufacturer — especially such a pricey one. Here’s to Maji Studio as well as free and cross-platform design tools!
Keen to help out? Or just wanna chat? Hit me up: https://twitter.com/alekcz
Oh, you think Windows is your ally. But you merely adopted Windows; I was born in it, moulded by it. I didn’t see the Unix until I was already a man, by then it was nothing to me but BLINDING!
