An atom package for prototyping interactions using mo.js and framer.js.

Activity: In active development

Stability: Unknown (assume unstable)

Maji Studio is actually an add-on or package for Atom Editor. You need to install Atom first (> v.1.23.0)

1. Open terminal (Ctrl+Alt+T)
2. Run the command: sudo add-apt-repository ppa:webupd8team/atom
3. Run the command: sudo apt update; sudo apt install atom

1. Download the zip file https://atom.io/download/mac
2. Extract the zip file
3. Drop the Atom app into Applications

1. Download the installer file https://atom.io/download/windows
2. Run the installer
3. Next. Next. Finish.

1. Open Atom > Preferences (or File > Settings on Windows).
2. In the Setting tab select Install
3. Search for Maji Studio
4. Install Maji Studio

1. Use the menu bar and select Maji Studio > New Maji Studio Project.
2. Select Create Project on the popup that appears.
3. The new project will me create in you user directory in a folder called maji/<random-project-name>.
4. Maji Studio will automatically open the newly created project.

In order to view the prototype (only mobile prototypes are available at the moment), preview mode needs to be activated. To activate Preview Mode using the menu bar select Maji Studio > Show Preview or press Ctrl+Alt+M.

Preview Mode can only be activated if there is an active workspace. Open a folder to create a workspace or .framer file.

The preview pane refreshes each time a file is saved.

Code may be written in either app.js or app.coffee depending on whether you are using mo.js or framer.js.

If animating or prototyping using mo.js the better language choice is javascript. Coffee script may also be attempted. It may end badly.

If animating or prototyping using framer.js (github) either javascript or coffeescript may be used.

• To select mo.js as the animation library the first command in app.js should be useMojs();
• To select framer.js as the animation library (using javascript) the first command in app.js should be useFramer();
• To select framer.js as the animation library (using coffeescript) the first command in app.js should be useFramerWithCoffee();

If coffeescript is selected write your code in app.coffee

There are current only a few commands in Maji Studio. They are as follows.

1. Open preview mode: Ctrl+Alt+M
2. Close preview mode: Ctrl+Alt+C
3. Create new Maji Studio Poject: Ctrl+Alt+N

The motion graphics toolbelt for the web

Website: http://mojs.io/

Github: legomushroom/mojs

Creators twitter handle: @legomushroom

Framer - Design Everything

Website: https://framer.com/

Github: koenbok/Framer

Creators twitter handle: @koenbok

The MIT License (MIT)

Copyright (c) Oleg Solomka @legomushroom [email protected]

The MIT License (MIT)

Copyright (c) 2014 Koen Bok @koenbok

The MIT License (MIT)

Copyright (c) 2017 Alexander Oloo @alekcz [email protected]