maji-studio-banner

Maji Studio

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

Project status

Activity: In active development

Stability: Unknown (assume unstable)

Installing Maji Studio

Install Atom Editor

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

Installing Atom on Ubuntu

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

Installing Atom on OS X

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

Installing Atom on Windows

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

Installing the Maji Studio Plugin

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

Maji Studio Crash Course

New Maji Studio Project

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

Preview mode

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.

Library and Language Choices

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

Mo.js

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

Framer.js

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

Selecting the library and language

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