Design + Sketch
Published in

Design + Sketch

Tutorial 👉 From Sketch to Xcode — the no code way

Update March 29, 2022

” Can I build apps for Android and iOS with Sketch2React? ”

What else exports HTML, CSS & JS?

In a rare moment of clarity and serendipity, a moment when everything just stopped, my mind was at peace. Then I saw the connection.

The designers MVP

  • Can I build this straight from inside Sketch with Sketch2React? ✅
  • Do I need to do some additional changes in Sketch to get this working? Turns out I didn’t ✅
  • Do I need to write code? Nope! ✅
  • Will my exported HTML project look and work as I expect it to inside Xcode? Yes, it did ✅
  • Am I excited? Hell yes! 🤖 💪 ✅

Tutorial requirements

Software needed

Taking this further

Don’t have Sketch2React?

In Sketch

This is how you add things like fonts, icons, custom CSS, animation libraries to Sketch2React
  • I’m using several {externalasset.css} files — you can use as many as you need, but remember, they need to be copied to each artboard where they are used
  • I’m using Animate.css for a basic animated transition
  • I’ve linked things correctly, adding ./nameofpage.html between all the links
  • I’ve checked that everything works in my HTML, using our simulator and/or our Public preview function

In Sketch2React

  • Start a public preview server or
  • Start a Simulator
Make sure you download as HTML project
This is how the HTML project export looks like after you have unzipped it. Neat right?!

Create your project folder

Installing the Cordova CLI

Loved and dreaded — the Terminal is mighty indeed
sudo npm install -g cordova

Create the app

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.
You know that you are in the right file directory when you see the folder name in the Terminal
cordova create Sketch-iOS

Add your platform

cordova platform add ios
cd Sketch-iOS

Quick fix for directory problems

Change the app name

Here’s where you change the app name
cd Sketch-iOS
This makes sure you are in the correct place
cordova platform remove ios
We have now removed the iOS app
cordova platform add ios
Tada! Our new name is everywhere it needs to be — smoooooooth

Let’s copy some files into Cordova

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

The most important bits

  • Make sure you rename the default folder created by Cordova from img to images
  • 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
cordova build ios
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
cordova run ios

In Xcode

Make sure to download simulators before running the app in Xcode, or you will be very confused

Open up the .xcodeproj file

Run the app in a Xcode simulator

This ain’t no mockup — it’s the real deal. Well, the simulated deal 🤣
Here’s me jumping up and down with joy while running the app inside Xcode. You can’t see this, but I’m actually smiling and doing my mad villan laugh.

This, for me, is totally mind-blowing. It looks and behaves exactly as it does inside Sketch2React. Even the animations work as expected. ✅

An example where I have added my own app icon and installed a free Apple Developer account.

The next level

Doing the same, but with Capacitor.js? New tutorial 😸✌️

Design to code software super bundle

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store