{"id":1118,"date":"2021-03-09T15:01:39","date_gmt":"2021-03-09T14:01:39","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1118"},"modified":"2021-05-17T11:01:00","modified_gmt":"2021-05-17T09:01:00","slug":"tutorial-from-sketch-to-xcode-the-no-code-way","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/","title":{"rendered":"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way"},"content":{"rendered":"\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 receptor-containers-imhwpb\">\r\n<p class=\"\">What if you could go from <strong>Sketch to iOS &amp; Android<\/strong> without writing a single line of code?<\/p>\r\n<p class=\"graf graf--p\">Actually, you can. Just check out the video below first, seeing is believing my friends.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"From Sketch to Xcode \u2013 The no code way\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/-iPhPBDwpR8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<p class=\"graf graf--p\">&nbsp;<\/p>\r\n<p class=\"\">From the very start of Sketch2React one question keeps popping up from time to time:<\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>\u201d Can I build apps for Android and iOS with Sketch2React? \u201d<\/p>\r\n<\/blockquote>\r\n<p class=\"\">The answer from us have always been <em>nope<\/em> or <em>depends on how deep you want to dig friend, anything is possible, of course<\/em>\u2026<\/p>\r\n<p class=\"\">Until the other day when I discovered something called <a href=\"https:\/\/cordova.apache.org\/\">Apache Cordova<\/a>.<\/p>\r\n<figure id=\"attachment_1111\" aria-describedby=\"caption-attachment-1111\" style=\"width: 2192px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1111\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7.png\" alt=\"\" width=\"2192\" height=\"1154\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7.png 2192w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-300x158.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-1024x539.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-768x404.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-1536x809.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-2048x1078.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-250x132.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-550x290.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-800x421.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-342x180.png 342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-570x300.png 570w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/apache-cordova-7-950x500.png 950w\" sizes=\"auto, (max-width: 2192px) 100vw, 2192px\" \/><figcaption id=\"caption-attachment-1111\" class=\"wp-caption-text\">What else exports HTML, CSS &amp; JS?<\/figcaption><\/figure>\r\n<blockquote>\r\n<p class=\"\">In a rare moment of clarity and serendipity, a moment when everything just stopped, my mind was at peace. Then I saw <em>the connection<\/em>. What else exports HTML, CSS &amp; JS? <a href=\"https:\/\/sketch2react.io\">Sketch2React<\/a> of course! \ud83d\ude3a<\/p>\r\n<\/blockquote>\r\n<h2 class=\"\">The designers MVP<\/h2>\r\n<p>You can do a lot with Cordova, build entire fully functioning apps for both Android, iOS, OS X, Windows &amp; Electron.<\/p>\r\n<p class=\"\">From a designer&#8217;s perspective though, I\u2019m interested in getting the most with the least effort, specially when it comes to prototypes.<\/p>\r\n<p>Even if my built apps just turns out to be advanced prototypes this is still remarkable and adds value to my work. If you\u2019re still reading you probably agree with me.<\/p>\r\n<p>So in a kind of MVP for learning this I asked myself:<\/p>\r\n<ul>\r\n<li>Can I build this straight from inside Sketch with Sketch2React? \u2705<\/li>\r\n<li>Do I need to do some additional changes in Sketch to get this working? Turns out I didn\u2019t \u2705<\/li>\r\n<li>Do I need to write code? Nope! \u2705<\/li>\r\n<li>Will my exported HTML project look and work as I expect it to inside Xcode? Yes, it did \u2705<\/li>\r\n<li>Am I excited? Hell yes! \ud83e\udd16 \ud83d\udcaa \u2705<\/li>\r\n<\/ul>\r\n<p>Now that I have explained the setup for this tutorial lets get cooking shall we?<\/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\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<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 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<h2 class=\"wp-block-heading\">Tutorial requirements<\/h2>\r\n<p class=\"\">I\u2019m going to assume that you know what <a href=\"https:\/\/sketch2react.io\">Sketch2React<\/a> is. If you stumbled onto this article accidentally or are just curious, here\u2019s the elevator pitch:<\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>Sketch2React is a companion app that lets you build React &amp; HTML prototypes and even simple websites straight from inside Sketch app. Using our Atomic CSS you name &amp; group layers in Sketch and via our code app you can export to React and HTML website projects.<\/p>\r\n<\/blockquote>\r\n<p>To follow along my tutorial, you will need to have these things below <strong>installed<\/strong> first.<\/p>\r\n<p class=\"\">You will also need admin rights to your computer, or you will not be able to install npm packages.<\/p>\r\n<h2>Software needed<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li><a href=\"https:\/\/www.sketch.com\">Sketch app<\/a><\/li>\r\n<li><a href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react\/\">Sketch2React app<\/a><\/li>\r\n<li><a href=\"https:\/\/apps.apple.com\/se\/app\/xcode\/id497799835?mt=12\">Xcode<\/a><\/li>\r\n<li><a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a><\/li>\r\n<li>Terminal app<\/li>\r\n<li><a href=\"https:\/\/code.visualstudio.com\/download\">Visual Studio Code<\/a><\/li>\r\n<\/ul>\r\n<h2 class=\"\">Taking this further<\/h2>\r\n<p class=\"\">This tutorial is for <a href=\"https:\/\/sketch2react.io\">Sketch2React<\/a>, so you will need a basic understanding of how it works if you want to take these <strong>findings and create your own designs<\/strong>. To test the concept all you need is right here in this very tutorial, all the files are included.<\/p>\r\n<h2 class=\"\">Don\u2019t have Sketch2React?<\/h2>\r\n<p class=\"\">No worries, here\u2019s the <a href=\"https:\/\/www.dropbox.com\/s\/l0tpyrvvqxrk3vv\/HTML_from_Sketch2React.zip?dl=0\" target=\"_blank\" rel=\"noopener\">exported HTML<\/a> package, so you can try this out anyway. Also, here\u2019s the<a href=\"https:\/\/www.dropbox.com\/s\/bkaebgrpo9rcbyd\/sketch-ios-project.zip?dl=0\" target=\"_blank\" rel=\"noopener\"> complete project<\/a> that includes all the Cordova and Xcode files you are going to be generating further down this tutorial.<\/p>\r\n<p class=\"\">You can jump down all the way to the section called <strong>Create your project folder<\/strong> if you don\u2019t have Sketch2React.<\/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\r\n\r\n\r\n\r\n\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 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<h1 class=\"wp-block-heading\">In Sketch<\/h1>\r\n<p class=\"\">This is the <a href=\"https:\/\/www.dropbox.com\/s\/o6j5ufkroj5s8n6\/S2R2iOS.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">Sketch file<\/a> I\u2019m going to use in this tutorial. I embedded all the fonts into the document, so it should look a lot like this on your computer.<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1088 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5.png\" alt=\"\" width=\"2100\" height=\"1678\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5.png 2100w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-300x240.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-1024x818.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-768x614.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-1536x1227.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-2048x1636.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-250x200.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-550x439.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-800x639.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-225x180.png 225w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-375x300.png 375w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-file-5-626x500.png 626w\" sizes=\"auto, (max-width: 2100px) 100vw, 2100px\" \/><\/a><\/p>\r\n<blockquote class=\"wp-block-quote\">\r\n<p>Important. Embedding fonts into the Sketch file does not solve the connection out to code. You always need to add a <strong>{externalasset.css}<\/strong> for your web fonts, or it will not look correct after the HTML export.<\/p>\r\n<\/blockquote>\r\n<figure id=\"attachment_1096\" aria-describedby=\"caption-attachment-1096\" style=\"width: 2796px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1096 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3.png\" alt=\"\" width=\"2796\" height=\"724\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3.png 2796w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-300x78.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-1024x265.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-768x199.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-1536x398.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-2048x530.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-250x65.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-550x142.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-800x207.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-695x180.png 695w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-1159x300.png 1159w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/external-assets-sketch-3-1931x500.png 1931w\" sizes=\"auto, (max-width: 2796px) 100vw, 2796px\" \/><\/a><figcaption id=\"caption-attachment-1096\" class=\"wp-caption-text\">This is how you add things like fonts, icons, custom CSS, animation libraries to Sketch2React<\/figcaption><\/figure>\r\n<p class=\"\">If you open up the Sketch file, there are some things worth mentioning:<\/p>\r\n<ul class=\"\">\r\n<li>I\u2019m using several {externalasset.css} files \u2014 you can use as many as you need, but remember, they need to be copied to each artboard where they are used<\/li>\r\n<li>I\u2019m using <a href=\"https:\/\/animate.style\/\">Animate.css<\/a> for a basic animated transition<\/li>\r\n<li>I\u2019ve linked things correctly, adding .\/nameofpage.html between all the links<\/li>\r\n<li>I\u2019ve checked that everything works in my HTML, using our simulator and Public preview function<\/li>\r\n<\/ul>\r\n<h1 class=\"\" style=\"padding: 1em 0em 0em;\">In Sketch2React<\/h1>\r\n<p><strong>Drag and drop the Sketch file onto Sketch2React<\/strong>. Hopefully, it looks as good as this since I remembered to embed the fonts I use.<\/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\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 receptor-containers-imhwpb\">\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1099\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2ReactView-3.gif\" alt=\"\" width=\"1024\" height=\"724\">\r\n<div><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\"><\/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 bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<p class=\"\">What you need to do now is <strong>crucial<\/strong>. You need to <strong><a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/develop\/exporting-to-code#export-to-html\">visit each page once<\/a><\/strong>. Wait for this message to appear centered in the bottom of each artboard:<\/p>\r\n<p class=\"\"><strong>Your Artboard has been added to the export bundle<\/strong><\/p>\r\n<p>Also, to be 100% sure the HTML links are correctly set up you can in Sketch2React:<\/p>\r\n<ul class=\"\">\r\n<li>Start a public preview server or<\/li>\r\n<li>Start a Simulator<\/li>\r\n<\/ul>\r\n<p class=\"\">Now let\u2019s download this as an <strong>HTML project<\/strong> and get to the really exciting part of this tutorial, the part where we get this into <strong>Xcode<\/strong> and build ourselves an <strong>iOS app<\/strong>.<\/p>\r\n<figure id=\"attachment_1108\" aria-describedby=\"caption-attachment-1108\" style=\"width: 1380px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1108\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7.png\" alt=\"\" width=\"1380\" height=\"1156\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7.png 1380w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-300x251.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-1024x858.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-768x643.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-250x209.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-550x461.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-800x670.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-215x180.png 215w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-358x300.png 358w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/download-html-project-7-597x500.png 597w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><figcaption id=\"caption-attachment-1108\" class=\"wp-caption-text\">Make sure you download as HTML project<\/figcaption><\/figure>\r\n<p class=\"\">After you have unzipped your exported HTML project it should look like this:<\/p>\r\n<figure id=\"attachment_1100\" aria-describedby=\"caption-attachment-1100\" style=\"width: 1297px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1100 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6.png\" alt=\"\" width=\"1297\" height=\"896\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6.png 1297w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-300x207.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-1024x707.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-768x531.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-250x173.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-550x380.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-800x553.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-261x180.png 261w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-434x300.png 434w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/S2RHTML-export-6-724x500.png 724w\" sizes=\"auto, (max-width: 1297px) 100vw, 1297px\" \/><\/a><figcaption id=\"caption-attachment-1100\" class=\"wp-caption-text\">This is how the HTML project export looks like after you have unzipped it. Neat right?!<\/figcaption><\/figure>\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<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 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<h1 class=\"wp-block-heading\">Create your project folder<\/h1>\r\n<p class=\"\">Now for keeping this tutorial user-friendly lets create a <strong>new folder in Finder<\/strong> and call it something that keeps it easy to separate when copying files, I will call mine <em>sketch-ios-project<\/em> \ud83d\ude3a \ud83d\udcaaYou can call your folder whatever you find suit.<\/p>\r\n<p class=\"\">This will be our <strong>project folder<\/strong> where we will install all the goodies that are needed to do this <strong>no code dark magic<\/strong>. No worries, as I promised, you will not be writing a single line of code. Just installing packages. That is not coding.<\/p>\r\n<p class=\"\">Before the next step go get yourself a big hot cup of your favorite brew, mine is \u2615You\u2019ll need it trust me.<\/p>\r\n<h1>Installing the Cordova CLI<\/h1>\r\n<p class=\"\">Now open up your favorite Mac app \u2014 the mighty Terminal app \ud83e\udd16 \ud83d\udc4d<\/p>\r\n<figure id=\"attachment_1080\" aria-describedby=\"caption-attachment-1080\" style=\"width: 2174px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1080 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6.png\" alt=\"\" width=\"2174\" height=\"1564\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6.png 2174w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-300x216.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-1024x737.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-768x553.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-1536x1105.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-2048x1473.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-250x180.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-550x396.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-800x576.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-417x300.png 417w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-695x500.png 695w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/terminal-app-6-210x150.png 210w\" sizes=\"auto, (max-width: 2174px) 100vw, 2174px\" \/><\/a><figcaption id=\"caption-attachment-1080\" class=\"wp-caption-text\">Loved and dreaded &#8211; the Terminal is mighty indeed<\/figcaption><\/figure>\r\n<p>To install just copy this snippet and hit \u21a9\ufe0eEnter.<\/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\r\n\r\n<pre class=\"wp-block-code\"><code>sudo npm install -g cordova\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 receptor-containers-imhwpb\">\r\n<p>This ensures you <a href=\"https:\/\/cordova.apache.org\/docs\/en\/10.x\/guide\/cli\/index.html#installing-the-cordova-cli\">install Cordova<\/a> globally on your computer machine, which is a good thing. Make sure you have installed <a href=\"https:\/\/nodejs.org\/en\/download\/\">Node.js<\/a> first or the above step will not work.<\/p>\r\n<p>You will also need to enter your computers password upon installation, it actually does not type out your keyboard strokes, it still works. Hit \u21a9\ufe0e Enter again.<\/p>\r\n<p>You should see things getting installed. It takes a while, just be patient. Stretch your legs, look out the window. Eat a snack.<\/p>\r\n<p>Back yet? Cool lets continue with our adventure.<\/p>\r\n<h1 class=\"\">Create the app<\/h1>\r\n<p class=\"\">Now that we have installed Cordova it\u2019s time for the really fun stuff \u2014&nbsp;installing the <strong>Cordova boilerplate iOS app<\/strong> that we will replace with our content, the Sketch2React HTML export created in Sketch.<\/p>\r\n<p class=\"\">Now in Finder go to your newly created folder called <em> sketch-ios-project<\/em> and drag it onto the Visual Studio Code app icon. I have mine in the Mac Dock. It will probably look like this:<\/p>\r\n<figure id=\"attachment_1070\" aria-describedby=\"caption-attachment-1070\" style=\"width: 3342px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1070\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/vsc-folder-view-5-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><figcaption id=\"caption-attachment-1070\" class=\"wp-caption-text\">This is how it looks inside Visual Studio Code, it&#8217;s empty right now, since we haven&#8217;t installed anything to our local project folder.<\/figcaption><\/figure>\r\n<p class=\"\">The neat thing about using Visual Studio Code is that it has a <strong>built-in Terminal<\/strong> 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.<\/p>\r\n<p>In Visual Studio Code go to \ud83d\udc49Terminal \ud83d\udc49New Terminal. It should look like this:<\/p>\r\n<figure id=\"attachment_1101\" aria-describedby=\"caption-attachment-1101\" style=\"width: 3342px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1101 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-the-app-6-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><\/a><figcaption id=\"caption-attachment-1101\" class=\"wp-caption-text\">You know that you are in the right file directory when you see the folder name in the Terminal<\/figcaption><\/figure>\r\n<p class=\"\">Now make sure you are in the Terminal, add this snippet and hit \u21a9\ufe0eEnter<\/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\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>cordova create Sketch-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 receptor-containers-imhwpb\">\r\n<p class=\"\">It should look like this:<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1102\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/sketch-ios-project-created-5-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><\/a><\/p>\r\n<p class=\"\">Again, you could call your app <strong>whatever you want<\/strong>, just make sure not to use any blank spaces and\/or uncommon characters. Keep it simple, use English.<\/p>\r\n<h1 class=\"\">Add your platform<\/h1>\r\n<p>In our case, since I don\u2019t own an Android device I\u2019m only going to add the iOS platform.<\/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<pre class=\"wp-block-code\"><code>cordova platform 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 receptor-containers-imhwpb\">\r\n<p class=\"\">I ran into a little problem, it said that I wasn\u2019t inside the correct directory. The correct directory in our case is:<\/p>\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>cd Sketch-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 receptor-containers-imhwpb\">\r\n<h2 class=\"wp-block-heading\">Quick fix for directory problems<\/h2>\r\n<p class=\"\">Just drag and drop the autogenerated folder, in my case it\u2019s called <em>Sketch-iOS<\/em> since I ran that installation command in the step above, to Visual Studio Code again, and you\u2019ll be in the correct directory (cd).<\/p>\r\n<h1 class=\"\">Change the app name<\/h1>\r\n<p class=\"\">Now what you\u2019re going to do next will feel a bit contradictory but trust me, it\u2019s better to do this here and now than later. By default, Cordova creates an app called <strong>HelloCordova<\/strong>. We don\u2019t want our app to have that name, right? To change this inside Xcode is a mess, trust me.<\/p>\r\n<p>Go to the file called <strong>config.xml<\/strong> and change the name 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\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 receptor-containers-imhwpb\">\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<figure id=\"attachment_1130\" aria-describedby=\"caption-attachment-1130\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/change-app-name.gif\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1130 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/change-app-name.gif\" alt=\"\" width=\"1024\" height=\"554\"><\/a><figcaption id=\"caption-attachment-1130\" class=\"wp-caption-text\">Here&#8217;s where you change the app name<\/figcaption><\/figure>\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 bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<p class=\"\">Then hit up a <strong>New Terminal<\/strong> in Visual Studio Code and type and hit \u21a9\ufe0eEnter<\/p>\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>cd Sketch-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 receptor-containers-imhwpb\">\r\n<figure id=\"attachment_1090\" aria-describedby=\"caption-attachment-1090\" style=\"width: 3342px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1090\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step1-5-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><\/a><figcaption id=\"caption-attachment-1090\" class=\"wp-caption-text\">This makes sure you are in the correct place<\/figcaption><\/figure>\r\n<p class=\"\">Now that we have changed the name in the <strong>config.xml<\/strong> file we\u2019re going to do a neat trick. <strong>Uninstall and reinstall the iOS platform<\/strong>. That will change the app name everywhere it needs to be changed, and you have spared yourself many headaches.<\/p>\r\n<p class=\"\">So just copy this snippet and hit \u21a9\ufe0eEnter<\/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<pre class=\"wp-block-code\"><code>cordova platform remove 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 receptor-containers-imhwpb\">\r\n<p class=\"\">Now it should look like this:<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1105 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/remove-platform-step2-6-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><\/a><\/p>\r\n<p class=\"\">Here\u2019s for the <strong>magical part<\/strong> that renames everything for us:<\/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<pre class=\"wp-block-code\"><code>cordova platform 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 receptor-containers-imhwpb\">\r\n<figure id=\"attachment_1095\" aria-describedby=\"caption-attachment-1095\" style=\"width: 3342px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1095\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3.png\" alt=\"\" width=\"3342\" height=\"2022\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3.png 3342w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-1024x620.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-1536x929.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-2048x1239.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-250x151.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-800x484.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-298x180.png 298w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-496x300.png 496w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/add-new-platform-name-changed-3-826x500.png 826w\" sizes=\"auto, (max-width: 3342px) 100vw, 3342px\" \/><\/a><figcaption id=\"caption-attachment-1095\" class=\"wp-caption-text\">Tada! Our new name is everywhere it needs to be &#8211; smoooooooth<\/figcaption><\/figure>\r\n<h1 class=\"\">Let&#8217;s copy some files into Cordova<\/h1>\r\n<p class=\"\">Now comes the part where we\u2019re going to take all the great autogenerated HTML files from Sketch2React and <strong>copy\/replace the autogenerated HTML<\/strong> files that Cordova has created for us.<\/p>\r\n<p class=\"\">We want our HTML, not the boilerplate files right? You find these files in the <em>www folder<\/em> that Cordova just created for you.<\/p>\r\n<figure id=\"attachment_1110\" aria-describedby=\"caption-attachment-1110\" style=\"width: 2548px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1110\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7.png\" alt=\"\" width=\"2548\" height=\"1770\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7.png 2548w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-300x208.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-1024x711.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-768x534.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-1536x1067.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-2048x1423.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-250x174.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-550x382.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-800x556.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-259x180.png 259w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-432x300.png 432w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/cordova-www-folder-7-720x500.png 720w\" sizes=\"auto, (max-width: 2548px) 100vw, 2548px\" \/><\/a><figcaption id=\"caption-attachment-1110\" class=\"wp-caption-text\">This is the www folder, the one we&#8217;re going to go \ud83c\udf4cwith<\/figcaption><\/figure>\r\n<p class=\"\">The easiest way to do this is to open up <strong>two different Finder windows<\/strong>, one with the Sketch2React HTML and one with the files created by Cordova, and have them beside each other.<\/p>\r\n<p class=\"\">These steps are best explained with video so here we go:<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Copying the Sketch2React HTML to Cordova\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Sckfg0sRWa4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h2>The most important bits<\/h2>\r\n<ul>\r\n<li>Make sure you rename the default folder created by Cordova from <em>img<\/em> to <em>images<\/em><\/li>\r\n<\/ul>\r\n<p class=\"\">This makes sure the Sketch2React HTML finds the images, pretty crucial \ud83d\ude3a<\/p>\r\n<ul class=\"\">\r\n<li>Copy all the .html files to the root folder of <strong>www<\/strong><\/li>\r\n<li>Delete the files inside the <em>css<\/em> and <em>js<\/em> folders and replace them with the ones from Sketch2React<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1097\" aria-describedby=\"caption-attachment-1097\" style=\"width: 3232px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1097\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3.png\" alt=\"\" width=\"3232\" height=\"1652\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3.png 3232w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-300x153.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-1024x523.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-768x393.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-1536x785.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-2048x1047.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-250x128.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-550x281.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-800x409.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-352x180.png 352w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-587x300.png 587w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/copying-s2r-html-done-3-978x500.png 978w\" sizes=\"auto, (max-width: 3232px) 100vw, 3232px\" \/><\/a><figcaption id=\"caption-attachment-1097\" class=\"wp-caption-text\">This is how it looks after I have copied all the files from the Sketch2React HTML export to the autogenerated folder structure of Cordova<\/figcaption><\/figure>\r\n<p class=\"\">That\u2019s it now let\u2019s build the entire project and see if all these dark magic things actually worked. Let\u2019s jump back to Visual Studio Code and open up a new terminal window, or reuse the one we had before if it\u2019s still open.<\/p>\r\n<p>Copy this snippet and hit \u21a9\ufe0eEnter<\/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\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>cordova build 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 receptor-containers-imhwpb\">\r\n<p>In my case it gives me an error:<\/p>\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>xcodebuild: Command failed with exit code 1 Error output:\r\nxcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '\/Library\/Developer\/CommandLineTools' is a command line tools instance\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 receptor-containers-imhwpb\">\r\n<p class=\"\">Just ignore this, it <strong>actually works anyway<\/strong>, don\u2019t ask me why, I truly don\u2019t care \ud83e\udd23<\/p>\r\n<p>Then copy this snippet and hit \u21a9\ufe0eEnter<\/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<pre class=\"wp-block-code\"><code>cordova run 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 receptor-containers-imhwpb\">\r\n<p class=\"\">Now let\u2019s open up Xcode and see this with our own amazed eyes what we just have created.<\/p>\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 bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12 receptor-containers-imhwpb\">\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 receptor-containers-imhwpb\">\r\n<h1 class=\"wp-block-heading\">In Xcode<\/h1>\r\n<p class=\"\">Before we can actually run our app inside one of the simulators in Xcode <strong>we need to download them to our computer<\/strong>. For some unknown reason Xcode does not come bundled with them. Took me a while to figure this out, I\u2019ll spare you that pain.<\/p>\r\n<p>Go to<strong> Xcode<\/strong> \ud83d\udc49<strong>Preferences<\/strong> \ud83d\udc49<strong>Components<\/strong> and download the simulator that you need. I just downloaded the one on top, it\u2019s called iOS 14.3 Simulator.<\/p>\r\n<figure id=\"attachment_1093\" aria-describedby=\"caption-attachment-1093\" style=\"width: 1947px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1093\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3.png\" alt=\"\" width=\"1947\" height=\"1216\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3.png 1947w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-300x187.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-1024x640.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-768x480.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-1536x959.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-250x156.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-550x344.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-800x500.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-288x180.png 288w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-480x300.png 480w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/install-xcode-sims-3-801x500.png 801w\" sizes=\"auto, (max-width: 1947px) 100vw, 1947px\" \/><\/a><figcaption id=\"caption-attachment-1093\" class=\"wp-caption-text\">Make sure to download simulators before running the app in Xcode, or you will be very confused.<\/figcaption><\/figure>\r\n<h2>Open up the .xcodeproj file<\/h2>\r\n<p class=\"\">You find the Xcode project file for our app inside a folder named platforms:<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1089\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4.png\" alt=\"\" width=\"2973\" height=\"2113\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4.png 2973w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-300x213.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-1024x728.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-768x546.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-1536x1092.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-2048x1456.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-250x178.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-550x391.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-800x569.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-253x180.png 253w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-422x300.png 422w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-704x500.png 704w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-210x150.png 210w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/open-this-in-xcode-4-400x285.png 400w\" sizes=\"auto, (max-width: 2973px) 100vw, 2973px\" \/><\/a><\/p>\r\n<p class=\"\">Just double-click the file, in my case it\u2019s called <em>Sketch-iOS.xcodeproj<\/em>, and it opens up the project inside Xcode, just like you expect it. It takes a little while for Xcode to process, look through the entire structure.<\/p>\r\n<p class=\"\"><em>You will get some warnings<\/em>, I got two of them. They actually fix themselves, just click on the \u26a0\ufe0f-icon, click around the warnings, a pop-up will pop, saying something I really didn\u2019t understand. I just clicked resolve and Xcode did some magical things and boom it worked.<\/p>\r\n<h2>Run the app in a Xcode simulator<\/h2>\r\n<p><strong>Now finally we can run our app inside Xcode!<\/strong> Make sure you choose what simulator you want to run it through, in my case I went for the <strong>iPhone 11 Pro<\/strong> and an iPad.<\/p>\r\n<p>Just look at this, 100% created inside of Sketch app, and now we have it working inside Xcode running on both an iPad and an iPhone.<\/p>\r\n<figure id=\"attachment_1098\" aria-describedby=\"caption-attachment-1098\" style=\"width: 2379px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1098\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3.png\" alt=\"\" width=\"2379\" height=\"1294\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3.png 2379w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-300x163.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-1024x557.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-768x418.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-1536x835.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-2048x1114.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-250x136.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-550x299.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-800x435.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-331x180.png 331w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-552x300.png 552w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/ipad-iphone-simulators-3-919x500.png 919w\" sizes=\"auto, (max-width: 2379px) 100vw, 2379px\" \/><\/a><figcaption id=\"caption-attachment-1098\" class=\"wp-caption-text\">This ain&#8217;t no mockup &#8211; it&#8217;s the real deal<\/figcaption><\/figure>\r\n<p class=\"\">Here\u2019s me jumping up and down with joy while running the app inside Xcode. You can\u2019t see this, but I\u2019m actually smiling here.<\/p>\r\n<p class=\"\">Video in here\u2026<\/p>\r\n<p>This, for me, is totally mind-blowing. It looks and behaves exactly as it does inside Sketch2React. Even the animations work as expected. \u2705<\/p>\r\n<p class=\"\">Of course, If you want to change something in your app and don\u2019t want to do this directly in the HTML, you redo all the steps going all the way up to Sketch and Sketch2React. But let\u2019s not worry about these petty things for now, let\u2019s celebrate.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Xcode view of Sketch2React HTML export\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/E1ObKqjUFfU?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\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\r\n\r\n\r\n\r\n\r\n\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 receptor-containers-imhwpb\">\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><hr class=\"wp-block-separator\"><\/div>\r\n<\/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 receptor-containers-imhwpb\">\r\n<h1 class=\"wp-block-heading\">The next level<\/h1>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"From Sketch2React to iOS - installed on device\" width=\"1200\" height=\"900\" src=\"https:\/\/www.youtube.com\/embed\/m8pvtmf39OM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<p>Very soon you will probably want to do a couple of things that I\u2019m not covering in this tutorial:<\/p>\r\n<ul>\r\n<li><a href=\"https:\/\/www.igeeksblog.com\/how-to-create-free-apple-developer-account\/\">How to add a free Apple Developer account to Xcode<\/a><\/li>\r\n<li><a href=\"https:\/\/medium.com\/@craiggrummitt\/xcode-whats-up-with-app-icons-308b3f10e942\">How to add icons to Xcode<\/a><\/li>\r\n<\/ul>\r\n<p>That\u2019s it, I hope you enjoyed this very dense tutorial on how to go from Sketch app to iOS app without writing a single line of code. Installing what felt like a million things, yes, but code? None!<\/p>\r\n<p>Have a great week,<\/p>\r\n<p>Juan, Team Sketch2React<\/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","protected":false},"excerpt":{"rendered":"<p>What if you could go from Sketch to iOS &amp; Android without writing a single line of code? Actually, you can. Just check out the video below first, seeing is believing my friends. &nbsp; From the very start of Sketch2React one question keeps popping up from time to time: \u201d Can I build apps for&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1136,"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":[184,36,10,55,191,183],"class_list":["post-1118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-cordova","tag-prototypes","tag-sketch","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 \ud83d\udc49 From Sketch to Xcode \u2014 the no code way | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"What if you could go from Sketch to iOS &amp; Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47\" \/>\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-the-no-code-way\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"What if you could go from Sketch to iOS &amp; Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-09T14:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T09:01:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg\" \/>\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\/jpeg\" \/>\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=\"15 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-the-no-code-way\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way\",\"datePublished\":\"2021-03-09T14:01:39+00:00\",\"dateModified\":\"2021-05-17T09:01:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\"},\"wordCount\":2512,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg\",\"keywords\":[\"Cordova\",\"Prototypes\",\"Sketch\",\"Sketch2react\",\"Tutorials\",\"Xcode\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\",\"name\":\"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg\",\"datePublished\":\"2021-03-09T14:01:39+00:00\",\"dateModified\":\"2021-05-17T09:01:00+00:00\",\"description\":\"What if you could go from Sketch to iOS & Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way\"}]},{\"@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 \ud83d\udc49 From Sketch to Xcode \u2014 the no code way | Sketch2React Blog","description":"What if you could go from Sketch to iOS & Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47","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-the-no-code-way\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way - Sketch2React Blog","og_description":"What if you could go from Sketch to iOS & Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47","og_url":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-03-09T14:01:39+00:00","article_modified_time":"2021-05-17T09:01:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg","type":"image\/jpeg"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way","datePublished":"2021-03-09T14:01:39+00:00","dateModified":"2021-05-17T09:01:00+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/"},"wordCount":2512,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg","keywords":["Cordova","Prototypes","Sketch","Sketch2react","Tutorials","Xcode"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/","url":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/","name":"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg","datePublished":"2021-03-09T14:01:39+00:00","dateModified":"2021-05-17T09:01:00+00:00","description":"What if you could go from Sketch to iOS & Android without writing a single line of code? Actually, you can. \ud83e\udd73 Just check out the video below first, seeing is believing my friends. \ud83d\ude3a\ud83d\udc47","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/03\/Sketch2XcodeCoverV2.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-the-no-code-way\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial \ud83d\udc49 From Sketch to Xcode \u2014 the no code way"}]},{"@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\/1118","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=1118"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1118\/revisions"}],"predecessor-version":[{"id":1141,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1118\/revisions\/1141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1136"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}