{"id":1168,"date":"2021-03-26T11:02:13","date_gmt":"2021-03-26T10:02:13","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1168"},"modified":"2021-06-03T10:13:29","modified_gmt":"2021-06-03T08:13:29","slug":"tutorial-from-sketch-to-xcode-using-capacitorjs","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/","title":{"rendered":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"\">Breaking news!<\/h3>\r\n<p class=\"\">We just updated Sketch2React with Capacitor project export! That means you can skip all the steps in this tutorial on the subject of&nbsp;<strong>Capacitor project requirements,&nbsp;<\/strong>since we now bundle it for you. Rejoice!<\/p>\r\n<p id=\"f544\" class=\"ju jv gw jw b jx jy jb jz ka kb jf kc kd ke kf kg kh ki kj kk kl km kn ko kp fi cr\" data-selectable-paragraph=\"\">You still need this tutorial for all the other parts, but hey we just made it simpler than ever for you. \ud83d\ude3a\u2705<\/p>\r\n<p class=\"\">Here&#8217;s a new companion video:<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React \u2013 From Sketch to iOS &amp; Xcode via Sketch2react and Capacitor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/n6qNqPPnHDU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr><\/div>\r\n<\/div>\r\n<h2 class=\"\">Background story<\/h2>\r\n<p class=\"\">I hadn\u2019t actually planned to make a <em>part two<\/em> of <a href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\" target=\"_blank\" rel=\"noopener\">my tutorial<\/a> on how to go from Sketch, via Sketch2React to Xcode.<\/p>\r\n<p class=\"\">Then I got this really neat tip from our friendly Slack community short after publishing it:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"1672\" height=\"894\" class=\"wp-image-1153\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip.png\" alt=\"Thanks Richard \ud83d\ude3a\ud83e\udde1\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip.png 1672w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-300x160.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-1024x548.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-768x411.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-1536x821.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-250x134.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-550x294.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-800x428.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-337x180.png 337w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-561x300.png 561w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/slack-tip-935x500.png 935w\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" \/><\/p>\r\n<figcaption>Thanks Richard \ud83d\ude3a\ud83e\udde1<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">So, what\u2019s <a href=\"https:\/\/capacitorjs.com\/\">Capacitor<\/a> one may ask?<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2524\" height=\"1460\" class=\"wp-image-1161\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image.png\" alt=\"\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image.png 2524w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-300x174.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-1024x592.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-768x444.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-1536x888.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-2048x1185.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-250x145.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-550x318.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-800x463.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-311x180.png 311w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-519x300.png 519w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-image-864x500.png 864w\" sizes=\"auto, (max-width: 2524px) 100vw, 2524px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>Basically, it\u2019s like <a href=\"https:\/\/cordova.apache.org\">Cordova<\/a> but uses more modern cross-platform tech. Sounds neat to me, let\u2019s give it a try.<\/p>\r\n<p>The philosophy behind building hybrid apps is that you use web tech, and then you can add platform specifics later. In my context though for now, delighted to be able to go from Sketch to Xcode prototypes with very little effort.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"3242\" height=\"1886\" class=\"wp-image-1158\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup.png\" alt=\"This is my workflow for this tutorial. You can of course also export this for Android but I'm not covering it.\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup.png 3242w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-300x175.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-1024x596.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-768x447.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-1536x894.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-2048x1191.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-250x145.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-550x320.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-800x465.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-309x180.png 309w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-516x300.png 516w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Capacitor-Basic-Setup-859x500.png 859w\" sizes=\"auto, (max-width: 3242px) 100vw, 3242px\" \/><\/p>\r\n<figcaption>This is my workflow for this tutorial. You can of course also export this for Android but I&#8217;m not covering it.<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>As you can see in the basic diagram above, this workflow is really straightforward.<\/p>\r\n<h2 class=\"\">This is what we&#8217;re going to build<\/h2>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"From Sketch to Capacitor \u2013 Final build in Xcode\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/b_QBbRPaL54?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<p class=\"\">Here\u2019s the <a href=\"https:\/\/www.dropbox.com\/s\/3bi2xu1q9e9xsiq\/s2cap.zip?dl=0\" target=\"_blank\" rel=\"noopener\">complete project<\/a>, download it and compare it to your own, strictly for educational purposes, of course.<\/p>\r\n<h2 class=\"\">Tutorial requirements<\/h2>\r\n<ul class=\"\">\r\n<li>I will assume you have done my <a href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\" target=\"_blank\" rel=\"noopener\">first tutorial<\/a> on this topic, going from Sketch to Xcode via Sketch2React<\/li>\r\n<li>Since you already have installed Xcode and all the other goodies we will only focus on using <a href=\"https:\/\/capacitorjs.com\/\" target=\"_blank\" rel=\"noopener\">Capacitor <\/a> and what needs to be installed to get it working<\/li>\r\n<\/ul>\r\n<h2 class=\"\">Install these first<\/h2>\r\n<ol class=\"\">\r\n<li>Download and install the <strong>Xcode Command Line tools<\/strong>. You can do this directly from <a href=\"https:\/\/capacitorjs.com\/docs\/v3\/getting-started\/environment-setup\" target=\"_blank\" rel=\"noopener\">within Xcode<\/a> or you can just fire up the mighty Terminal app and add this installation snippet:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>xcode-select \u2014install\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ol class=\"wp-block-list\" start=\"2\">\r\n<li>Download and install <a href=\"https:\/\/cocoapods.org\" target=\"_blank\" rel=\"noopener\">CocoaPods<\/a>, easiest is just by adding this snippet directly in the Terminal:<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>sudo gem install cocoapods\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2174\" height=\"1564\" class=\"wp-image-1162\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods.png\" alt=\"Whatever gems are I'm up for it \ud83d\udc8e\ud83d\ude3a\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods.png 2174w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-300x216.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-1024x737.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-768x553.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-1536x1105.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-2048x1473.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-250x180.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-550x396.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-800x576.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-417x300.png 417w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-695x500.png 695w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cocoa-pods-210x150.png 210w\" sizes=\"auto, (max-width: 2174px) 100vw, 2174px\" \/><\/p>\r\n<figcaption>Whatever gems are I&#8217;m up for it \ud83d\udc8e\ud83d\ude3a<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Get your Sketch2React HTML ready<\/h2>\r\n<p class=\"\">You already know how to do this since you are a <a href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\" target=\"_blank\" rel=\"noopener\">good student<\/a> right? Awesome \ud83d\ude3a \ud83d\udc4d<\/p>\r\n<p class=\"\">For all of you that don\u2019t own <a title=\"GO TO MARKETPLACE \ud83d\udecd\ufe0f\" href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react\/\" target=\"_blank\" rel=\"noopener\">Sketch2React<\/a>, let\u2019s reuse the HTML package from our previous tutorial. Download the HTML <a title=\"exported HTML\" href=\"https:\/\/www.dropbox.com\/s\/l0tpyrvvqxrk3vv\/HTML_from_Sketch2React.zip?dl=0\" target=\"_blank\" rel=\"noopener\">from here<\/a>.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" width=\"2204\" height=\"1018\" class=\"wp-image-1148\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements.png\" alt=\"\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements.png 2204w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-300x139.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-1024x473.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-768x355.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-1536x709.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-2048x946.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-250x115.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-550x254.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-800x370.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-390x180.png 390w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-650x300.png 650w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-requirements-1083x500.png 1083w\" sizes=\"auto, (max-width: 2204px) 100vw, 2204px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Capacitor project requirements<\/h2>\r\n<p class=\"\">Capacitor was designed to drop into any modern JavaScript web app. Good news for you is that Sketch2React meets these requirements, you just export, and you have what you need. <em>Well almost.<\/em><\/p>\r\n<p class=\"\">I scanned the <a href=\"https:\/\/capacitorjs.com\/docs\/v3\/getting-started\" target=\"_blank\" rel=\"noopener\">Capacitor docs<\/a> and found out that projects must meet the following requirements:<\/p>\r\n<ol class=\"\">\r\n<li>Must have a <strong>package.json file<\/strong><\/li>\r\n<li>Must have a separate directory for web assets (www)<\/li>\r\n<li>Must have an index.html file with a &lt;head&gt; tag in the root of the web assets directory<\/li>\r\n<\/ol>\r\n<p class=\"\">Let&#8217;s check them off one by one.<\/p>\r\n<h2>1. How to create a package.json file from scratch<\/h2>\r\n<p>To create one from scratch you open up the Terminal app, either the stand-alone or the one built-in Visual Studio Code, and enter this snippet:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npm init\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>It will ask you to fill out some fields, and then create a package.json file in the current directory. Directory means project folder in common designer&#8217;s language. \ud83d\udc7d \ud83d\udc4d<\/p>\r\n<p class=\"\">You can always use my<a href=\"#\" target=\"_blank\" rel=\"noopener\"> template package.json<\/a> instead.<\/p>\r\n<h2>2. How to create a separate directory for web assets<\/h2>\r\n<p>This one is super simple. Just create a subfolder in your main project folder and rename it <em>www<\/em>:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1165\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template.png\" alt=\"\" width=\"2101\" height=\"1491\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template.png 2101w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-300x213.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-1024x727.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-768x545.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-1536x1090.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-2048x1453.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-250x177.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-550x390.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-800x568.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-254x180.png 254w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-423x300.png 423w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-705x500.png 705w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-210x150.png 210w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capacitor-folder-template-400x285.png 400w\" sizes=\"auto, (max-width: 2101px) 100vw, 2101px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">3. Must have an index.html file<\/h2>\r\n<p>This step is even simpler. Just drag (or copy) all the HTML files (and folders) that Sketch2React automagically created for you upon export to the newly created folder <em>www<\/em>, like this:<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1163\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor.png\" alt=\"This is how your project folder should look like before installing Capacitor.js\" width=\"2332\" height=\"1318\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor.png 2332w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-300x170.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-1024x579.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-768x434.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-1536x868.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-2048x1157.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-250x141.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-550x311.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-800x452.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-318x180.png 318w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-531x300.png 531w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/folder-structure-before-installing-capacitor-885x500.png 885w\" sizes=\"auto, (max-width: 2332px) 100vw, 2332px\" \/><\/p>\r\n<figcaption>This is how your project folder should look like before installing Capacitor.js<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>You don\u2019t even need to rename any folders, like you need to do with Cordova. It just works.<\/p>\r\n<p class=\"\">To <strong>speed things up for you<\/strong>, I created a <a href=\"https:\/\/www.dropbox.com\/s\/wsx8wouz8n3sasr\/Capacitor-Folder-Template.zip?dl=0\" target=\"_blank\" rel=\"noopener\">folder template<\/a> that meets the above requirements, all you need to do is add your HTML files, and you\u2019ll be good to go.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Installing Capacitor<\/h2>\r\n<p class=\"\">Now let\u2019s do the <strong>real magic<\/strong>, installing Capacitor and all its sheer power directly to our project folder. The easiest way to do this is to drag the entire folder to a code editor like <a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noopener\">Visual Studio Code<\/a>.<\/p>\r\n<h3>Step 1 \u2014 Installing the Capacitor client<\/h3>\r\n<p>Make sure you are in the correct directory (folder) before running this command.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1160\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1.png\" alt=\"This command installs Capacitor to your project folder - neat!\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step1-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<figcaption>This command installs Capacitor to your project folder &#8211; neat!<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npm install @capacitor\/core@next @capacitor\/cli@next\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Step 2 \u2014 Naming your app<\/h3>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1152\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2.png\" alt=\"This command prompts you to name your app and other important thingies\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<figcaption>This command prompts you to name your app and other important thingies<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npx cap init\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">This will prompt you to name your app, in my case I called it <em>s2cap<\/em> since my imagination is very low this time a day.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1150\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2.png\" alt=\"The built-in instructions are great, read them\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-2-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<figcaption>The built-in instructions are great, read them<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Step 3 \u2014&nbsp;Adding your web directory<\/h3>\r\n<p>This makes sure Capacitor knows where to look for your Sketch2React HTML files. I actually forgot to add them (oooops) so I got an error message, but I took care of that afterwards.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1164\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3.png\" alt=\"\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step2-3-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Step 4 \u2014 Installing iOS project<\/h3>\r\n<p>This command installs a complete iOS project directly to your project, really magical.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1157\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1.png\" alt=\"\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-1-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npm install @capacitor\/ios@next\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1154\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2.png\" alt=\"\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-2-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npx cap add ios\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>Here\u2019s where I got that error telling me I had forgotten to actually add HTML files to my <em>www <\/em>folder.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1166\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3.png\" alt=\"No one is perfect\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-3-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<figcaption>No one is perfect<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Step 5 \u2014 Opening up the iOS project in Xcode<\/h3>\r\n<p>Since you are not as sloppy as I am, just enter this snippet below (my favorite part of this tutorial) and Capacitor will automatically open up Xcode for you.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1159\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4.png\" alt=\"\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/installing-capacitor-step3-4-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npx cap open ios\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1156\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view.png\" alt=\"\" width=\"1638\" height=\"1138\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view.png 1638w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-300x208.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-1024x711.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-768x534.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-1536x1067.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-250x174.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-550x382.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-800x556.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-259x180.png 259w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-432x300.png 432w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-ios-view-720x500.png 720w\" sizes=\"auto, (max-width: 1638px) 100vw, 1638px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h3 class=\"wp-block-heading\">Step 6 \u2014&nbsp;Fix those Xcode warnings<\/h3>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1149\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings.png\" alt=\"\" width=\"1638\" height=\"1138\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings.png 1638w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-300x208.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-1024x711.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-768x534.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-1536x1067.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-250x174.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-550x382.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-800x556.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-259x180.png 259w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-432x300.png 432w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/s2cap-fix-warnings-720x500.png 720w\" sizes=\"auto, (max-width: 1638px) 100vw, 1638px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>It\u2019s critical to fix the errors that Xcode warns you about to be able to actually build the app. Great news is that most of them you fix just by double-clicking and letting Xcode do its thing.<\/p>\r\n<h3>Step 7 \u2014 Run the app!<\/h3>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1151\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator.png\" alt=\"\" width=\"3212\" height=\"1906\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator.png 3212w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-300x178.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-1024x608.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-768x456.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-1536x911.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-2048x1215.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-250x148.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-550x326.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-800x475.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-303x180.png 303w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-506x300.png 506w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/final-build-simulator-843x500.png 843w\" sizes=\"auto, (max-width: 3212px) 100vw, 3212px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>You probably already did my <a title=\"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way\" href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\">previous tutorial<\/a>, so I will assume that you have simulators installed in Xcode? Good for you.<\/p>\r\n<p>Here\u2019s a handy shortcut for running the app inside your chosen simulator: <strong>\u2318R<\/strong><\/p>\r\n<h2>Updating your HTML<\/h2>\r\n<p>You will most likely update your HTML down the road.<\/p>\r\n<p>For me, personally the best workflow is doing this directly inside Sketch app, exporting out again via Sketch2React and <strong>replacing the old HTML files with the new ones<\/strong>. Once you have done that you need to tell Capacitor and Xcode that things have changed, been updated.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter\">\r\n<p class=\"mod-reset\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1155\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html.png\" alt=\"\" width=\"1738\" height=\"1219\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html.png 1738w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-300x210.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-1024x718.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-768x539.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-1536x1077.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-250x175.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-550x386.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-800x561.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-257x180.png 257w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-428x300.png 428w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/capactitor-updating-html-713x500.png 713w\" sizes=\"auto, (max-width: 1738px) 100vw, 1738px\" \/><\/p>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>npx cap copy\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>Run this prompt directly inside your project folder, go back to Xcode, stop the simulator and run it again, and you will see your changes in the app your building.<\/p>\r\n<p class=\"\">Like magic. Never gets old, trust me.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Updating the Capacitor iOS App\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Rs4jAYZsjuA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><hr class=\"wp-block-separator\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h1 class=\"wp-block-heading\">Epilogue<\/h1>\r\n<p>It\u2019s remarkable when you realize that a design decision taken from Team Sketch2React more than <a href=\"https:\/\/medium.com\/sketch2react\/react-export-guide-step-by-step-february-pilot-2019-version-52045e3749f9\">2 years back in time<\/a>, still works extremely well. We didn\u2019t even know what Cordova or Capacitor was back then. Actually Capacitor is really new, first version came late 2019 by the mighty <a href=\"https:\/\/ionicframework.com\">Ionic framework<\/a> team.<\/p>\r\n<p class=\"\">For me, personally I have finally found a way to build iOS apps, something that I have dreamed about for a very long time. If someone had told me back in 2012 when I started designing apps using Photoshop, that one day I would use my software combined with other incredibly tools to actually build real ones, I would have laughed very hard.<\/p>\r\n<p class=\"\">Now that dream has come true.<\/p>\r\n<h1 class=\"\">What comes next?<\/h1>\r\n<p class=\"\">I&#8217;ll be continuing to push this concept forward. My goal is to build my next personal portfolio as an app for iPhone and iPad and finally, further down the road, release it as a free download on the App Store. I&#8217;ve experimented inside Xcode a bit more and managed, after failing a million times, to accomplish what you see below. Gotta start somewhere right?<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"From Sketch to Xcode \u2013 Taking it further\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/OdhBfdfDEyo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Breaking news! We just updated Sketch2React with Capacitor project export! That means you can skip all the steps in this tutorial on the subject of&nbsp;Capacitor project requirements,&nbsp;since we now bundle it for you. Rejoice! You still need this tutorial for all the other parts, but hey we just made it simpler than ever for you.&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[185,18,55,191,183],"class_list":["post-1168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-capacitor","tag-sketch-app","tag-sketch2react","tag-tutorials","tag-xcode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-26T10:02:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-03T08:13:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js\",\"datePublished\":\"2021-03-26T10:02:13+00:00\",\"dateModified\":\"2021-06-03T08:13:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\"},\"wordCount\":1333,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png\",\"keywords\":[\"Capacitor\",\"Sketch App\",\"Sketch2react\",\"Tutorials\",\"Xcode\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\",\"name\":\"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png\",\"datePublished\":\"2021-03-26T10:02:13+00:00\",\"dateModified\":\"2021-06-03T08:13:29+00:00\",\"description\":\"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js | Sketch2React Blog","description":"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js - Sketch2React Blog","og_description":"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects","og_url":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-03-26T10:02:13+00:00","article_modified_time":"2021-06-03T08:13:29+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js","datePublished":"2021-03-26T10:02:13+00:00","dateModified":"2021-06-03T08:13:29+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/"},"wordCount":1333,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png","keywords":["Capacitor","Sketch App","Sketch2react","Tutorials","Xcode"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/","url":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/","name":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png","datePublished":"2021-03-26T10:02:13+00:00","dateModified":"2021-06-03T08:13:29+00:00","description":"Tutorial on how to go from Sketch app, via Sketch2React and Capacitor.js, out to real Xcode and iOS projects","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCap.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-using-capacitorjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial: From Sketch to Xcode \u2014 Using Capacitor.js"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1168\/revisions"}],"predecessor-version":[{"id":1336,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1168\/revisions\/1336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1167"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}