> For the complete documentation index, see [llms.txt](https://sketch2react.gitbook.io/marcode/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sketch2react.gitbook.io/marcode/learn/get-started-guide.md).

# Get started guide 🍕

## 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](/files/jumCtS7WsTTDPbAT53C3)

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](/files/S4Thb2EcUdgL1Qww5rSX)

1. Save your Sketch file
2. Open up Marcode app

## In Marcode

![Pretty obvious yes? 😺💪](/files/d4e5sopHAYCGU8hh1mJv)

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 👇🤖<br>

![Blank, yes of course, we have not done anytyhing in Sketch yet](/files/FSlEnlq8fvE9fhNSKm5F)

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 🎉](/files/LNJoFnQYdFghU0U8qeMU)

1. Save in Sketch and now look inside Marcode app, should look like this 👇

![Great work!](/files/1Z7hKLPyzDaSjWz2eAtK)

## 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](/marcode/learn/components.md#rapid-prototyping-components), a very fast way of getting 1:1 designs out to iOS, Android and HTML apps
4. Have fun! 😺🧡

#### Download above Sketch file&#x20;

{% file src="/files/LUH7KZO5FD2pYC9SBz9O" %}