# 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](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FtILLNAW8VShmKPz9B3Sa%2Fbild.png?alt=media\&token=3266e0b9-2ed3-4c38-aa47-19ea68f0e693)

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](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FgRMu4lAd1fkfh34C9iDM%2Fbild.png?alt=media\&token=740c93d0-9de9-4e17-bf79-7fc316d7c5d8)

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

## In Marcode

![Pretty obvious yes? 😺💪](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FeYt4ACZQuKcyZ5kLSmWe%2Fbild.png?alt=media\&token=8edd46d2-a2e7-4e01-9ce2-3bea59738461)

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](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FmVIP3uHoKkARXOYqVwBe%2Fbild.png?alt=media\&token=a42cb834-a5f4-4e0c-a5b1-d2da3bbda153)

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 🎉](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2F1RF5Po01Hh7enKhQhokA%2Fbild.png?alt=media\&token=86bbe6e4-f6ae-4a47-bbc9-f631e9601cf1)

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

![Great work!](https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2F70PPGoot8X8CqH3rHNVv%2Fbild.png?alt=media\&token=7d374eac-db27-4850-b282-8f943d54a90b)

## 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](https://sketch2react.gitbook.io/marcode/components#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="<https://1404888505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LL-qYWTohHkbVxTapce-815021127%2Fuploads%2FFyEuvhKO8cspOMEjRPlX%2FGet%20started%20template.sketch?alt=media&token=22faf859-a942-437a-bf9d-75cb72cc8398>" %}