Unicorn Express: Prototyping using Gravit, Framer and Maji Studio

Prototype your designs using Gravit Designer, Maji Studio and Framer.js.

Unicorn by Vehuni Diana — https://www.etsy.com/shop/FluidDiamondArt/items

Last time we chatted, I spoke about next steps:

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).

So I tried it out. I started developing a plugin for Gravit only to ‘realize’ installing plugins is not available yet. At first, I must admit, I thought I had been defeated by Gravit’s UI.

The UI didn’t defeat me but English surely did :/

I was quite stumped for a while. How was I going to import designs from Gravit into Maji Studio. Then I remembered Sketch 43. The way Sketch files were saved changed. Instead of binary file format (unreadable to humans) the design data changed to being stored in an open file format. If Sketch, which isn’t free, uses an open file format then surely…

I ain’t just a pretty face

Taking Maji for a test drive

If you want to give it a spin you’ll need the following.

• Atom with the Maji-Studio package installed
• Gravit Designer (tested with 3.2.6)
• And an internet connection
• You can also grab the Gravit file I used here (Gravit Design.gvdesign) if you can’t be bothered to put your own together.

Start off by designing a simple app flow in Gravit. At the moment, Maji only supports a resolution of 375 x 667. So make sure your design is using that resolution.

When the design is imported each page will represent a screen.

Once you’ve finished your design save it. Then open Atom and create a new Maji Studio project. It takes a while to create the project because it downloads the template from Github (make sure you’ve got some interwebs).

Or press Ctrl+ Alt + N like a boss

Once the project is created you can show the preview window and watch some blue blocks tumble. Empty out app.coffee and import your design.

And voilà!

Now let’s give Framer’s FlowComponent a bash. Pop this code in app.coffee and hit save.

# Initialize FlowComponent
flow = new FlowComponent
#  Set up a flow from your Frames
flow.showNext(Page1.root)
Page1.cta.onClick ->
    flow.showNext(Page2.root)
    Page2.profilepic.animate
      x: 310
      y: 20
      width: 50
      height: 50
      options:
        delay: 0.5
        time: 1
    Page2.twitter.animate
      opacity: 1
      options:
        delay: 1.25
        time: 0.75

Hit save and skrrrrrr pop pop. We have a simple prototype.

Happy prototyping! I’ll catch up with you later. Gotta go polish up some things on the sharing feature. If you need me, catch me on Twitter.

Clappity clap 👏 if you liked this post. Thanks for the read.