Page cover

Get started guide ๐Ÿ•

We get it. You have a short attention span. It's cool, let's keep this really simple and short.

In Sketch or Lunacy

  1. Create a new file โŒ˜N

  2. Rename the Page 1 page ๐Ÿ‘‰ App

Rename the page from Page 1 to App. The App page is where the magic happens
  1. Create a new Artboard (A) size does not matter

  2. Rename it from Artboard ๐Ÿ‘‰ Start

You need one Artboard named Start or nothing will work
  1. Save your Sketch file

  2. Open up Marcode app

In Marcode

Pretty obvious yes? ๐Ÿ˜บ๐Ÿ’ช
  1. Press on the Link a Sketch file area in our app

  2. Locate your newly created Sketch file from the steps above

  3. It should look like this ๐Ÿ‘‡๐Ÿค–

Blank, yes of course, we have not done anytyhing in Sketch yet
  1. Let's add a background color to our Start Artboard and see what happens

  2. Ours looks like this ๐Ÿ‘‡

We added a Background color ๐ŸŽ‰
  1. Save in Sketch and now look inside Marcode app, should look like this ๐Ÿ‘‡

Great work!

What have we learned?

  1. How to create a blank Marcode starter template in Sketch

  2. How to connect the Sketch file to Marcode app

  3. How to add a background color to our first Artboard, that always need to be named Start (never ever take this one away, our app will break). Start is the index.html page.

What do I do next?

  1. Learn our markup, it's super easy

  2. Add as many new Artboards as you might need, but always keep Start (index.html)

  3. Start with our {prototype} components, a very fast way of getting 1:1 designs out to iOS, Android and HTML apps

  4. Have fun! ๐Ÿ˜บ๐Ÿงก

Download above Sketch file

Last updated