Tutorial 👉 From Sketch to Xcode — the no code way
By: Juan Maguid
Tags: Mobile App Development, Android, Xcode, Sketch, Handoff

Create your project folder

Now for keeping this tutorial user-friendly lets create a new folder in Finder and call it something that keeps it easy to separate when copying files, I will call mine sketch-ios-project 😺 💪You can call your folder whatever you find suit.

This will be our project folder where we will install all the goodies that are needed to do this no code dark magic. No worries, as I promised, you will not be writing a single line of code. Just installing packages. That is not coding.

Before the next step go get yourself a big hot cup of your favorite brew, mine is ☕You’ll need it trust me.

Installing the Cordova CLI

Now open up your favorite Mac app — the mighty Terminal app 🤖 👍

Loved and dreaded — the Terminal is mighty indeed

To install just copy this snippet and hit ↩︎Enter

sudo npm install -g cordova

This ensures you install Cordova globally on your computer machine, which is a good thing. Make sure you have installed Node.js first or the above step will not work.

You will also need to enter your computers password upon installation, it actually does not type out your keyboard strokes, it still works. Hit ↩︎ Enter again.

You should see things getting installed. It takes a while, just be patient. Stretch your legs, look out the window. Eat a snack.

Back yet? Cool lets continue with our adventure.

Create the app

Now that we have installed Cordova it’s time for the really fun stuff — installing the Cordova boilerplate iOS app that we will replace with our own content, the Sketch2React HTML export created in Sketch.

Now in Finder go to your newly created folder called sketch-ios-project and drag it onto the Visual Studio Code app icon. I have mine in the Mac Dock. It will probably look like this:

This is how it looks inside Visual Studio Code, it’s empty right now, since we haven’t installed anything to our local project folder.

The neat thing about using Visual Studio Code is that it has a built-in Terminal which makes it super easy to download and install all the necessary packages onto your project folder. Which is how you should build things. Just ask your developers they will nod their heads in agreement.

In Visual Studio Code go to 👉 Terminal 👉 New Terminal. It should look like this:

You know that you are in the right file directory when you see the folder name in the Terminal

Now make sure you are in the Terminal, add this snippet and hit ↩︎Enter

cordova create Sketch-iOS

It should look like this:

Again, you could call your app whatever you want, just make sure not to use any blank spaces and/or uncommon characters. Keep it simple, use English.

Add your platform

In our case, since I don’t own an Android device I’m only going to add the iOS platform.

cordova platform add ios

I ran into a little problem, it said that I wasn’t inside the correct directory. The correct directory in our case is:

cd Sketch-iOS

Quick fix for directory problems

Just drag and drop the autogenerated folder, in my case it’s called Sketch-iOS since I ran that installation command in the step above, to Visual Studio Code again, and you’ll be in the correct directory (cd).

Change the app name

Now what you’re going to do next will feel a bit contradictory but trust me, it’s better to do this here and now than later. By default, Cordova creates an app called HelloCordova. We don’t want our app to have that name, right? To change this inside Xcode is a mess, trust me.

Go to the file called config.xml and change the name like this:

Here’s where you change the app name

Then hit up a New Terminal in Visual Studio Code and type and hit ↩︎Enter

cd Sketch-iOS

This makes sure you are in the correct place

Now that we have changed the name in the config.xml file we’re going to do a neat trick. Uninstall and reinstall the iOS platform. That will change the app name everywhere it needs to be changed, and you have spared yourself many headaches.

So just copy this snippet and hit ↩︎Enter

cordova platform remove ios

Now it should look like this:

We have now removed the iOS app

Here’s for the magical part that renames everything for us:

cordova platform add ios

Tada! Our new name is everywhere it needs to be — smoooooooth

Let’s copy some files into Cordova

Now comes the part where we’re going to take all the great autogenerated HTML files from Sketch2React and copy/replace the autogenerated HTML files that Cordova has created for us.

We want our HTML, not the boilerplate files right? You find these files in the www folder that Cordova just created for you.

This is the www folder, the one we’re going to go 🍌with

The easiest way to do this is to open up two different Finder windows, one with the Sketch2React HTML and one with the files created by Cordova, and have them beside each other.

These steps are best explained with video so here we go:

The most important bits

Make sure you rename the default folder created by Cordova from img to images

This makes sure the Sketch2React HTML finds the images, pretty crucial 😺

Copy all the .html files to the root folder of www

Delete the files inside the css and js folders and replace them with the ones from Sketch2React

This is how it looks after I have copied all the files from the Sketch2React HTML export to the autogenerated folder structure of Cordova

That’s it now let’s build the entire project and see if all these dark magic things actually worked. Let’s jump back to Visual Studio Code and open up a new terminal window, or reuse the one we had before if it’s still open.

Copy this snippet and hit ↩︎Enter

cordova build ios

In my case it gives me an error:

xcodebuild: Command failed with exit code 1 Error output:

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

Just ignore this, it actually works anyway, don’t ask me why, I truly don’t care 🤣

Then copy this snippet and hit ↩︎Enter

cordova run ios

Now let’s open up Xcode and see this with our own amazed eyes what we just have created.