Skip to content

From design to cross-platform app

Marcode has built-in support for exporting directly to Xcode & Android Studio using Ionic’s Capacitor cross-platform open source solution.

🚀Start in Sketch or Lunacy, end up directly inside Xcode or Android Studio

This gives designers and developers unprecedented power to start building directly from inside Sketch or Icons 8 Lunacy, deploy it to code and either use the built-in components in Xcode or Android Studio or add Ionic UI components to the mix.

Don’t have the time to build something from scratch? 👇

🖌️Build pixel perfect prototypes really fast

You already know how to use the built-in prototype tool in Sketch or Icons8 Lunacy. Now take things to the next level by just using our powerful {prototype} features. 

About Ionic & Capacitor

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need.

Capacitor by Ionic deploys out to multiple native platforms using the same code base. Ingenious 🏫

How to export from Marcode

So many options

Exporting to code is super easy, just hit ⌘E 🤖👍

We will guide you all the way from our code export into a Xcode project. Same goes for Android, the workflow is the same.

Our export options

With Marcode you need zero code knowledge while designing and building everything. The same goes for what comes after you’re done with our app. We have three export options:

  1. HTML 👉 Takes all of your sweet designs and bundles it into a production-ready HTML website. Just drag and drop onto a web server, and you’re live on the inter-webs.
  2. Styleguide 👉 Exports all of your styles as production-ready CSS and CSS Modules. 
  3. Ionic Capacitor 👉 Bundles everything for you as a build-ready Capacitor project for iOS & Android.

Our HTML export is production-ready

The difference between them

The two first export options are production-ready. In plain English that means that you don’t need to do anything else, they are delivered as a final package.
 
The third option, the most interesting of the bunch, is build-ready. That means that if you want to create a native app prototype in Xcode (iOS) or Android (Android Studio) you will have to sweat just a little more.
 
Don’t worry, every time you export as Ionic Capacitor project, we add a very straight forward README, with all steps explained.
 

Fight for your right… to admin

⚠️ This is super important. If you don’t have admin rights to your computer machine, you will not be able to actually build your native prototype app for iOS or Android. Export from Marcode, yes. Build in Xcode or Android Studio, noooooo.

You could send the whole thang to say a developer friend of yours, but what is the fun in that? You came here to build native prototype apps!

Huzzah let’s do this now!

Never ever settle for the mundane

Exporting for iOS & Android

Make sure you visit each Artboard once, use the Explorer
  1. Make sure you have visited each artboard in Marcode’s Explorer once
  2. Open up the Export view ⌘E and choose Ionic Capacitor
  3. Select a directory for your exported project folder
  4. Hit the Export button and you’re ready for the next step ✅
Take a ☕ break

One time installs

Now this next step will depend on what you actually want to do. If you only are going to build native iOS apps, you don’t need to install Android Studio. Same goes with Xcode, if you don’t need it, don’t bother downloading it (it’s 42 GB for Xcode only 🤣).

What you do need is:

For iOS apps

Capacitor iOS apps are configured and managed with Xcode and CocoaPods. We strongly recommend using Homebrew for installing CocoaPods.

  1. Open up the Terminal app on your Mac
  2. Install Homebrew 
  3. Install CocoaPods
  4. Install Xcode + Xcode Command Line Tools
  5. Now you are ready to take the exported Marcode iOS Capacitor app to the next level, follow our easy guide in the README.md included

ProTip!🤖💪Use the sudo command

Sometimes when installing packages you will run into issues that almost always can be solved by just adding the word sudo before whatever you are trying to install. You will be prompted to use your computers password, type that invisible thing, and hit enter. Do a happy dance \(ᵔᵕᵔ)/

 

For Android apps

Capacitor Android apps are configured and managed through Android Studio.

  1. Download Android Studio
  2. Now you are ready to take the exported Marcode Android Capacitor app to the next level, follow our easy guide in the README.md included