{"id":90,"date":"2019-01-17T10:00:55","date_gmt":"2019-01-17T09:00:55","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/01\/17\/for-beginners%e2%80%8a-%e2%80%8astep-by-step-sketch2react-tutorial-%e2%9b%b3%ef%b8%8f%f0%9f%a5%8a\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"for-beginners%e2%80%8a-%e2%80%8astep-by-step-sketch2react-tutorial-%e2%9b%b3%ef%b8%8f%f0%9f%a5%8a","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/for-beginners%e2%80%8a-%e2%80%8astep-by-step-sketch2react-tutorial-%e2%9b%b3%ef%b8%8f%f0%9f%a5%8a\/","title":{"rendered":"For beginners\u200a\u2014\u200aStep by step Sketch2React Tutorial \u26f3\ufe0f?"},"content":{"rendered":"
\n


\n<\/figure>\n

Part 1<\/h4>\n

This tutorial is based on the insights from dozen or so internal courses we have held about our framework since the start. Learn and follow this and you will have a very good grasp on what our powerful design-tool-to-code<\/strong> framework for Sketch can do.<\/p>\n

What is Sketch2React? ?<\/h3>\n

Basically you use Sketch app to create code components and layouts.<\/strong> No plugin required. You rename layers and groups in the Layer List<\/strong> accordingly to our framework, and our external code app translates it to magic fluffy stuff<\/strong>. Really neat! Actually the code generated is just good old HTML, CSS and very soon React code and components.<\/em><\/p>\n

What you need\u00a0\u2699\ufe0f<\/h3>\n
    \n
  • Sketch App version 50-<\/li>\n
  • Sketch2React Code App (you need to signup to our private beta to get it)<\/li>\n
  • Mac OS High Sierra and up to Mojave<\/li>\n
  • Zero code knowledge<\/li>\n
  • Level\u200a\u2014\u200aCurious Beginner ?<\/li>\n<\/ul>\n

    That\u2019s it. Okey let\u2019s get started!<\/p>\n

    1. Setup in Sketch app\u00a0\u2705<\/h3>\n
      \n
    1. Create a new document<\/li>\n
    2. Rename Page 1<\/em> to Start here<\/strong>\n<\/li>\n
    3. Create a new artboard. We are doing web things here so make it at least 576px wide. Height does not matter.<\/li>\n
    4. Rename artboard from the default name to Start<\/strong>. Only the first artboard in your hierarchy needs to be named like this. For the others you create use common web design sense. Don\u2019t use special characters or smiley\u2019s ( we know you want to\u200a\u2014\u200astop that urge\u00a0.. right\u00a0\u2026now\u00a0\u2026 <\/em>)<\/li>\n
    5. Yes that\u2019s it! Feel free to create your own template file<\/strong> that you can reuse over and over again. Now let\u2019s create something our first code component! ??<\/li>\n<\/ol>\n

      Creating your first code component ?<\/h3>\n

      Let\u2019s create our very first code component. Text is still the most common content on websites so let\u2019s create a H1.<\/p>\n

        \n
      1. Make sure you are on the artboard Start<\/em><\/strong>\n<\/li>\n
      2. Select the Text tool (T)<\/strong>\n<\/li>\n
      3. Draw out a text node and style it as you wish<\/li>\n
      4. Add this to the beginning of the layer name in the Layer List: {text}<\/strong>\n<\/li>\n
      5. Voila!<\/li>\n<\/ol>\n

        Linking your Sketch file to our code\u00a0app<\/h3>\n
          \n
        1. Open up our Sketch2React Code App<\/strong>\n<\/li>\n
        2. \n\u2318L<\/strong> and browse to the very same Sketch file you created above<\/li>\n
        3. That\u2019s it! Now you Sketch design file is hot-linked into our Code App<\/strong>\n<\/li>\n
        4. Make some changes in your text node, save and it should auto-reload in our app ? ?<\/li>\n<\/ol>\n

          Video version of this very same\u00a0tutorial<\/h3>\n