{"id":97,"date":"2019-01-31T14:33:01","date_gmt":"2019-01-31T13:33:01","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/01\/31\/sketch2react%e2%80%8a-%e2%80%8ahow-it-works-january-2019-version\/"},"modified":"2020-11-29T17:26:19","modified_gmt":"2020-11-29T16:26:19","slug":"sketch2react%e2%80%8a-%e2%80%8ahow-it-works-january-2019-version","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react%e2%80%8a-%e2%80%8ahow-it-works-january-2019-version\/","title":{"rendered":"Sketch2React\u200a\u2014\u200aHow it works (January 2019 Version)"},"content":{"rendered":"
\n


\n<\/figure>\n

This is a brand new version of an old article that I wrote back in June 2018. Has been updated to how things work today.<\/em><\/p>\n

A very brief overview on how our framework, code app and plugin work. Just to get you started.<\/p>\n

? Step 1\u200a\u2014\u200aDo your design\u00a0magic<\/h4>\n

First design your stuff. <\/strong>Then it\u2019s time to analyze your design and mentally (or on paper) divide them into Containers, Rows and Columns. We use Bootstrap so a basic understanding of how the grid works is very very recommended.<\/p>\n

Then you can go two ways: either you do it all by hand (recommended for advanced users) or you use our plugin to create folders containing things like rows, columns, paddings and margins. Our plugin is NOT REQUIRED for this to work, but it will help you in the very beginning speeding up your understanding of how things need to be setup inside of Sketch.<\/p>\n

?Important! The page (in Sketch) needs to be named Start here<\/strong> and the first artboard needs to be named Start<\/strong> or our code app will not read your\u00a0.sketchfile correctly.<\/p><\/blockquote>\n

? Step 2\u200a\u2014\u200aMoving and naming\u00a0stuff<\/h4>\n

This step is the most important one.<\/strong> It\u2019s now that you begin giving your Sketch design file the super power of Bootstrap 4<\/strong> and React<\/strong> without even leaving the document. You are enhancing your design with real code components and the amazing responsive<\/strong> Bootstrap 4 grid.<\/p>\n

You add our components in Sketch<\/strong> by using very familiar built in Sketch tools like the Text Node (T)<\/strong>, Grouping (\u2318+G)<\/strong> and the shapes we support.<\/p>\n

Number one rule: You need to name each layer and group<\/strong> with our component names or it will not work at all in code!<\/p><\/blockquote>\n

Example on how you create a {container} in\u00a0Sketch<\/h4>\n
    \n
  1. Create a text node (T)<\/strong>\n<\/li>\n
  2. \nGroup<\/strong> that text node (\u2318+G)<\/li>\n
  3. Rename group {container}<\/strong>\n<\/li>\n
  4. Delete text node or name it {text}<\/strong>. If you named it {text} this very text node will show up in code. Yes!<\/li>\n<\/ol>\n

    Check our Components<\/a> or Cheat Sheet<\/a>. And please study our demo files<\/a>. General rule to remember is: you use nothing more than very familiar Sketch tools for all of our components. No plugin required.<\/p>\n

    ?Step 3\u200a\u2014\u200aLink to our Desktop Code\u00a0App<\/h4>\n

    ??\u200d?Now comes the really fun part<\/strong>, seeing your static Sketch design file starting to come alive!<\/p>\n

    You use our desktop Code App<\/strong> for this. You get access to our app by signing up to our beta program<\/a>.<\/p>\n

    If you have done your homework of Step 2<\/strong>, you will see your design file beautifully rendered and fully responsive based on what you have set up.<\/p>\n

    How to use install & use our Code\u00a0App<\/h4>\n

    First you need to signup to our beta program<\/a>. Once you have downloaded the app you install it like any other Mac app on your computer. After that follow these simple steps to get up and running:<\/p>\n

      \n
    1. Open up our Sketch2React Code App<\/strong>\n<\/li>\n
    2. Go to File\u200a\u2014\u200a->Open (\u2318O)<\/strong>\n<\/li>\n
    3. \nOpen up the\u00a0.sketchfile<\/strong> you are working on<\/li>\n
    4. That same file is now linked with our Code App<\/strong>\n<\/li>\n
    5. Happy makings!<\/li>\n<\/ol>\n

      Why can\u2019t I install your code\u00a0app?<\/h4>\n

      All Mac apps that are not certified by Apple that you download from the web or distribute privately (via your own channels) give you a warning the very first time you open them.<\/p>\n

      Just chill and do like below and happiness will (maybe) come to you.<\/p>\n

        \n
      1. Go to System Preferences<\/strong>\n<\/li>\n
      2. Click on Security & Privacy<\/strong>\n<\/li>\n
      3. It will contain a message that says \u201cSketch2React Code App was blocked from opening because it is not from an identified developer\u201d<\/li>\n
      4. Click on Open Anyway<\/strong>\n<\/li>\n<\/ol>\n

        You been good, now go celebrate this with a great cup of the very best company coffee you can find \u2615<\/p>\n

        Sketch2React Code App\u00a0features<\/h4>\n