Marcode
πŸ“—Stay on top, read our blog πŸ˜„πŸ’ͺ
  • Welcome to Marcode Docs 🏑
  • learn
    • Get started guide πŸ•
    • Markup cheat sheet πŸ““
    • Using Marcode with Icons8 Lunacy
    • Components πŸ’Ž
    • Exporting to Code 🚚
    • Sketch Assistant Rules Explained πŸ“
  • goodies
    • CSS Writer plugin πŸ”Œ
    • Code snippets πŸ‘©β€πŸ’»
    • 3rd Party Plugins & Apps βš™οΈ
    • Join our Slack πŸ‘―β€β™‚οΈ
  • Support
    • FAQ❓
    • Releases ✍️
Powered by GitBook
On this page
  • In Sketch or Lunacy
  • In Marcode
  • What have we learned?
  • What do I do next?
  1. learn

Get started guide πŸ•

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

PreviousWelcome to Marcode Docs 🏑NextMarkup cheat sheet πŸ““

Last updated 2 years ago

In Sketch or Lunacy

  1. Create a new file ⌘N

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

  1. Create a new Artboard (A) size does not matter

  2. Rename it from Artboard πŸ‘‰ Start

  1. Save your Sketch file

  2. Open up Marcode app

In Marcode

  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 πŸ‘‡πŸ€–

  1. Let's add a background color to our Start Artboard and see what happens

  2. Ours looks like this πŸ‘‡

  1. Save in Sketch and now look inside Marcode app, should look like this πŸ‘‡

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. Have fun! 😺🧑

Download above Sketch file

Start with our, a very fast way of getting 1:1 designs out to iOS, Android and HTML apps

{prototype} components
11KB
Get started template.sketch
Rename the page from Page 1 to App. The App page is where the magic happens
You need one Artboard named Start or nothing will work
Pretty obvious yes? 😺πŸ’ͺ
Blank, yes of course, we have not done anytyhing in Sketch yet
We added a Background color πŸŽ‰
Great work!
Page cover image