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
  • Export to Ionic Capacitor (iOS, Android)
  • Install Xcode Command Line Tools & CocoaPods first
  • Choose between iOS or Android
  • πŸ“šWe have a great guide
  • Export to HTML
  • Export as CSS Styleguide
  1. learn

Exporting to Code 🚚

All you need to know about Marcode's different ways of exporting to code.

PreviousComponents πŸ’ŽNextSketch Assistant Rules Explained πŸ“

Last updated 3 years ago

Export to Ionic Capacitor (iOS, Android)

You can export directly to iOS & Android project via something awesome called Ionic

  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 βœ…

Install Xcode Command Line Tools & CocoaPods first

This is crucial to do before you go to the next step of installing either the iOS or Android platforms.

xcode-select β€”install
sudo gem install cocoapods

Choose between iOS or Android

Now comes the part where you choose which platform to install for use with Capacitor. You can choose between iOS or Android, we have added both to the config.json file.

For iOS

For Android

πŸ“šWe have a great guide

Export to HTML

  1. Make sure you have visited each artboard in Marcode’s Explorer once

  2. Open up the Export view ⌘E and choose HTML

  3. Select a directory for your exported project folder

  4. Hit the Export button and you’re done βœ…

Export as CSS Styleguide

  1. Make sure you have visited each artboard in Marcode’s Explorer once

  2. Open up the Export view ⌘E and choose Styleguide

  3. Select a directory for your exported project folder

  4. Hit the Export button and you’re done βœ…

Download and install the Xcode Command Line tools. You can do this directly from or you can just fire up the mighty Terminal app and add this installation snippet:

Download and install , easiest is just by adding this snippet directly in the Terminal:

Just follow .

Just follow .

within Xcode
CocoaPods
these instructions
these instructions
Capacitor.js
iOS & Android - MarcodeMarcode - by Team Sketch2React
Logo
Marcode has many code export options
Page cover image