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 2 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
LogoiOS & Android - MarcodeMarcode - by Team Sketch2React
Marcode has many code export options
Page cover image