Occasionally, you actually just need to quickly build a mockup app directly for iOS, Android, Xcode, or the web. We have the perfect components for that, they’re called {prototype} and {prototype-fluid}, and this is how to get started.

How it works

This button is included in one of our built-in templates under Learn Marcode

The workflow goes like this:

1. You have probably already designed something amazing
2. The page in Sketch or Icons8 Lunacy needs to be named App
3. Your first artboard needs to be named Start or nothing will show up in Marcode
4. Put symbols/components or just anything else on your artboard into a new group that you call {prototype} or {prototype-fluid}
5. Group the contents inside your newly created prototype component and call it something unique like e.g. Featured. Avoid the # character.
6. Add it to export as a PNG, use @2x resolution for crisper results in Xcode or Android Studio.
7. Need to link it? Just use W for Sketch, H for Lunacy
8. Need to update it? No problemo. Every time you update your symbols, layers, whatever, the exported image asset also gets updated
9. Does it need to be fixed to the top or bottom? Use the check box in Sketch or Lunacy and you are good to go!
10. In Marcode, download as HTML or Capacitor.js project
11. Depending on your prototyping needs, you can now auto-build a prototype app for iOS, Xcode, Android or just a plain web app.

You can use this very simple .sketch file to try this out, should work splendid in latest Icons8 Lunacy also.

Need to have an interactive button? We explain how further down. 🎉

The superpowers of {prototype}

In this demo file we’re only using {prototype}

• Makes a 1:1 pixel perfect representation of what you have in Sketch or Lunacy out to mockup code (iOS, Android, HTML etc)
• Automatic HTML linking built-in, link anything to another artboard
• Supports Fix position when scrolling property in Sketch or Lunacy
• Use {prototype} together with our other components

The superpowers of {prototype-fluid}

Here we’re using a combination of {prototype}, {prototype-fluid} and a real code button. Huzzah!

• Makes a responsive representation of what you have in Sketch or Lunacy out to mockup code (iOS, Android, HTML etc)
• Automatic HTML linking built-in, link anything to another artboard
• Supports Fix position when scrolling property in Sketch or Lunacy
• Use {prototype-fluid} together with our other components

Combine with real code components

When using only {prototype} and {prototype-fluid}, what you actually get is a bunch of images that automatically stacks themselves on how things look in your design application. That come with a couple of really neat super powers like Automatic HTML links, Fixed Position Support etc.

There is no dark magic converting these into real code. You get mockup code, actually still way better than just sharing a static prototype from Sketch Cloud aka Workspace or Lunacy Cloud.

Why not add one of our real code components into the mix?

Why even bother?

• Interactivity, like button hover effects, or using a real forms field
• Automatic CSS Styleguide
• Automatic HTML generation

Adding a button with hover state

What we want to do here is to get the same look and feel as our original designed button, but we want this to be a real code button that will not only export all the code we need, but also be interactive.

This template comes bundled with Marcode – copy the button to your own project, restyle and go go go.

Since Marcode shares the same markup as of Sketch2React, all we actually have to do is:

• Download any of our free Sketch2React demo templates that has buttons
• Copy one of the buttons
• Restyle to our liking
• Or you can just use the one from our built-in template as seen below

This button is included in one of our built-in templates, found under Learn Marcode