{"id":1484,"date":"2021-06-03T10:12:24","date_gmt":"2021-06-03T08:12:24","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1484"},"modified":"2022-02-15T10:20:51","modified_gmt":"2022-02-15T09:20:51","slug":"tutorial-from-sketch-to-xcode-part-3-adding-a-tab-bar","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-from-sketch-to-xcode-part-3-adding-a-tab-bar\/","title":{"rendered":"Tutorial: From Sketch to Xcode Part 3 \u2014 Adding a Tab Bar"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

In this tutorial I\u2019m going to explore the scenario where you have built something in Sketch with Sketch2React <\/strong>and used our Capacitor 3.0<\/a> export for creating iOS projects. In itself really amazing, but you feel you could do more<\/strong>. Always push for more as a designer, right? This is going to be fun!<\/p>\r\n

Requirements<\/h2>\r\n

This tutorial presumes a few things:<\/p>\r\n

    \r\n
  1. That you know how to build in Sketch for Sketch2React<\/li>\r\n
  2. That you have Sketch2React 2021<\/a><\/li>\r\n
  3. That you have done the prequel tutorial<\/a> and installed all the nice things you need in this one<\/li>\r\n<\/ol>\r\n

    Download the Sketch file<\/h3>\r\n

    \"\"<\/a><\/p>\r\n

    Here’s the Sketch file<\/a> for this tutorial plus the custom CSS I’ve created that removes the default Bootstrap link hover thingie, plus a bit of CSS for rounding all of the images nicely. Important \ud83d\udc49<\/strong>You will need to relink the {externalasset.css} for the custom css from mine to yours or it will not work. Not sure how? Download our free ebook<\/a> and search for {externalasset.css} and you’ll find all the help you need.<\/p>\r\n

    A little disclaimer<\/h3>\r\n

    I\u2019m a total noob when it comes to iOS development.<\/strong> Web code I grasp and understand. Swift? What? Yes, exactly\u2026<\/p>\r\n

    All the things I have learned so far have been by making a million mistakes<\/em>, not reading the manual and googling stuff here and there, just trying again and finally getting something that is representable. It\u2019s just the way I learn.<\/p>\r\n

    This will be my third tutorial focused on the theme From Sketch to Xcode \u2014 the No Code Way <\/strong>and still, I haven\u2019t been forced to write code. I have nothing against code of course, everything that I have done have been about creating code but just in a way that suits me, by autogenerating as much as I can with smart tools.<\/p>\r\n

    With that out of the way let\u2019s go brave explorers of the unknown.<\/p>\r\n

    We are going to build this<\/h2>\r\n
    \"\"<\/a>
    Good Lord did we just build this? Just by learning a tidy little bit of Xcode? Yes we did.<\/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\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

    First lets look at what we have<\/h2>\r\n

    This is how the project looks after I have followed all the steps from my tutorial<\/a> and opened it up in lovely Xcode. Really nice and amazing that you can do this straight from Sketch and Sketch2React.<\/p>\r\n

    \"\"<\/a>
    It still amazes me that everything just looks as expected \ud83d\ude3a\ud83e\udde1<\/figcaption><\/figure>\r\n

    Interesting findings<\/h2>\r\n

    I have experimented with this a couple of times now and here are some interesting findings:<\/p>\r\n